:root {
  --ink: #182033;
  --ink-soft: #31415f;
  --muted: #5f6f87;
  --line: rgba(24, 32, 51, 0.12);
  --line-strong: rgba(24, 32, 51, 0.2);
  --paper: rgba(255, 255, 255, 0.94);
  --paper-strong: #ffffff;
  --wash: #f3f7fb;
  --grass: #005587;
  --grass-deep: #003b61;
  --grass-soft: #e6f2f8;
  --pitch: #0f7b4f;
  --pitch-deep: #07523b;
  --pitch-soft: #e9f7f0;
  --red: #d4003b;
  --gold: #ff8c00;
  --ivory: #f9fbfd;
  --success: #0b7a4b;
  --warning: #b86100;
  --radius-1: 8px;
  --radius-2: 8px;
  --radius-3: 8px;
  --shadow-soft: 0 12px 28px rgba(24, 32, 51, 0.08);
  --shadow: 0 18px 48px rgba(24, 32, 51, 0.12);
  --iniesta-login: url("assets/iniesta-login.jpeg");
  --stadium-hero: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 620'%3E%3Cdefs%3E%3ClinearGradient id='s' x1='0' x2='1' y1='0' y2='1'%3E%3Cstop stop-color='%23071426'/%3E%3Cstop offset='.55' stop-color='%23005587'/%3E%3Cstop offset='1' stop-color='%230f7b4f'/%3E%3C/linearGradient%3E%3ClinearGradient id='p' y1='0' y2='1'%3E%3Cstop stop-color='%2321a267'/%3E%3Cstop offset='1' stop-color='%2308613f'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1600' height='620' fill='url(%23s)'/%3E%3Cpath d='M0 238C300 150 510 165 800 222C1085 278 1295 150 1600 238V382H0Z' fill='%23071426' opacity='.64'/%3E%3Cpath d='M0 290C310 218 520 225 800 270C1080 312 1290 218 1600 290V420H0Z' fill='%23123c66'/%3E%3Cg fill='%23fff' opacity='.26'%3E%3Ccircle cx='120' cy='318' r='5'/%3E%3Ccircle cx='210' cy='302' r='4'/%3E%3Ccircle cx='330' cy='330' r='5'/%3E%3Ccircle cx='500' cy='306' r='4'/%3E%3Ccircle cx='680' cy='336' r='5'/%3E%3Ccircle cx='880' cy='336' r='5'/%3E%3Ccircle cx='1080' cy='306' r='4'/%3E%3Ccircle cx='1250' cy='330' r='5'/%3E%3Ccircle cx='1390' cy='302' r='4'/%3E%3Ccircle cx='1490' cy='318' r='5'/%3E%3C/g%3E%3Cg stroke='%23fff' stroke-width='18' stroke-linecap='round' opacity='.28'%3E%3Cpath d='M120 58 390 276'/%3E%3Cpath d='M1480 58 1210 276'/%3E%3Cpath d='M560 36 690 252'/%3E%3Cpath d='M1040 36 910 252'/%3E%3C/g%3E%3Cpath d='M-90 430C320 335 1180 335 1690 430V620H-90Z' fill='url(%23p)'/%3E%3Cg stroke='%23fff' stroke-width='4' fill='none' opacity='.62'%3E%3Cpath d='M165 482C520 416 1080 416 1435 482'/%3E%3Cpath d='M800 396V620'/%3E%3Cellipse cx='800' cy='506' rx='122' ry='56'/%3E%3Cpath d='M90 520C190 478 306 463 430 470V620'/%3E%3Cpath d='M1510 520C1410 478 1294 463 1170 470V620'/%3E%3C/g%3E%3Cpath d='M0 404H1600' stroke='%23ff8c00' stroke-width='10' opacity='.82'/%3E%3Cpath d='M0 416H1600' stroke='%23d4003b' stroke-width='6' opacity='.72'/%3E%3C/svg%3E");
  --icon-ball: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm-2 7h4l1 3-3 2-3-2 1-3Zm-3-3 2 2-1 3-3 1a8 8 0 0 1 2-6Zm10 0a8 8 0 0 1 2 6l-3-1-1-3 2-2ZM6 15l2-1 3 2v3a8 8 0 0 1-5-4Zm12 0a8 8 0 0 1-5 4v-3l3-2 2 1Z'/%3E%3C/svg%3E");
  --icon-ticket: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M4 7a3 3 0 0 1 3-3h10a3 3 0 0 1 3 3v2a3 3 0 0 0 0 6v2a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3v-2a3 3 0 0 0 0-6V7Zm5 0v10h2V7H9Zm4 2v2h4V9h-4Zm0 4v2h4v-2h-4Z'/%3E%3C/svg%3E");
  --icon-live: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M4 5h16v10H7l-3 4V5Zm4 3v2h8V8H8Zm0 4v2h5v-2H8Zm10-1a2 2 0 1 0 4 0 2 2 0 0 0-4 0ZM2 11a2 2 0 1 0 4 0 2 2 0 0 0-4 0Z'/%3E%3C/svg%3E");
  --icon-ranking: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M10 4h4v16h-4V4ZM4 11h4v9H4v-9Zm12-4h4v13h-4V7Z'/%3E%3C/svg%3E");
  --icon-rules: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M7 3h10a2 2 0 0 1 2 2v14.5A1.5 1.5 0 0 1 17.5 21H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2Zm0 14v2h10v-2H7Zm2-9h6V6H9v2Zm0 4h6v-2H9v2Zm0 4h4v-2H9v2Z'/%3E%3C/svg%3E");
  --icon-admin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2 5 5v6c0 5 3 8.6 7 10 4-1.4 7-5 7-10V5l-7-3Zm0 5a3 3 0 0 1 2 5.2A5 5 0 0 1 17 17h-2a3 3 0 0 0-6 0H7a5 5 0 0 1 3-4.8A3 3 0 0 1 12 7Z'/%3E%3C/svg%3E");
  --icon-trophy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M7 3h10v2h4v3a5 5 0 0 1-5 5 6 6 0 0 1-3 4v2h4v2H7v-2h4v-2a6 6 0 0 1-3-4 5 5 0 0 1-5-5V5h4V3Zm0 4H5v1a3 3 0 0 0 2 3V7Zm12 0h-2v4a3 3 0 0 0 2-3V7Z'/%3E%3C/svg%3E");
  --icon-users: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 4a4 4 0 1 1 0 8 4 4 0 0 1 0-8Zm8 2a3 3 0 1 1 0 6 3 3 0 0 1 0-6ZM2 20a7 7 0 0 1 14 0H2Zm14 0a9 9 0 0 0-2-5 5 5 0 0 1 8 5h-6Z'/%3E%3C/svg%3E");
  --icon-status: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20Zm5 7-1.4-1.4-5.3 5.3-2-2L7 12.3l3.3 3.3L17 9Z'/%3E%3C/svg%3E");
}

* {
  box-sizing: border-box;
  letter-spacing: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 150px;
}

body {
  position: relative;
  margin: 0;
  min-height: 100vh;
  min-width: 320px;
  background:
    linear-gradient(180deg, rgba(238, 245, 240, 0.86) 0, #f7fafc 520px),
    #eef5f0;
  color: var(--ink);
  font-family:
    "Sole Repsol", "Repsol", Aptos, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

body::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: 0;
  height: 430px;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(7, 20, 38, 0.08) 0%, rgba(247, 250, 252, 0.96) 86%, #f7fafc 100%),
    var(--stadium-hero) center top / cover no-repeat;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(15, 123, 79, 0.035) 1px, transparent 1px),
    linear-gradient(0deg, rgba(0, 85, 135, 0.03) 1px, transparent 1px);
  background-size: 58px 58px;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

.topbar {
  position: relative;
  z-index: 1;
  width: min(1160px, calc(100% - 32px));
  margin: 0 auto;
}

.page {
  position: relative;
  z-index: 1;
  width: min(1360px, calc(100% - 24px));
  margin: 0 auto;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 30px 0 18px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 16px;
  width: fit-content;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: var(--radius-2);
  background: rgba(7, 20, 38, 0.45);
  color: #fff;
  backdrop-filter: blur(18px);
  box-shadow: 0 18px 42px rgba(7, 20, 38, 0.2);
}

.brand::after {
  display: none;
}

.brand > div {
  display: grid;
  gap: 4px;
}

.brand-mark {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 8px;
  background: var(--grass);
  color: #fff;
  font-weight: 900;
}

.brand-logo {
  display: block;
  width: 132px;
  max-width: 36vw;
  height: auto;
  padding: 7px 10px;
  border-radius: var(--radius-1);
  background: rgba(255, 255, 255, 0.94);
}

.brand h1,
.intro h2,
.section-heading h2 {
  margin: 0;
  line-height: 1.1;
}

.brand h1 {
  color: #fff;
  font-size: clamp(1.4rem, 1.1rem + 0.8vw, 1.85rem);
}

.eyebrow {
  margin: 0 0 4px;
  color: var(--grass);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.brand .eyebrow {
  color: rgba(255, 255, 255, 0.82);
}

.nav-list {
  display: none;
}

.app-tabs a,
.primary-action,
.secondary-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 10px 14px;
  border: 1px solid rgba(24, 32, 51, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--ink);
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(24, 32, 51, 0.05);
  transition:
    transform 140ms ease,
    border-color 140ms ease,
    background 140ms ease,
    box-shadow 140ms ease;
}

.app-tabs a:hover,
.app-tabs a:focus-visible,
.secondary-action:hover,
.secondary-action:focus-visible {
  border-color: var(--grass);
  outline: none;
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(24, 32, 51, 0.1);
}

.app-tabs a.active {
  border-color: transparent;
  background: linear-gradient(135deg, var(--grass), var(--grass-deep));
  color: #fff;
  box-shadow: 0 18px 36px rgba(0, 85, 135, 0.24);
}

.app-tabs a::before {
  content: "";
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  background: currentColor;
  mask: var(--tab-icon) center / contain no-repeat;
  -webkit-mask: var(--tab-icon) center / contain no-repeat;
}

.app-tabs a[href="#boleto"] {
  --tab-icon: var(--icon-ticket);
}

.app-tabs a[href="#vivo"] {
  --tab-icon: var(--icon-live);
}

.app-tabs a[href="#ranking"] {
  --tab-icon: var(--icon-ranking);
}

.app-tabs a[href="#reglas"] {
  --tab-icon: var(--icon-rules);
}

.app-tabs a[href="#admin"] {
  --tab-icon: var(--icon-admin);
}

.app-tabs {
  position: sticky;
  top: 12px;
  z-index: 4;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: var(--radius-2);
  background: rgba(255, 255, 255, 0.76);
  backdrop-filter: blur(16px);
  box-shadow: 0 20px 46px rgba(7, 20, 38, 0.14);
  min-width: 0;
}

.app-tab-links {
  display: flex;
  flex: 1 1 420px;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.app-tabs a {
  flex: 0 1 auto;
  min-width: 104px;
}

.app-session {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 1 1 320px;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.app-session span {
  max-width: min(100%, 280px);
  padding: 10px 14px;
  border: 1px solid rgba(0, 85, 135, 0.14);
  border-radius: 999px;
  background: rgba(0, 85, 135, 0.06);
  color: var(--ink-soft);
  font-size: 0.84rem;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.primary-action {
  border: 0;
  background: linear-gradient(135deg, var(--gold), var(--red));
  color: #fff;
  font-weight: 900;
  box-shadow: 0 16px 28px rgba(212, 0, 59, 0.2);
}

.primary-action::before {
  content: "";
  width: 16px;
  height: 16px;
  background: currentColor;
  mask: var(--icon-trophy) center / contain no-repeat;
  -webkit-mask: var(--icon-trophy) center / contain no-repeat;
}

.primary-action:hover,
.primary-action:focus-visible {
  background: linear-gradient(135deg, #ef7100, #c8003d);
  outline: none;
}

.secondary-action {
  background: #fff;
}

.page {
  display: grid;
  gap: 20px;
  padding: 0 0 40px;
}

.login-view,
.app-view {
  display: grid;
  gap: 18px;
  min-width: 0;
}

#boleto,
#ranking,
#reglas,
#admin {
  min-width: 0;
  scroll-margin-top: 150px;
}

.login-view {
  grid-template-columns: minmax(0, 1.08fr) minmax(350px, 0.92fr);
  align-items: start;
  max-width: 1080px;
  margin: 24px auto 0;
}

.hidden {
  display: none !important;
}

body.admin-only .app-view > section:not(.admin-grid) {
  display: none;
}

.intro,
.panel,
.summary-grid article {
  border: 1px solid var(--line);
  border-radius: var(--radius-2);
  background: var(--paper);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-soft);
}

.intro {
  display: grid;
  align-content: space-between;
  gap: 24px;
  padding: 30px;
  background: rgba(255, 255, 255, 0.96);
}

.login-intro {
  position: relative;
  overflow: hidden;
  grid-template-rows: auto 1fr;
  text-align: left;
  background:
    linear-gradient(135deg, rgba(7, 20, 38, 0.92), rgba(0, 59, 97, 0.58) 54%, rgba(15, 123, 79, 0.38)),
    linear-gradient(90deg, rgba(7, 20, 38, 0.74) 0%, rgba(7, 20, 38, 0.36) 48%, rgba(7, 20, 38, 0.1) 100%),
    var(--iniesta-login) center 42% / cover no-repeat;
  color: #fff;
}

.login-intro::after {
  display: none;
}

.login-intro::before {
  display: none;
}

.login-intro::before,
.login-intro::after {
  pointer-events: none;
}

.login-intro > * {
  position: relative;
  z-index: 1;
}

.intro.login-intro .eyebrow,
.intro.login-intro h2,
.intro.login-intro p,
.intro.login-intro li {
  color: #fff;
}

.login-intro .auth-glance article {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(7, 20, 38, 0.35);
}

.login-intro .auth-glance strong,
.login-intro .auth-glance p {
  color: #fff;
}

.login-bullet-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 20px;
  color: #fff;
  font-weight: 900;
  line-height: 1.35;
}

.login-bullet-list {
  margin-top: 10px;
  max-width: 620px;
  font-size: 1rem;
}

.login-bullet-list li::marker {
  color: var(--gold);
}

.auth-glance.login-score-list {
  grid-template-columns: 1fr;
  gap: 10px;
}

.login-intro .auth-glance.login-score-list article {
  grid-template-columns: 82px minmax(0, 1fr);
  align-items: start;
  min-height: auto;
  gap: 14px;
  padding: 12px 14px;
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(7, 20, 38, 0.38);
}

.login-score-list ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin: 0;
  padding-left: 0;
  color: #fff;
  font-size: 0.88rem;
  font-weight: 900;
  line-height: 1.28;
  list-style: none;
}

.login-score-list li {
  position: relative;
  min-width: min(100%, 190px);
  padding-left: 12px;
}

.login-score-list li::before {
  content: "";
  position: absolute;
  top: 0.55em;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--gold);
}

.login-panel {
  display: grid;
  align-self: start;
  align-content: start;
  gap: 14px;
  padding: 24px;
  border-color: rgba(24, 32, 51, 0.11);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(250, 252, 254, 0.97)),
    radial-gradient(circle at 88% 12%, rgba(0, 85, 135, 0.08), transparent 34%);
  box-shadow: 0 18px 46px rgba(7, 20, 38, 0.11);
}

.login-panel .button-row {
  justify-content: flex-start;
  margin-top: 4px;
}

.login-panel .primary-button {
  min-width: 140px;
}

.login-intro-copy {
  display: grid;
  gap: 6px;
}

.auth-glance {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  align-self: end;
  gap: 10px;
  width: 100%;
}

.auth-glance article {
  display: grid;
  gap: 6px;
  min-height: 112px;
  padding: 14px;
  border: 1px solid rgba(24, 32, 51, 0.08);
  border-radius: var(--radius-1);
  background: rgba(255, 255, 255, 0.8);
}

.auth-glance strong {
  color: var(--ink);
  font-size: 0.95rem;
}

.auth-glance p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1.45;
}

.auth-mode-switch {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 6px;
  border: 1px solid rgba(24, 32, 51, 0.08);
  border-radius: 999px;
  background: rgba(238, 243, 248, 0.88);
}

.auth-mode {
  min-height: 42px;
  padding: 10px 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-weight: 900;
}

.auth-mode.active {
  background: linear-gradient(135deg, var(--grass), var(--grass-deep));
  color: #fff;
  box-shadow: 0 12px 24px rgba(0, 85, 135, 0.2);
}

.auth-panel-copy,
.auth-footer-note {
  margin: 0;
  color: var(--muted);
  font-weight: 800;
  line-height: 1.5;
}

.intro h2 {
  max-width: 740px;
  font-size: clamp(1.8rem, 1.45rem + 1.5vw, 2.55rem);
}

.intro p {
  margin: 12px 0 0;
  color: var(--muted);
  line-height: 1.55;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.home-overview {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(220px, 1fr));
  gap: 12px;
}

.porra-overview {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  gap: 12px;
  margin: 22px 22px 0;
}

.home-card {
  position: relative;
  display: grid;
  gap: 12px;
  min-height: 148px;
  padding: 22px;
  border: 1px solid rgba(24, 32, 51, 0.1);
  border-radius: var(--radius-2);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.99), rgba(244, 248, 252, 0.93));
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.home-card::after {
  content: "";
  position: absolute;
  right: 18px;
  bottom: 16px;
  width: 72px;
  height: 72px;
  background: var(--grass);
  mask: var(--icon-trophy) center / contain no-repeat;
  -webkit-mask: var(--icon-trophy) center / contain no-repeat;
  opacity: 0.08;
}

.home-card strong {
  display: block;
  color: var(--ink);
  font-size: 1.25rem;
  line-height: 1.2;
}

.home-card p {
  margin: 0;
  color: var(--muted);
  font-weight: 800;
  line-height: 1.45;
}

.home-card-label {
  color: var(--red);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.next-phase-card {
  border-color: rgba(0, 85, 135, 0.2);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.99), rgba(230, 242, 248, 0.95));
}

.compact-meta-card {
  border-color: rgba(0, 85, 135, 0.24);
  background:
    linear-gradient(155deg, rgba(0, 85, 135, 0.96), rgba(0, 59, 97, 0.86)),
    var(--stadium-hero) center / cover no-repeat;
}

.compact-meta-card .home-card-label,
.compact-meta-card strong {
  color: #ffffff;
}

.compact-meta-card p {
  color: rgba(255, 255, 255, 0.82);
}

.home-card-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.home-card-meta span {
  padding: 8px 11px;
  border: 1px solid rgba(24, 32, 51, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 900;
}

.intro-ball {
  flex: 0 0 auto;
  width: 92px;
  height: 92px;
  border-radius: 8px;
  object-fit: cover;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.summary-grid article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 12px;
  row-gap: 4px;
  min-height: 96px;
  padding: 18px;
  border-color: rgba(0, 85, 135, 0.12);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(235, 247, 240, 0.88));
  backdrop-filter: blur(16px);
}

.summary-grid article::before {
  content: "";
  grid-row: 1 / span 2;
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, var(--grass), var(--pitch));
  mask: var(--summary-icon) center / 28px 28px no-repeat;
  -webkit-mask: var(--summary-icon) center / 28px 28px no-repeat;
}

.summary-grid article:nth-child(1) {
  --summary-icon: var(--icon-users);
}

.summary-grid article:nth-child(2) {
  --summary-icon: var(--icon-ticket);
}

.summary-grid article:nth-child(3) {
  --summary-icon: var(--icon-trophy);
}

.summary-grid article:nth-child(4) {
  --summary-icon: var(--icon-status);
}

.summary-grid article span,
.summary-grid article strong {
  grid-column: 2;
}

.summary-grid span,
.prize-list span,
.match-meta,
.result-meta,
.saved-note,
.ranking-copy span {
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 800;
}

.summary-grid span {
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.summary-grid strong,
.prize-list strong {
  color: var(--grass);
  font-size: clamp(1.45rem, 1.1rem + 1vw, 2rem);
  line-height: 1.08;
}

.summary-grid {
  order: 2;
}

.phase-panel {
  order: 3;
}

.prediction-panel {
  order: 1;
}

.prediction-panel {
  overflow: visible;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  min-width: 0;
}

.prediction-panel > .section-heading {
  margin: 0;
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: var(--radius-2);
  background:
    linear-gradient(105deg, rgba(7, 20, 38, 0.88), rgba(0, 85, 135, 0.75) 52%, rgba(15, 123, 79, 0.78)),
    var(--stadium-hero) center 58% / cover no-repeat;
  color: #fff;
  box-shadow: 0 24px 54px rgba(7, 20, 38, 0.2);
}

.prediction-panel > .section-heading .eyebrow,
.prediction-panel > .section-heading h2 {
  color: #fff;
}

.prediction-panel > .section-heading > span {
  border-color: rgba(255, 255, 255, 0.32);
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.prediction-panel > .section-heading .phase-cta span {
  border-color: rgba(255, 255, 255, 0.38);
  background: rgba(255, 255, 255, 0.92);
  color: var(--grass-deep);
  box-shadow: 0 10px 22px rgba(7, 20, 38, 0.16);
}

.prediction-panel > .tournament-builder,
.prediction-panel > .extra-picks,
.prediction-panel > .phase-hint,
.prediction-panel > .published-picks {
  margin-left: 12px;
  margin-right: 12px;
}

.prediction-panel > .tournament-builder {
  width: auto;
  transform: none;
}

.prediction-panel > .tournament-builder {
  margin-top: 28px;
}

.participant-meta {
  order: 4;
}

.admin-grid {
  order: 5;
}

.app-view > .two-column:not(.participant-meta) {
  order: 6;
}

.two-column {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
  gap: 18px;
  align-items: start;
}

.live-panel {
  order: 2;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(240, 247, 244, 0.95)),
    var(--stadium-hero) center / cover no-repeat;
}

.live-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(340px, 1.05fr);
  gap: 16px;
  align-items: start;
}

.live-card {
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: 18px;
  border: 1px solid rgba(0, 85, 135, 0.12);
  border-radius: var(--radius-2);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: var(--shadow-soft);
}

.live-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.live-card-head h3 {
  margin: 0;
  font-size: 1.18rem;
}

.live-card-head > span {
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(0, 85, 135, 0.08);
  color: var(--grass);
  font-size: 0.78rem;
  font-weight: 900;
  white-space: nowrap;
}

.forum-form {
  display: grid;
  gap: 10px;
}

.forum-form textarea {
  min-height: 94px;
  resize: vertical;
}

.forum-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.forum-actions span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 900;
}

.forum-list {
  display: grid;
  gap: 10px;
  max-height: 520px;
  overflow: auto;
  padding-right: 4px;
}

.forum-message {
  display: grid;
  gap: 8px;
  padding: 13px;
  border: 1px solid rgba(24, 32, 51, 0.1);
  border-radius: var(--radius-1);
  background: #fff;
}

.forum-message.is-mine {
  border-color: rgba(15, 123, 79, 0.24);
  background: rgba(235, 247, 240, 0.92);
}

.forum-message header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.forum-message strong {
  color: var(--ink);
}

.forum-message time {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  white-space: nowrap;
}

.forum-message p {
  margin: 0;
  color: var(--ink-soft);
  font-weight: 800;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.forum-delete-button {
  justify-self: end;
  min-height: 34px;
  padding: 0 10px;
}

.live-highlights {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.live-highlights article,
.live-match-card {
  display: grid;
  gap: 6px;
  padding: 13px;
  border: 1px solid rgba(0, 85, 135, 0.1);
  border-radius: var(--radius-1);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(245, 249, 252, 0.94));
}

.live-highlights span,
.live-match-card span,
.live-match-card small {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.live-highlights strong,
.live-match-card strong {
  color: var(--ink);
  line-height: 1.15;
}

.live-highlights p {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 800;
  line-height: 1.35;
}

.live-match-feed {
  display: grid;
  gap: 14px;
}

.live-match-feed h4 {
  margin: 0 0 8px;
  font-size: 1rem;
}

.live-match-list {
  display: grid;
  gap: 8px;
}

.live-match-card.result-ready {
  border-color: rgba(15, 123, 79, 0.22);
  background: linear-gradient(180deg, rgba(235, 247, 240, 0.96), rgba(255, 255, 255, 0.96));
}

.live-match-card.result-ready small {
  color: var(--red);
  font-size: 1.05rem;
}

.admin-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(340px, 0.85fr);
  gap: 18px;
  align-items: start;
}

.admin-grid .panel {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(240, 245, 251, 0.95));
}

.admin-login-panel {
  grid-column: 1 / -1;
  background: linear-gradient(180deg, rgba(245, 249, 253, 0.98), rgba(255, 255, 255, 0.98));
}

.admin-login-copy {
  margin-bottom: 12px;
}

.admin-login-panel form {
  grid-template-columns: minmax(220px, 1fr) auto;
  align-items: end;
}

.admin-login-panel .primary-button {
  min-width: 150px;
}

.admin-shortcuts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.admin-shortcuts button {
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid rgba(0, 85, 135, 0.14);
  border-radius: var(--radius-1);
  background: rgba(255, 255, 255, 0.9);
  color: var(--grass);
  font-weight: 900;
}

.admin-shortcuts button:hover,
.admin-shortcuts button:focus-visible {
  border-color: var(--grass);
  outline: none;
  background: rgba(0, 85, 135, 0.08);
}

.admin-content {
  display: contents;
}

.admin-panel {
  min-width: 0;
  scroll-margin-top: 118px;
}

.admin-panel-wide {
  grid-column: 1 / -1;
}

.admin-session-status {
  align-self: center;
}

.admin-overview {
  display: grid;
  gap: 14px;
}

.admin-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.admin-kpi-grid article {
  display: grid;
  gap: 6px;
  min-height: 86px;
  align-content: center;
  padding: 14px;
  border: 1px solid rgba(0, 85, 135, 0.12);
  border-radius: var(--radius-1);
  background: linear-gradient(180deg, rgba(230, 242, 248, 0.8), rgba(255, 255, 255, 0.92));
}

.admin-kpi-grid span,
.admin-watch-head span,
.admin-watch-list span,
.admin-watch-list small {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 900;
}

.admin-kpi-grid strong {
  color: var(--grass);
  font-size: 1.55rem;
  line-height: 1;
}

.admin-watch-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.admin-watch-grid section {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-1);
  background: rgba(255, 255, 255, 0.78);
}

.admin-watch-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.admin-watch-head strong {
  color: var(--ink);
}

.admin-watch-head span {
  display: grid;
  min-width: 34px;
  height: 28px;
  place-items: center;
  border-radius: 999px;
  background: rgba(0, 85, 135, 0.09);
  color: var(--grass);
}

.admin-watch-list {
  display: grid;
  gap: 6px;
  max-height: 260px;
  margin: 0;
  padding: 0;
  overflow: auto;
  list-style: none;
}

.admin-watch-list li {
  display: grid;
  grid-template-columns: minmax(120px, 0.7fr) minmax(160px, 1fr) minmax(150px, 0.9fr);
  gap: 8px;
  align-items: center;
  min-height: 36px;
  padding: 8px 10px;
  border: 1px solid rgba(24, 32, 51, 0.08);
  border-radius: var(--radius-1);
  background: rgba(248, 250, 252, 0.9);
}

.admin-watch-list li.empty {
  grid-template-columns: 1fr;
  color: var(--muted);
  font-weight: 900;
}

.admin-watch-list strong,
.admin-watch-list span,
.admin-watch-list small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.panel {
  padding: 22px;
}

.section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.section-heading h2 {
  font-size: 1.5rem;
}

.pill,
.section-heading > span {
  padding: 8px 12px;
  border: 1px solid rgba(0, 85, 135, 0.14);
  border-radius: var(--radius-1);
  background: rgba(0, 85, 135, 0.08);
  color: var(--grass);
  font-size: 0.84rem;
  font-weight: 900;
  white-space: nowrap;
}

.phase-cta span {
  padding: 8px 12px;
  border: 1px solid rgba(0, 85, 135, 0.14);
  border-radius: var(--radius-1);
  background: rgba(0, 85, 135, 0.08);
  color: var(--grass);
  font-size: 0.84rem;
  font-weight: 900;
  white-space: nowrap;
}

form,
.prize-list {
  display: grid;
  gap: 12px;
}

label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 800;
}

.checkbox-field {
  display: flex;
  align-items: center;
  gap: 9px;
}

.checkbox-field input {
  width: 18px;
  min-height: 18px;
}

.field-note {
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 800;
}

.compact-field {
  margin-bottom: 12px;
}

input,
select,
textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-1);
  background: rgba(255, 255, 255, 0.98);
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition:
    border-color 120ms ease,
    box-shadow 120ms ease,
    background 120ms ease;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--grass);
  outline: 3px solid rgba(0, 75, 141, 0.12);
  box-shadow: 0 0 0 4px rgba(0, 85, 135, 0.08);
}

textarea {
  resize: vertical;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

.reminder-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 12px;
}

.reminder-list span {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: 100%;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-size: 0.84rem;
  font-weight: 900;
}

.reminder-list small {
  color: var(--muted);
  font-size: inherit;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.sync-actions button {
  flex: 1 1 150px;
}

.primary-button,
.secondary-button,
.danger-button {
  min-height: 44px;
  padding: 0 14px;
  border-radius: var(--radius-1);
  font-weight: 900;
  transition:
    transform 140ms ease,
    border-color 140ms ease,
    background 140ms ease,
    box-shadow 140ms ease;
}

.primary-button {
  border: 0;
  background: linear-gradient(135deg, var(--gold), #ff6a00 32%, var(--red));
  color: #fff;
  box-shadow: 0 16px 28px rgba(212, 0, 59, 0.22);
}

.primary-button:hover,
.primary-button:focus-visible {
  background: linear-gradient(135deg, #ef7100, #c8003d);
  outline: none;
  transform: translateY(-1px);
  box-shadow: 0 20px 34px rgba(212, 0, 59, 0.26);
}

#saveTournamentButton,
#saveTournamentResultsButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

#saveTournamentButton::before,
#saveTournamentResultsButton::before {
  content: "";
  width: 17px;
  height: 17px;
  background: currentColor;
  mask: var(--icon-trophy) center / contain no-repeat;
  -webkit-mask: var(--icon-trophy) center / contain no-repeat;
}

.secondary-button {
  border: 1px solid rgba(24, 32, 51, 0.12);
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
}

.secondary-button:hover,
.secondary-button:focus-visible {
  border-color: var(--grass);
  outline: none;
  transform: translateY(-1px);
  box-shadow: 0 14px 24px rgba(24, 32, 51, 0.08);
}

.danger-button {
  border: 1px solid rgba(212, 0, 59, 0.32);
  background: rgba(255, 255, 255, 0.92);
  color: var(--red);
}

.danger-button:hover,
.danger-button:focus-visible {
  border-color: var(--red);
  outline: none;
  transform: translateY(-1px);
}

.phase-cta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}

.phase-cta .primary-button {
  min-width: 150px;
}

.phase-hint {
  margin: 0 0 20px;
  padding: 14px 16px;
  border: 1px dashed rgba(0, 85, 135, 0.2);
  border-radius: var(--radius-1);
  background: rgba(0, 85, 135, 0.04);
  color: var(--muted);
  font-weight: 800;
  line-height: 1.45;
}

.extra-picks {
  display: grid;
  gap: 16px;
  margin: 0 0 24px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-2);
  background: rgba(255, 255, 255, 0.94);
}

.extra-picks h3 {
  margin: 0;
  font-size: 1.12rem;
}

.extra-picks p {
  margin: 6px 0 0;
  color: var(--muted);
  font-weight: 800;
  line-height: 1.45;
}

.extra-picks-form,
.bracket-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.bracket-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bracket-form .extra-picks-actions,
.bracket-form button {
  grid-column: 1 / -1;
}

.extra-picks-actions {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.extra-picks-actions span {
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 900;
}

.tournament-builder {
  display: grid;
  gap: 18px;
  margin-bottom: 22px;
  min-width: 0;
}

.porra-progress {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.porra-progress span {
  display: grid;
  min-height: 58px;
  align-content: center;
  gap: 3px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-1);
  background: #fff;
  color: var(--muted);
  text-align: center;
}

.porra-progress strong {
  color: var(--ink);
  font-size: 0.95rem;
}

.porra-progress small {
  color: inherit;
  font-size: 0.78rem;
  font-weight: 900;
}

.porra-progress span.done {
  border-color: rgba(11, 122, 75, 0.34);
  background: #e8f7ed;
  color: var(--success);
}

.tournament-section {
  display: grid;
  gap: 16px;
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-2);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 10px 24px rgba(24, 32, 51, 0.05);
}

.tournament-section .compact-heading p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.35;
}

.compact-heading {
  align-items: center;
  margin-bottom: 0;
}

.compact-heading h3 {
  margin: 0;
  font-size: 1.12rem;
}

.group-rank-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 12px;
}

.group-rank-card {
  display: grid;
  gap: 0;
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(24, 32, 51, 0.12);
  border-radius: var(--radius-2);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(248, 250, 252, 0.94));
}

.group-rank-card header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 12px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(0, 85, 135, 0.08), rgba(249, 251, 253, 0.98));
}

.group-card-title {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0;
  min-width: 0;
}

.group-card-title > span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: var(--radius-1);
  background: linear-gradient(135deg, var(--grass), var(--grass-deep));
  color: #fff;
  font-weight: 900;
}

.group-rank-card ol {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.group-rank-card li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 60px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.92);
}

.group-rank-card li.empty {
  border-bottom-color: rgba(24, 32, 51, 0.08);
  background: rgba(248, 252, 254, 0.78);
}

.group-rank-card li.next-empty {
  box-shadow: inset 4px 0 0 rgba(15, 123, 79, 0.38);
  background: linear-gradient(90deg, rgba(15, 123, 79, 0.09), rgba(248, 252, 254, 0.88));
}

.group-rank-card li.locked-empty {
  opacity: 0.72;
  background: rgba(248, 250, 252, 0.58);
}

.group-rank-card li:last-child {
  border-bottom: 0;
}

.group-rank-card li[draggable="true"] {
  cursor: grab;
}

.group-rank-card li.dragging {
  opacity: 0.55;
  outline: 2px solid var(--gold);
}

.rank-slot-team {
  min-width: 0;
}

.empty-slot-copy {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 900;
}

.position {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: var(--radius-1);
  background: rgba(0, 85, 135, 0.1);
  color: var(--grass);
  font-weight: 900;
}

.team-identity {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.team-identity.compact {
  grid-template-columns: 30px minmax(0, 1fr);
}

.flag-shell {
  position: relative;
  display: grid;
  place-items: center;
  width: 34px;
  height: 24px;
  overflow: hidden;
}

.flag-shell.compact {
  width: 30px;
  height: 22px;
}

.flag {
  width: 34px;
  height: 24px;
  border: 1px solid rgba(24, 32, 51, 0.14);
  border-radius: 5px;
  background: #fff;
  object-fit: cover;
  box-shadow: 0 1px 2px rgba(24, 32, 51, 0.08);
}

.flag-shell .flag {
  width: 100%;
  height: 100%;
}

.flag-shell img.flag {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #fff;
}

.team-identity.compact .flag {
  width: 30px;
  height: 22px;
}

.flag-fallback {
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
}

.team-copy {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.team-copy strong {
  color: var(--ink);
  font-size: 0.96rem;
  line-height: 1.15;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.team-copy small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
}

.rank-actions {
  display: flex;
  gap: 4px;
}

.team-bank {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 5px;
  min-width: 0;
  overflow: visible;
  padding: 0;
}

.team-bank small {
  color: var(--success);
  font-weight: 900;
  white-space: nowrap;
}

.bank-team {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  min-height: 30px;
  padding: 4px 6px;
  border: 1px solid rgba(0, 85, 135, 0.12);
  border-radius: var(--radius-1);
  background: #fff;
  color: var(--ink);
  cursor: grab;
}

.team-bank-chip-copy {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.team-bank-chip-copy strong {
  color: var(--grass);
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0;
}

.team-bank-chip-copy .flag-shell,
.team-bank-chip-copy .flag {
  width: 25px;
  height: 18px;
}

.bank-team:not(:disabled):hover,
.bank-team:not(:disabled):focus-visible {
  border-color: var(--pitch);
  outline: none;
  box-shadow: 0 8px 16px rgba(15, 123, 79, 0.1);
}

.mini-button {
  display: grid;
  width: 34px;
  min-height: 34px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-1);
  background: #fff;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
}

.mini-button:hover,
.mini-button:focus-visible {
  border-color: var(--grass);
  color: var(--grass);
  outline: none;
}

.third-place-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px;
}

.third-chip {
  display: grid;
  gap: 8px;
  min-height: 76px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-1);
  background: #fff;
  color: var(--ink);
  text-align: left;
}

.third-chip span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.third-chip strong {
  overflow-wrap: anywhere;
}

.third-chip.selected {
  border-color: var(--success);
  background: #e8f7ed;
  color: var(--success);
}

.bracket-stage {
  position: relative;
  overflow: visible;
  scroll-margin-top: 118px;
  border-color: rgba(15, 123, 79, 0.24);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.22) 1px, transparent 1px),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(238, 248, 243, 0.95));
  background-size: 64px 100%, auto;
}

.bracket-stage::before {
  content: "";
  position: absolute;
  inset: 72px 18px 18px;
  border: 1px solid rgba(15, 123, 79, 0.15);
  border-radius: var(--radius-2);
  pointer-events: none;
}

.bracket-stage > * {
  position: relative;
  z-index: 1;
}

.bracket-stage.locked-stage {
  background: #f0f3f7;
}

.bracket-nav {
  position: sticky;
  top: 92px;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px;
  border: 1px solid rgba(24, 32, 51, 0.1);
  border-radius: var(--radius-1);
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 22px rgba(24, 32, 51, 0.06);
}

.bracket-jump {
  min-height: 36px;
  padding: 8px 11px;
  border: 1px solid rgba(15, 123, 79, 0.2);
  border-radius: var(--radius-1);
  background: #fff;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 900;
}

.bracket-jump:hover,
.bracket-jump:focus-visible {
  border-color: var(--pitch);
  outline: none;
  color: var(--pitch);
}

.bracket-jump.active {
  border-color: transparent;
  background: linear-gradient(135deg, var(--pitch), var(--grass-deep));
  color: #fff;
  box-shadow: 0 12px 22px rgba(15, 123, 79, 0.22);
}

.bracket-road {
  display: grid;
  gap: 16px;
}

.round-kicker {
  display: block;
  color: rgba(15, 123, 79, 0.78);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bracket-round-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
}

.final-round .bracket-round-grid {
  grid-template-columns: minmax(0, 440px);
}

.bracket-match {
  position: relative;
  display: grid;
  gap: 9px;
  min-width: 0;
  padding: 11px;
  border: 1px solid rgba(24, 32, 51, 0.12);
  border-radius: var(--radius-1);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 10px 22px rgba(24, 32, 51, 0.07);
}

.bracket-match.final-match {
  border-color: rgba(255, 140, 0, 0.36);
  box-shadow: 0 14px 28px rgba(255, 140, 0, 0.13);
}

.bracket-match-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.bracket-match-head span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
}

.bracket-match-head small {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 900;
  text-transform: uppercase;
}

.bracket-match.winner-set {
  border-color: rgba(212, 0, 59, 0.3);
  box-shadow: 0 12px 26px rgba(212, 0, 59, 0.11);
}

.bracket-match.winner-set .bracket-match-head small {
  color: var(--red);
}

.bracket-options {
  display: grid;
  gap: 7px;
}

.bracket-team {
  width: 100%;
  min-height: 52px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-1);
  background: #fff;
  color: var(--ink);
  font-weight: 900;
  text-align: left;
  overflow-wrap: anywhere;
  transition:
    border-color 120ms ease,
    background 120ms ease,
    box-shadow 120ms ease,
    transform 120ms ease;
}

.bracket-team:not(:disabled):hover,
.bracket-team:not(:disabled):focus-visible {
  border-color: var(--pitch);
  outline: none;
  transform: translateY(-1px);
  box-shadow: inset 4px 0 0 var(--pitch), 0 10px 18px rgba(15, 123, 79, 0.1);
}

.bracket-team.selected {
  border-color: rgba(15, 123, 79, 0.58);
  background: #e8f7ed;
  color: var(--grass-deep);
  box-shadow: inset 4px 0 0 var(--pitch);
}

.bracket-team.selected .team-copy strong,
.bracket-team.selected .team-copy small {
  color: var(--grass-deep);
}

.bracket-team .team-copy strong {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.bracket-team.placeholder {
  background: #f8fafc;
  color: var(--muted);
}

.placeholder-team .flag {
  color: var(--muted);
  border-style: dashed;
  background: #eef3f8;
}

.champion-strip {
  display: grid;
  gap: 6px;
  padding: 9px;
  border: 1px solid rgba(255, 140, 0, 0.38);
  border-radius: var(--radius-1);
  background: rgba(255, 140, 0, 0.1);
}

.champion-strip > span {
  color: var(--warning);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.match-list,
.results-list,
.payments-list,
.point-adjustments-list,
.audit-list,
.published-picks-list,
.phase-tabs,
.ranking-list {
  display: grid;
  gap: 10px;
}

.results-list {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}

.payments-list {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
}

.point-adjustments-list {
  grid-template-columns: 1fr;
}

.phase-tabs {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}

.phase-tab {
  display: grid;
  gap: 6px;
  min-height: 96px;
  padding: 14px;
  border: 1px solid rgba(24, 32, 51, 0.12);
  border-radius: var(--radius-2);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(246, 249, 253, 0.94));
  color: var(--ink);
  text-align: left;
  transition:
    transform 140ms ease,
    border-color 140ms ease,
    background 140ms ease,
    box-shadow 140ms ease;
}

.phase-tab:hover,
.phase-tab:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(0, 85, 135, 0.18);
  box-shadow: 0 14px 28px rgba(24, 32, 51, 0.08);
  outline: none;
}

.phase-tab strong {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.phase-tab span {
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 800;
}

.phase-tab small {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.25;
}

.audit-entry {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-1);
  background: rgba(255, 255, 255, 0.9);
}

.audit-entry strong {
  display: block;
  margin-bottom: 4px;
}

.audit-entry p,
.audit-entry time {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
}

.audit-entry time {
  flex: 0 0 auto;
  font-weight: 800;
}

.phase-tab.active {
  border-color: transparent;
  background: linear-gradient(145deg, var(--grass), var(--grass-deep));
  color: #fff;
  box-shadow: 0 20px 36px rgba(0, 85, 135, 0.24);
}

.phase-tab.active span,
.phase-tab.active small {
  color: #e8f7ed;
}

.phase-tab.locked:not(.active) {
  background: linear-gradient(180deg, rgba(240, 244, 248, 0.98), rgba(233, 239, 246, 0.92));
}

.phase-tab.state-waiting:not(.active) {
  border-color: rgba(184, 97, 0, 0.28);
  background: linear-gradient(180deg, rgba(255, 249, 240, 0.98), rgba(255, 255, 255, 0.94));
}

.phase-tab.state-open:not(.active) {
  border-color: rgba(11, 122, 75, 0.32);
  box-shadow:
    inset 4px 0 0 var(--success),
    0 12px 24px rgba(11, 122, 75, 0.06);
}

.phase-lock {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  width: 17px;
  height: 13px;
  border: 2px solid currentColor;
  border-radius: 4px;
}

.phase-lock::before {
  position: absolute;
  left: 3px;
  top: -9px;
  width: 7px;
  height: 8px;
  border: 2px solid currentColor;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  content: "";
}

.match-card,
.result-card,
.payment-card,
.point-adjustment-card,
.published-pick-card,
.ranking-list li,
.prize-list div {
  border: 1px solid var(--line);
  border-radius: var(--radius-2);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(248, 250, 252, 0.94));
  box-shadow: 0 10px 24px rgba(24, 32, 51, 0.05);
}

.match-card {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(260px, 390px);
  gap: 16px;
  padding: 16px;
}

.match-card.locked {
  background: linear-gradient(180deg, rgba(241, 244, 248, 0.96), rgba(233, 239, 246, 0.92));
}

.match-card.dirty {
  border-color: rgba(255, 130, 0, 0.8);
  box-shadow: inset 4px 0 0 var(--gold);
}

.match-card.needs-score {
  border-color: rgba(228, 0, 70, 0.65);
  box-shadow: inset 4px 0 0 var(--red);
}

button:disabled,
input:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

.match-main {
  display: grid;
  gap: 12px;
}

.match-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.match-status {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(0, 85, 135, 0.14);
  border-radius: 999px;
  background: rgba(0, 85, 135, 0.08);
  color: var(--grass);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.match-status.locked {
  border-color: rgba(184, 97, 0, 0.24);
  background: rgba(255, 140, 0, 0.08);
  color: var(--warning);
}

.match-status.scored {
  border-color: rgba(11, 122, 75, 0.2);
  background: rgba(11, 122, 75, 0.08);
  color: var(--success);
}

.teams {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.team-slot {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid rgba(24, 32, 51, 0.08);
  border-radius: var(--radius-1);
  background: rgba(255, 255, 255, 0.86);
}

.teams > span:not(:nth-child(2)) {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid rgba(24, 32, 51, 0.08);
  border-radius: var(--radius-1);
  background: rgba(255, 255, 255, 0.86);
}

.versus-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  min-height: 42px;
  padding: 0 10px;
  border: 1px solid rgba(24, 32, 51, 0.08);
  border-radius: 999px;
  background: rgba(24, 32, 51, 0.04);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.teams > span:nth-child(2) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  min-height: 42px;
  padding: 0 10px;
  border: 1px solid rgba(24, 32, 51, 0.08);
  border-radius: 999px;
  background: rgba(24, 32, 51, 0.04);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.team-code {
  color: var(--red);
}

.scoreline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--muted);
  font-weight: 800;
  line-height: 1.45;
}

.scoreline strong,
.scoreline span {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(24, 32, 51, 0.05);
}

.scoreline strong {
  color: var(--ink);
}

.prediction-form,
.result-form,
.point-adjustment-form,
.admin-inline-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
}

.outcome-form {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.outcome-option {
  position: relative;
  display: grid;
  gap: 0;
  color: var(--ink);
}

.outcome-option input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
  opacity: 0;
}

.outcome-option span {
  display: grid;
  min-height: 44px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-1);
  background: #fff;
  font-weight: 900;
  text-align: center;
}

.outcome-option input:checked + span {
  border-color: var(--grass);
  background: var(--grass);
  color: #fff;
}

.outcome-option input:focus-visible + span {
  outline: 3px solid rgba(0, 75, 141, 0.16);
}

.outcome-option input:disabled + span {
  cursor: not-allowed;
  opacity: 0.62;
}

.prediction-form .primary-button,
.result-form .primary-button,
.result-form .secondary-button,
.point-adjustment-form .secondary-button,
.admin-inline-form .primary-button {
  width: 100%;
}

.admin-inline-form {
  grid-template-columns: minmax(150px, 0.85fr) minmax(220px, 1.1fr) minmax(150px, auto) minmax(120px, auto);
  margin: 14px 0;
}

.admin-inline-form .checkbox-field {
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-1);
  background: rgba(255, 255, 255, 0.98);
  color: var(--ink);
}

.admin-inline-form .checkbox-field input {
  flex: 0 0 auto;
}

.admin-inline-form .primary-button {
  min-width: 120px;
  white-space: nowrap;
}

.admin-tournament-builder + .primary-button {
  justify-self: start;
  min-width: 180px;
}

.published-picks {
  display: grid;
  gap: 14px;
  margin-top: 4px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-2);
  background: rgba(255, 255, 255, 0.94);
}

.published-pick-card,
.point-adjustment-card {
  display: grid;
  gap: 12px;
  padding: 16px;
}

.point-adjustment-card {
  grid-template-columns: minmax(180px, 0.7fr) minmax(0, 1.3fr);
  align-items: end;
}

.point-adjustment-form {
  grid-template-columns: minmax(92px, 120px) minmax(180px, 1fr) minmax(112px, auto);
}

.point-adjustment-form .secondary-button {
  width: auto;
  min-width: 112px;
}

.published-pick-card p {
  margin: 0;
  color: var(--ink-soft);
  font-weight: 800;
}

.published-pick-card > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.published-pick-card span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--ivory);
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 900;
}

.published-pick-card span strong {
  color: var(--ink);
}

.saved-note {
  grid-column: 1 / -1;
}

.match-card.dirty .saved-note,
.match-card.needs-score .saved-note {
  color: var(--red);
}

.ranking-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ranking-summary {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
}

.ranking-self {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 16px;
  border: 1px solid rgba(0, 75, 141, 0.22);
  border-radius: var(--radius-2);
  background: linear-gradient(180deg, rgba(230, 242, 248, 0.92), rgba(255, 255, 255, 0.95));
}

.ranking-self div {
  display: grid;
  gap: 4px;
}

.ranking-self span,
.ranking-self p,
.ranking-breakdown {
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 800;
}

.ranking-self strong {
  color: var(--grass);
  font-size: 1.25rem;
}

.ranking-self p {
  grid-column: 1 / -1;
  margin: 0;
}

.ranking-breakdown {
  display: grid;
  gap: 8px;
}

.ranking-list li {
  display: grid;
  grid-template-columns: minmax(230px, 1fr) minmax(360px, 1.35fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 70px;
  padding: 14px 16px;
}

.ranking-list li.is-current-user {
  border-color: rgba(0, 85, 135, 0.28);
  background: linear-gradient(180deg, rgba(230, 242, 248, 0.9), rgba(255, 255, 255, 0.96));
  box-shadow: 0 18px 30px rgba(0, 85, 135, 0.12);
}

.ranking-list li.podium-1 {
  border-color: rgba(255, 140, 0, 0.26);
  background: linear-gradient(180deg, rgba(255, 249, 240, 0.96), rgba(255, 255, 255, 0.96));
}

.ranking-list li.podium-2 {
  border-color: rgba(95, 111, 135, 0.24);
  background: linear-gradient(180deg, rgba(245, 248, 252, 0.96), rgba(255, 255, 255, 0.96));
}

.ranking-list li.podium-3 {
  border-color: rgba(184, 97, 0, 0.24);
  background: linear-gradient(180deg, rgba(255, 244, 237, 0.96), rgba(255, 255, 255, 0.96));
}

.ranking-list li:nth-child(1) {
  border-color: rgba(255, 140, 0, 0.26);
  background: linear-gradient(180deg, rgba(255, 249, 240, 0.96), rgba(255, 255, 255, 0.96));
}

.ranking-list li:nth-child(2) {
  border-color: rgba(95, 111, 135, 0.24);
  background: linear-gradient(180deg, rgba(245, 248, 252, 0.96), rgba(255, 255, 255, 0.96));
}

.ranking-list li:nth-child(3) {
  border-color: rgba(184, 97, 0, 0.24);
  background: linear-gradient(180deg, rgba(255, 244, 237, 0.96), rgba(255, 255, 255, 0.96));
}


.rank-number {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: var(--radius-1);
  background: rgba(0, 85, 135, 0.1);
  color: var(--grass);
  font-weight: 900;
}

.ranking-list li.podium-1 .rank-number {
  background: rgba(255, 140, 0, 0.18);
  color: var(--warning);
}

.ranking-list li.podium-2 .rank-number {
  background: rgba(95, 111, 135, 0.12);
  color: var(--ink-soft);
}

.ranking-list li.podium-3 .rank-number {
  background: rgba(184, 97, 0, 0.14);
  color: var(--warning);
}

.ranking-list li:nth-child(1) .rank-number {
  background: rgba(255, 140, 0, 0.18);
  color: var(--warning);
}

.ranking-list li:nth-child(2) .rank-number {
  background: rgba(95, 111, 135, 0.12);
  color: var(--ink-soft);
}

.ranking-list li:nth-child(3) .rank-number {
  background: rgba(184, 97, 0, 0.14);
  color: var(--warning);
}

.ranking-copy {
  display: grid;
  gap: 2px;
}

.points {
  color: var(--red);
  font-size: 1.2rem;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(212, 0, 59, 0.08);
}

.result-card {
  display: grid;
  gap: 12px;
  padding: 16px;
}

.payment-card {
  display: grid;
  grid-template-columns: minmax(140px, 1.05fr) minmax(220px, 1.55fr) 88px 76px 142px;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 5px 8px;
  border-radius: var(--radius-1);
}

.payment-card.is-paid {
  border-color: rgba(11, 122, 75, 0.24);
  background: linear-gradient(180deg, rgba(236, 248, 241, 0.92), rgba(255, 255, 255, 0.96));
}

.payment-card.is-pending {
  border-color: rgba(184, 97, 0, 0.24);
  background: linear-gradient(180deg, rgba(255, 249, 240, 0.94), rgba(255, 255, 255, 0.96));
}

.payment-card div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.payment-card .payment-status {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 900;
}

.payment-card.is-paid .payment-status {
  background: rgba(11, 122, 75, 0.1);
  color: var(--success);
}

.payment-card.is-pending .payment-status {
  background: rgba(255, 140, 0, 0.1);
  color: var(--warning);
}

.payment-actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
}

.payment-actions button {
  flex: 0 0 auto;
  min-width: 64px;
  min-height: 28px;
  padding: 5px 8px;
  border-radius: var(--radius-1);
  font-size: 0.76rem;
}

.point-adjustments-list {
  grid-template-columns: 1fr;
  gap: 3px;
  overflow-x: auto;
}

.point-adjustment-table {
  display: grid;
  gap: 2px;
  min-width: 820px;
}

.point-adjustment-head,
.point-adjustment-card,
.point-adjustment-form {
  display: grid;
  align-items: center;
}

.point-adjustment-head,
.point-adjustment-card {
  grid-template-columns: minmax(140px, 1fr) minmax(230px, 1.7fr) 48px minmax(0, 396px);
  gap: 6px;
}

.point-adjustment-head {
  min-height: 24px;
  padding: 0 8px;
  border: 1px solid rgba(24, 32, 51, 0.08);
  border-radius: var(--radius-1);
  background: rgba(7, 20, 38, 0.06);
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 900;
  text-transform: uppercase;
}

.point-adjustment-head span:nth-child(n + 4) {
  display: none;
}

.point-adjustment-form {
  grid-template-columns: 68px 42px minmax(150px, 1fr) 78px;
  gap: 6px;
}

.point-adjustment-card {
  min-height: 30px;
  padding: 2px 7px;
  border-radius: var(--radius-1);
}

.point-adjustment-card strong,
.point-adjustment-email {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.point-adjustment-card span,
.point-adjustment-card input {
  font-size: 0.8rem;
}

.point-adjustment-card input {
  min-height: 24px;
  padding: 3px 7px;
}

.point-adjustment-form .secondary-button {
  width: auto;
  min-width: 68px;
  min-height: 24px;
  padding: 3px 7px;
  font-size: 0.72rem;
}

.payment-card strong,
.payment-card span {
  overflow-wrap: anywhere;
}

.payment-card span,
.inline-note {
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 800;
}

.payment-card strong {
  font-size: 0.92rem;
}

.payment-card span {
  font-size: 0.8rem;
}

.payments-list {
  display: grid;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.payments-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: min(100%, 780px);
  padding: 8px 10px;
  border: 1px solid rgba(0, 85, 135, 0.14);
  border-radius: var(--radius-1);
  background: rgba(230, 242, 248, 0.74);
}

.payments-summary strong {
  color: var(--ink);
}

.payments-summary span {
  color: var(--grass);
  font-weight: 900;
}

.payments-table {
  display: grid;
  gap: 3px;
  min-width: 720px;
}

.payments-table-head {
  display: grid;
  grid-template-columns: minmax(140px, 1.05fr) minmax(220px, 1.55fr) 88px 76px 142px;
  gap: 8px;
  align-items: center;
  min-height: 28px;
  padding: 0 8px;
  border: 1px solid rgba(24, 32, 51, 0.08);
  border-radius: var(--radius-1);
  background: rgba(7, 20, 38, 0.06);
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 900;
  text-transform: uppercase;
}

.payment-email,
.payment-account {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inline-note {
  margin: 0 0 4px;
}

.result-title {
  display: grid;
  gap: 10px;
}

.result-title strong {
  font-size: 1.04rem;
  line-height: 1.32;
}

.result-status {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(212, 0, 59, 0.08);
  color: var(--red);
  font-size: 0.8rem;
  font-weight: 900;
}

.prize-list div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 56px;
  padding: 14px 16px;
}

body[data-screen="reglas"] .app-view > .two-column:not(.participant-meta) {
  grid-template-columns: 1fr;
}

body[data-screen="reglas"] .rules-shell {
  grid-column: 1 / -1;
}

body[data-screen="ranking"] .participant-meta {
  grid-template-columns: 1fr;
}

.rules-shell {
  display: grid;
  grid-column: 1 / -1;
  gap: 14px;
  padding: 0;
  border-radius: var(--radius-3);
  border: 1px solid rgba(255, 255, 255, 0.34);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(243, 248, 250, 0.78)),
    linear-gradient(90deg, rgba(15, 123, 79, 0.06) 1px, transparent 1px),
    linear-gradient(180deg, rgba(0, 85, 135, 0.05) 1px, transparent 1px);
  background-size: auto, 64px 64px, 64px 64px;
  overflow: hidden;
  box-shadow: 0 22px 54px rgba(7, 20, 38, 0.13);
  backdrop-filter: blur(16px);
}

.rules-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(240px, auto);
  align-items: end;
  gap: 18px;
  min-height: 172px;
  padding: 26px 28px;
  border-bottom: 0;
  background:
    linear-gradient(110deg, rgba(7, 20, 38, 0.9), rgba(0, 85, 135, 0.74) 54%, rgba(15, 123, 79, 0.72)),
    var(--stadium-hero) center 62% / cover no-repeat;
  color: #fff;
  overflow: hidden;
}

.rules-hero::after {
  display: none;
}

.rules-hero > * {
  position: relative;
  z-index: 1;
}

.rules-hero h2 {
  color: #fff;
  margin: 0;
  font-size: clamp(1.65rem, 1.35rem + 1vw, 2.1rem);
  line-height: 1.08;
}

.rules-hero p {
  margin: 8px 0 0;
  max-width: 680px;
  color: rgba(255, 255, 255, 0.82);
  font-weight: 800;
  line-height: 1.55;
}

.rules-hero .eyebrow {
  color: rgba(255, 255, 255, 0.72);
}

.rules-badges {
  display: grid;
  gap: 8px;
  justify-content: stretch;
  align-content: end;
}

.rules-badges span {
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: var(--radius-1);
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 0.84rem;
  font-weight: 900;
}

.rules-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 0 28px;
}

.rule-card,
.rules-detail section,
.phase-guide-item {
  border: 1px solid var(--line);
  border-radius: var(--radius-2);
  background: rgba(255, 255, 255, 0.94);
}

.rule-card {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  column-gap: 12px;
  row-gap: 4px;
  min-height: 0;
  padding: 14px 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(238, 248, 243, 0.86)),
    linear-gradient(90deg, rgba(15, 123, 79, 0.08) 1px, transparent 1px);
  background-size: auto, 36px 100%;
  box-shadow: 0 12px 26px rgba(7, 20, 38, 0.06);
}

.rule-card > span {
  grid-row: 1 / span 2;
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: var(--radius-1);
  background: linear-gradient(135deg, var(--pitch), var(--grass-deep));
  color: #fff;
  font-size: 0.92rem;
  font-weight: 900;
}

.rules-list-grid .rule-card:last-child {
  grid-column: 1 / -1;
}

.rule-card strong,
.rules-detail h3 {
  color: var(--ink);
}

.rule-card p,
.rules-detail p {
  margin: 0;
  color: var(--muted);
  font-weight: 800;
  line-height: 1.38;
}

.rule-card p {
  font-size: 0.95rem;
}

.rules-detail {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 14px;
  padding: 0 28px;
}

.rules-detail-compact {
  grid-template-columns: 1fr;
  padding-bottom: 28px;
}

.rules-detail section {
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 16px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 12px 26px rgba(7, 20, 38, 0.05);
}

.rules-detail h3 {
  margin: 0;
  font-size: 1.14rem;
}

.rules-score-grid,
.rules-steps {
  display: grid;
  gap: 10px;
}

.rules-score-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rule-stat,
.rule-step {
  display: grid;
  gap: 6px;
  min-height: 86px;
  padding: 13px;
  border: 1px solid rgba(24, 32, 51, 0.08);
  border-radius: var(--radius-1);
  background: rgba(255, 255, 255, 0.74);
}

.rule-stat {
  border-color: rgba(0, 85, 135, 0.12);
  box-shadow: inset 4px 0 0 rgba(0, 85, 135, 0.18);
}

.rule-step {
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: start;
}

.rule-step p {
  grid-column: 2;
}

.rule-stat strong,
.rule-step strong,
.rules-guide-section h3 {
  color: var(--ink);
}

.rule-step > span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: var(--radius-1);
  background: rgba(255, 140, 0, 0.12);
  color: var(--warning);
}

.rule-stat span,
.rule-step p {
  color: var(--muted);
  font-weight: 800;
  line-height: 1.45;
}

.rule-step p {
  margin: 0;
}

.rules-guide-section {
  display: grid;
  gap: 12px;
  padding: 0 28px 30px;
}

.rules-guide-section h3 {
  margin: 0;
  font-size: 1.08rem;
}

.phase-guide {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
}

.phase-guide-item {
  display: grid;
  gap: 10px;
  align-content: start;
  min-height: 150px;
  padding: 14px;
}

.phase-guide-item.state-open {
  border-color: rgba(11, 122, 75, 0.24);
  background: linear-gradient(180deg, rgba(236, 248, 241, 0.94), rgba(255, 255, 255, 0.96));
}

.phase-guide-item.state-waiting {
  border-color: rgba(184, 97, 0, 0.24);
  background: linear-gradient(180deg, rgba(255, 249, 240, 0.94), rgba(255, 255, 255, 0.96));
}

.phase-guide-item.state-closed {
  border-color: rgba(0, 85, 135, 0.18);
  background: linear-gradient(180deg, rgba(235, 243, 249, 0.94), rgba(255, 255, 255, 0.96));
}

.phase-guide-item div {
  display: grid;
  gap: 3px;
}

.phase-guide-item strong {
  color: var(--ink);
  font-size: 1rem;
}

.phase-guide-item span,
.phase-guide-item p,
.phase-guide-item small {
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 800;
}

.phase-guide-item p {
  margin: 0;
}

.rules-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 20px;
  color: var(--muted);
  line-height: 1.55;
}

.rules-list strong {
  color: var(--ink);
}

.toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 10;
  max-width: min(360px, calc(100% - 40px));
  padding: 13px 15px;
  border-radius: var(--radius-1);
  background: var(--ink);
  color: #fff;
  font-weight: 800;
  box-shadow: 0 20px 38px rgba(24, 32, 51, 0.28);
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 160ms ease,
    transform 160ms ease;
  pointer-events: none;
}

.toast.visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 860px) {
  html {
    scroll-padding-top: 210px;
  }

  #boleto,
  #ranking,
  #reglas,
  #admin {
    scroll-margin-top: 210px;
  }

  .topbar,
  .intro,
  .button-row,
  .match-card,
  .payment-card,
  .ranking-list li {
    align-items: stretch;
    flex-direction: column;
  }

  .topbar,
  .intro {
    display: flex;
  }

  .two-column,
  .admin-grid,
  .live-grid,
  .login-view,
  .match-card,
  .porra-overview,
  .rules-detail {
    grid-template-columns: 1fr;
  }

  .summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-kpi-grid,
  .admin-watch-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .phase-tabs,
  .extra-picks-form,
  .bracket-form,
  .porra-progress,
  .rules-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rules-score-grid,
  .live-highlights,
  .auth-glance {
    grid-template-columns: 1fr;
  }

  .app-tabs {
    align-items: stretch;
    top: 8px;
    border-radius: var(--radius-2);
  }

  .app-tab-links,
  .app-session {
    flex-basis: 100%;
  }

  .app-tab-links {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
  }

  .app-tab-links::-webkit-scrollbar {
    display: none;
  }

  .app-tabs a {
    flex: 0 0 auto;
  }

  .app-session {
    justify-content: flex-start;
  }

  .rules-hero,
  .teams {
    grid-template-columns: 1fr;
  }

  .bracket-stage::before {
    display: none;
  }

  .bracket-nav {
    position: static;
  }

  .versus-badge {
    justify-self: start;
  }

  .intro-ball {
    width: 76px;
    height: 76px;
  }
}

@media (max-width: 560px) {
  .topbar,
  .page {
    width: min(100% - 24px, 1120px);
  }

  .summary-grid,
  .admin-kpi-grid,
  .admin-watch-grid,
  .phase-tabs,
  .extra-picks-form,
  .bracket-form,
  .live-highlights,
  .porra-progress,
  .rules-score-grid,
  .rules-grid,
  .prediction-form,
  .result-form,
  .point-adjustment-form,
  .admin-inline-form,
  .admin-login-panel form,
  .point-adjustment-card {
    grid-template-columns: 1fr;
  }

  .payment-actions {
    justify-content: stretch;
  }

  .payment-actions button,
  .point-adjustment-form .secondary-button,
  .admin-tournament-builder + .primary-button {
    width: 100%;
  }

  .payments-table .payment-card,
  .payments-table-head {
    grid-template-columns: minmax(140px, 1.05fr) minmax(220px, 1.55fr) 88px 76px 142px;
  }

  .payments-table .payment-actions {
    justify-content: flex-end;
  }

  .payments-table .payment-actions button {
    width: auto;
  }

  .admin-watch-list li {
    grid-template-columns: 1fr;
  }

  .phase-guide-item {
    grid-template-columns: 1fr;
  }

  .group-rank-card li {
    grid-template-columns: 32px minmax(0, 1fr) auto;
    gap: 8px;
  }

  .mini-button {
    width: 34px;
  }

  .prediction-panel {
    padding: 0;
  }

  .prediction-panel > .section-heading,
  .porra-overview,
  .prediction-panel > .tournament-builder,
  .prediction-panel > .extra-picks,
  .prediction-panel > .phase-hint,
  .prediction-panel > .published-picks {
    margin-left: 16px;
    margin-right: 16px;
  }

  .prediction-panel > .section-heading {
    margin-left: 0;
    margin-right: 0;
    padding: 18px;
  }

  .panel,
  .intro {
    padding: 18px;
  }

  .login-intro .auth-glance.login-score-list article {
    grid-template-columns: 1fr;
  }

  .login-score-list li {
    min-width: 100%;
  }

  .rules-hero,
  .rules-grid,
  .rules-detail,
  .rules-guide-section {
    padding-left: 18px;
    padding-right: 18px;
  }

  .intro h2 {
    font-size: 1.8rem;
  }

  .login-intro::after {
    display: none;
  }

  .rules-hero h2 {
    font-size: 1.6rem;
  }

  .summary-grid article,
  .ranking-list li,
  .payment-card,
  .result-card,
  .published-pick-card,
  .point-adjustment-card {
    border-radius: var(--radius-2);
  }

  .points {
    justify-content: center;
  }

  .brand::after {
    display: none;
  }

  .bracket-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .bracket-nav::-webkit-scrollbar {
    display: none;
  }

  .bracket-jump {
    flex: 0 0 auto;
  }

}

/* Dynamic bracket and scoreboard ranking */
.bracket-road {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(15, 123, 79, 0.2);
  border-radius: var(--radius-2);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(240, 249, 245, 0.86)),
    linear-gradient(90deg, rgba(15, 123, 79, 0.08) 1px, transparent 1px),
    linear-gradient(180deg, rgba(15, 123, 79, 0.06) 1px, transparent 1px);
  background-size: auto, 64px 100%, 100% 64px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84), 0 18px 40px rgba(7, 82, 59, 0.1);
}

.bracket-board-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border-radius: var(--radius-1);
  background:
    linear-gradient(105deg, rgba(7, 20, 38, 0.88), rgba(0, 85, 135, 0.68) 54%, rgba(15, 123, 79, 0.76)),
    var(--stadium-hero) center 70% / cover no-repeat;
  color: #fff;
}

.bracket-board-head h4 {
  margin: 2px 0 4px;
  color: #fff;
  font-size: clamp(1.35rem, 1.1rem + 0.75vw, 1.9rem);
  line-height: 1.08;
}

.bracket-board-head p {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-weight: 800;
}

.bracket-board-head .round-kicker {
  color: rgba(255, 255, 255, 0.72);
}

.bracket-board-progress {
  display: grid;
  gap: 8px;
  min-width: 112px;
  padding: 11px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: var(--radius-1);
  background: rgba(255, 255, 255, 0.15);
}

.bracket-board-progress strong {
  color: #fff;
  font-size: 1.05rem;
  text-align: right;
}

.bracket-board-progress progress {
  display: block;
  width: 100%;
  height: 7px;
  overflow: hidden;
  appearance: none;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
}

.bracket-board-progress progress::-webkit-progress-bar {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
}

.bracket-board-progress progress::-webkit-progress-value {
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold), #fff);
}

.bracket-board-progress progress::-moz-progress-bar {
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold), #fff);
}

.bracket-round-rail {
  position: relative;
  top: auto;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(24, 32, 51, 0.1);
  border-radius: var(--radius-1);
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(12px);
  box-shadow: none;
}

.bracket-map {
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid rgba(0, 85, 135, 0.12);
  border-radius: var(--radius-1);
  background:
    linear-gradient(90deg, rgba(15, 123, 79, 0.05) 1px, transparent 1px),
    linear-gradient(180deg, rgba(0, 85, 135, 0.04) 1px, transparent 1px),
    rgba(255, 255, 255, 0.84);
  background-size: 44px 100%, 100% 44px, auto;
}

.bracket-map-scroll {
  display: grid;
  grid-template-columns:
    minmax(136px, 1.06fr)
    minmax(132px, 1fr)
    minmax(126px, 0.94fr)
    minmax(122px, 0.88fr)
    minmax(150px, 1fr)
    minmax(122px, 0.88fr)
    minmax(126px, 0.94fr)
    minmax(132px, 1fr)
    minmax(136px, 1.06fr);
  gap: 6px;
  min-width: 1180px;
  padding: 8px;
  align-items: stretch;
}

.bracket-road-map-only {
  gap: 12px;
}

.bracket-map-column {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 8px;
  min-width: 0;
}

.bracket-map-column h5 {
  margin: 0;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
}

.bracket-map-stack {
  position: relative;
  display: grid;
  gap: 8px;
  align-content: space-around;
  min-height: 100%;
}

.bracket-map-stack::before {
  content: "";
  position: absolute;
  inset: 24px -6px;
  border-top: 2px solid rgba(0, 85, 135, 0.12);
  border-bottom: 2px solid rgba(0, 85, 135, 0.12);
  pointer-events: none;
}

.matches-8 {
  min-height: 540px;
}

.matches-4 {
  min-height: 540px;
}

.matches-2 {
  min-height: 540px;
}

.matches-1 {
  min-height: 540px;
}

.final-column .matches-2 {
  align-content: center;
  gap: 14px;
}

.bracket-map-match {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 4px;
  padding: 6px;
  border: 1px solid rgba(24, 32, 51, 0.11);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 8px 18px rgba(7, 20, 38, 0.06);
}

.bracket-map-match::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 10px;
  border-top: 2px solid rgba(0, 85, 135, 0.16);
}

.side-left .bracket-map-match::after {
  right: -11px;
}

.side-right .bracket-map-match::after {
  left: -11px;
}

.final-column .bracket-map-match::after {
  content: none;
}

.bracket-map-match header {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.bracket-map-match.compact {
  padding: 6px;
}

.bracket-map-match.compact .bracket-team {
  grid-template-columns: 24px minmax(0, 1fr);
  min-height: 32px;
  padding: 4px;
}

.bracket-map-match.compact .flag-shell,
.bracket-map-match.compact .flag {
  width: 24px;
  height: 18px;
}

.bracket-map-match.compact .team-copy strong {
  font-size: 0.68rem;
}

.bracket-map-match.compact .team-copy small {
  font-size: 0.58rem;
}

.bracket-map-match.winner-set {
  border-color: rgba(15, 123, 79, 0.3);
  background: linear-gradient(180deg, rgba(238, 249, 243, 0.98), rgba(255, 255, 255, 0.96));
}

.final-column .bracket-map-match {
  border-color: rgba(255, 140, 0, 0.32);
  background:
    linear-gradient(180deg, rgba(255, 250, 239, 0.98), rgba(255, 255, 255, 0.96));
  box-shadow: 0 14px 28px rgba(255, 140, 0, 0.12);
}

.bracket-round-tab {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-height: 54px;
  padding: 8px 10px;
  border: 1px solid rgba(15, 123, 79, 0.18);
  border-radius: var(--radius-1);
  background: rgba(255, 255, 255, 0.9);
  color: var(--ink);
  text-align: left;
}

.bracket-round-tab:hover,
.bracket-round-tab:focus-visible {
  border-color: var(--pitch);
  outline: none;
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(15, 123, 79, 0.11);
}

.bracket-round-tab.active {
  border-color: transparent;
  background: linear-gradient(135deg, var(--pitch), var(--grass-deep));
  color: #fff;
  box-shadow: 0 14px 24px rgba(15, 123, 79, 0.22);
}

.bracket-round-tab.complete:not(.active) {
  border-color: rgba(15, 123, 79, 0.28);
  background: rgba(236, 248, 241, 0.96);
}

.round-step {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 50%;
  background: rgba(0, 85, 135, 0.1);
  color: var(--grass);
  font-size: 0.78rem;
  font-weight: 900;
}

.bracket-round-tab.active .round-step {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.round-tab-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.round-tab-copy strong,
.round-tab-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.round-tab-copy strong {
  font-size: 0.9rem;
}

.round-tab-copy small {
  color: inherit;
  opacity: 0.72;
  font-size: 0.76rem;
  font-weight: 900;
}

.bracket-focus {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 260px);
  gap: 14px;
  align-items: start;
}

.bracket-panels {
  min-width: 0;
}

.bracket-round-panel {
  display: none;
  gap: 12px;
}

.bracket-round-panel.active {
  display: grid;
}

.bracket-round-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(15, 123, 79, 0.16);
  border-radius: var(--radius-1);
  background: rgba(255, 255, 255, 0.9);
}

.bracket-round-toolbar h4 {
  margin: 2px 0 4px;
  color: var(--ink);
  font-size: 1.22rem;
}

.bracket-round-toolbar p {
  margin: 0;
  color: var(--muted);
  font-weight: 800;
}

.bracket-round-actions {
  display: flex;
  gap: 8px;
}

.bracket-step-button {
  min-height: 38px;
  padding: 8px 11px;
  border: 1px solid rgba(15, 123, 79, 0.2);
  border-radius: var(--radius-1);
  background: #fff;
  color: var(--pitch-deep);
  font-weight: 900;
}

.bracket-step-button:not(:disabled):hover,
.bracket-step-button:not(:disabled):focus-visible {
  border-color: var(--pitch);
  outline: none;
  box-shadow: 0 8px 16px rgba(15, 123, 79, 0.12);
}

.bracket-step-button:disabled {
  opacity: 0.45;
}

.bracket-round-panel .bracket-round-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bracket-round-panel.final-round .bracket-round-grid {
  grid-template-columns: minmax(0, 1fr);
}

.bracket-side {
  position: sticky;
  top: 112px;
  display: grid;
  gap: 10px;
  min-width: 0;
}

.bracket-trophy-card {
  display: grid;
  gap: 10px;
  min-height: 170px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: var(--radius-1);
  background:
    linear-gradient(160deg, rgba(7, 20, 38, 0.84), rgba(0, 85, 135, 0.72)),
    var(--stadium-hero) center / cover no-repeat;
  color: #fff;
  overflow: hidden;
}

.bracket-trophy-card::before {
  content: "";
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--icon-trophy) center / 60% no-repeat rgba(255, 255, 255, 0.16);
}

.bracket-trophy-card .round-kicker,
.bracket-trophy-card strong,
.bracket-trophy-card .team-copy strong,
.bracket-trophy-card .team-copy small {
  color: #fff;
}

.bracket-trophy-card strong {
  font-size: 1.08rem;
}

.bracket-finalists {
  display: grid;
  gap: 8px;
}

.bracket-side p {
  margin: 0;
  padding: 12px;
  border: 1px solid rgba(15, 123, 79, 0.16);
  border-radius: var(--radius-1);
  background: rgba(255, 255, 255, 0.82);
  color: var(--muted);
  font-weight: 800;
  line-height: 1.4;
}

.ranking-board {
  display: grid;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.ranking-table-head,
.ranking-list li {
  display: grid;
  grid-template-columns: 44px minmax(178px, 1fr) repeat(8, minmax(58px, 68px)) minmax(74px, 86px);
  align-items: center;
  min-width: 916px;
  column-gap: 0;
}

.ranking-table-head {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(24, 32, 51, 0.08);
  border-radius: var(--radius-1);
  background: rgba(7, 20, 38, 0.07);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.ranking-list {
  display: grid;
  gap: 8px;
}

.ranking-list li {
  min-height: 60px;
  padding: 10px 12px;
  border-radius: var(--radius-1);
}

.ranking-table-head span,
.ranking-score-cell {
  min-width: 0;
  text-align: center;
}

.ranking-table-head span:nth-child(2),
.ranking-copy {
  text-align: left;
}

.ranking-table-head span:nth-child(n+3),
.ranking-score-cell,
.points {
  border-left: 1px solid rgba(24, 32, 51, 0.08);
}

.ranking-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
  padding: 0 10px;
}

.ranking-copy strong {
  overflow: hidden;
  color: var(--ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ranking-copy > span {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.ranking-adjustment {
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(255, 140, 0, 0.13);
  color: var(--warning);
  font-style: normal;
  font-weight: 900;
}

.ranking-score-cell {
  display: grid;
  min-height: 40px;
  place-items: center;
  color: var(--grass);
  font-size: 0.98rem;
  font-weight: 900;
}

.ranking-list li.is-current-user .ranking-score-cell {
  color: var(--grass-deep);
}

.points {
  justify-self: stretch;
  justify-content: center;
  gap: 3px;
  min-height: 40px;
  padding: 0 8px;
  border-radius: 0;
  background: transparent;
  font-size: 1.08rem;
}

.points small {
  font-size: 0.68rem;
  font-weight: 900;
}

.ranking-phase-summary {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 6px;
}

.ranking-phase-summary span {
  display: grid;
  gap: 2px;
  min-height: 46px;
  align-content: center;
  padding: 7px;
  border: 1px solid rgba(24, 32, 51, 0.08);
  border-radius: var(--radius-1);
  background: rgba(255, 255, 255, 0.78);
  text-align: center;
}

.ranking-phase-summary small {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 900;
  text-transform: uppercase;
}

.ranking-phase-summary strong {
  color: var(--grass);
  font-size: 1rem;
}

@media (max-width: 860px) {
  .bracket-focus {
    grid-template-columns: 1fr;
  }

  .bracket-side {
    position: static;
    grid-template-columns: 1fr;
  }

  .bracket-round-rail {
    grid-template-columns: repeat(5, minmax(132px, 1fr));
    overflow-x: auto;
    scrollbar-width: none;
  }

  .bracket-round-rail::-webkit-scrollbar {
    display: none;
  }

  .bracket-round-panel .bracket-round-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }

  .ranking-table-head,
  .ranking-list li {
    min-width: 900px;
  }
}

@media (max-width: 560px) {
  .bracket-board-head,
  .bracket-round-toolbar {
    grid-template-columns: 1fr;
  }

  .bracket-board-progress {
    min-width: 0;
  }

  .bracket-round-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bracket-step-button {
    width: 100%;
  }

  .ranking-table-head {
    display: none;
  }

  .ranking-list li {
    grid-template-columns: 40px minmax(0, 1fr) minmax(64px, auto);
    min-width: 0;
    row-gap: 8px;
  }

  .ranking-score-cell {
    grid-column: span 1;
    min-height: 38px;
    border: 1px solid rgba(24, 32, 51, 0.08);
    border-radius: var(--radius-1);
    background: rgba(255, 255, 255, 0.76);
    font-size: 0.9rem;
  }

  .ranking-score-cell::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 0.58rem;
    font-weight: 900;
    text-transform: uppercase;
  }

  .points {
    border-left: 0;
    border-radius: 999px;
    background: rgba(212, 0, 59, 0.08);
  }

  .ranking-phase-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Compact product pass: fewer layers, denser reading, less decorative weight. */
body {
  background:
    linear-gradient(180deg, rgba(238, 245, 240, 0.82) 0, #f8fafc 360px),
    #f8fafc;
}

body::before {
  height: 300px;
  opacity: 0.86;
}

body::after {
  opacity: 0.45;
}

.topbar {
  padding: 18px 0 10px;
}

.brand {
  gap: 12px;
  padding: 8px 10px;
  box-shadow: 0 10px 24px rgba(7, 20, 38, 0.14);
}

.brand-logo {
  width: 118px;
  padding: 6px 9px;
}

.brand h1 {
  font-size: clamp(1.25rem, 1rem + 0.65vw, 1.65rem);
}

.page,
.login-view,
.app-view {
  gap: 12px;
}

.app-tabs {
  top: 8px;
  gap: 8px;
  padding: 8px;
  box-shadow: 0 12px 28px rgba(7, 20, 38, 0.1);
}

.app-tab-links {
  gap: 6px;
}

.app-tabs a,
.secondary-button,
.primary-button,
.danger-button {
  min-height: 38px;
}

.app-tabs a {
  min-width: auto;
  padding: 8px 12px;
  font-size: 0.9rem;
}

.app-session span {
  padding: 8px 10px;
  max-width: 180px;
}

.intro,
.panel,
.summary-grid article,
.tournament-section,
.extra-picks,
.published-picks,
.live-card,
.rule-card,
.rules-detail section,
.ranking-list li,
.match-card,
.result-card,
.payment-card,
.point-adjustment-card {
  box-shadow: 0 6px 16px rgba(24, 32, 51, 0.05);
}

.panel,
.intro {
  padding: 16px;
}

.section-heading {
  align-items: center;
  margin-bottom: 10px;
}

.section-heading h2 {
  font-size: 1.32rem;
}

.eyebrow {
  margin-bottom: 2px;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
}

.login-view {
  max-width: 1080px;
  margin-top: 18px;
  grid-template-columns: minmax(0, 1.06fr) minmax(340px, 0.94fr);
}

.login-intro {
  min-height: 0;
  gap: 16px;
  padding: 24px;
}

.intro h2 {
  font-size: clamp(1.75rem, 1.35rem + 1.2vw, 2.35rem);
}

.login-bullet-list {
  gap: 6px;
  margin-top: 6px;
  font-size: 0.96rem;
}

.login-intro .auth-glance.login-score-list article {
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 10px;
  padding: 10px 12px;
}

.login-score-list ul {
  gap: 5px 10px;
  font-size: 0.82rem;
}

.login-score-list li {
  min-width: min(100%, 168px);
}

.login-panel {
  padding: 22px;
  gap: 12px;
}

.auth-mode-switch {
  padding: 4px;
}

input,
select,
textarea {
  min-height: 40px;
  padding: 8px 10px;
}

label {
  gap: 5px;
  font-size: 0.84rem;
}

.summary-grid {
  gap: 8px;
}

.summary-grid article {
  min-height: 68px;
  padding: 12px 14px;
}

.summary-grid article::before {
  width: 28px;
  height: 28px;
  mask-size: 22px 22px;
  -webkit-mask-size: 22px 22px;
}

.summary-grid span {
  font-size: 0.68rem;
}

.summary-grid strong {
  font-size: clamp(1.2rem, 1rem + 0.6vw, 1.55rem);
}

.prediction-panel > .section-heading {
  padding: 16px 18px;
  box-shadow: 0 12px 28px rgba(7, 20, 38, 0.14);
}

.prediction-panel > .tournament-builder,
.prediction-panel > .extra-picks,
.prediction-panel > .phase-hint,
.prediction-panel > .published-picks {
  margin-left: 0;
  margin-right: 0;
}

.prediction-panel > .tournament-builder {
  margin-top: 12px;
}

.porra-overview {
  grid-template-columns: 1fr;
  margin: 10px 0 0;
}

.compact-meta-card {
  display: none;
}

.home-card {
  min-height: 0;
  padding: 14px 16px;
  gap: 8px;
}

.home-card::after {
  width: 48px;
  height: 48px;
  opacity: 0.06;
}

.home-card strong {
  font-size: 1.1rem;
}

.home-card p {
  font-size: 0.9rem;
}

.home-card-meta span {
  padding: 6px 9px;
  font-size: 0.78rem;
}

.porra-progress {
  gap: 6px;
}

.porra-progress span {
  min-height: 46px;
  padding: 8px;
}

.tournament-builder {
  gap: 10px;
}

.tournament-section {
  gap: 10px;
  padding: 12px;
}

.tournament-section .compact-heading p {
  display: none;
}

.compact-heading h3,
.extra-picks h3,
.live-card-head h3 {
  font-size: 1rem;
}

.group-rank-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 8px;
}

.group-rank-card header {
  padding: 9px 11px;
}

.group-card-title > span {
  width: 28px;
  height: 28px;
}

.team-bank {
  gap: 5px;
}

.bank-team {
  min-height: 30px;
  padding: 4px 6px;
}

.team-bank-chip-copy .flag-shell,
.team-bank-chip-copy .flag {
  width: 23px;
  height: 17px;
}

.group-rank-card li {
  min-height: 48px;
  padding: 7px 9px;
}

.position {
  width: 28px;
  height: 28px;
}

.team-identity {
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 7px;
}

.flag-shell,
.flag {
  width: 30px;
  height: 22px;
}

.team-copy strong {
  font-size: 0.9rem;
}

.rank-actions {
  gap: 3px;
}

.mini-button {
  width: 30px;
  min-height: 30px;
}

.third-place-grid {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.third-chip {
  min-height: 58px;
  padding: 9px;
}

.bracket-stage {
  background: rgba(255, 255, 255, 0.96);
}

.bracket-stage::before,
.bracket-board-head {
  display: none;
}

.bracket-road {
  gap: 10px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.bracket-round-rail {
  grid-template-columns: repeat(5, minmax(96px, 1fr));
  gap: 6px;
  padding: 6px;
}

.bracket-round-tab {
  min-height: 42px;
  padding: 7px 8px;
}

.round-step {
  width: 24px;
  height: 24px;
}

.round-tab-copy small,
.bracket-side {
  display: none;
}

.bracket-focus {
  grid-template-columns: 1fr;
  gap: 10px;
}

.bracket-round-toolbar {
  padding: 10px;
}

.bracket-round-toolbar p {
  display: none;
}

.bracket-round-toolbar h4 {
  font-size: 1.05rem;
}

.bracket-round-panel .bracket-round-grid {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px;
}

.bracket-match {
  gap: 7px;
  padding: 8px;
}

.bracket-team {
  min-height: 44px;
  padding: 7px;
}

.extra-picks,
.published-picks {
  gap: 10px;
  padding: 14px;
  margin-bottom: 12px;
}

.extra-picks-form {
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  align-items: end;
}

.extra-picks-actions {
  grid-column: auto;
}

.phase-hint {
  display: none;
}

.live-panel {
  background: rgba(255, 255, 255, 0.94);
}

.live-grid {
  gap: 10px;
}

.live-card {
  gap: 10px;
  padding: 12px;
}

.forum-form textarea {
  min-height: 74px;
}

.forum-list {
  max-height: 360px;
}

.forum-message {
  gap: 6px;
  padding: 9px 10px;
}

.live-highlights {
  grid-template-columns: 1fr;
}

.live-highlights article,
.live-match-card {
  padding: 10px;
}

.ranking-summary {
  margin-bottom: 8px;
}

.ranking-self {
  padding: 12px;
}

.ranking-phase-summary span {
  min-height: 40px;
  padding: 6px;
}

.ranking-list {
  gap: 5px;
}

.ranking-table-head,
.ranking-list li {
  grid-template-columns: 36px minmax(170px, 1fr) repeat(8, minmax(50px, 58px)) minmax(64px, 74px);
  min-width: 800px;
}

.ranking-list li {
  min-height: 50px;
  padding: 7px 9px;
}

.rank-number {
  width: 32px;
  height: 32px;
}

.ranking-score-cell,
.points {
  min-height: 34px;
}

.points {
  font-size: 1rem;
}

.admin-grid {
  gap: 12px;
}

.admin-shortcuts {
  gap: 6px;
  margin-top: 10px;
}

.admin-shortcuts button {
  min-height: 32px;
  padding: 0 10px;
}

.admin-kpi-grid,
.admin-watch-grid {
  gap: 8px;
}

.admin-kpi-grid article {
  min-height: 64px;
  padding: 10px;
}

.admin-watch-grid section {
  padding: 10px;
}

.rules-shell {
  gap: 10px;
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 8px 22px rgba(24, 32, 51, 0.07);
}

.rules-hero {
  min-height: 0;
  padding: 16px 18px;
}

.rules-hero h2 {
  font-size: 1.55rem;
}

.rules-hero p {
  margin-top: 5px;
  line-height: 1.35;
}

.rules-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  padding: 0 14px;
}

.rule-card {
  grid-template-columns: 1fr;
  align-content: start;
  min-height: 132px;
  gap: 7px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.94);
}

.rule-card > span {
  grid-row: auto;
  width: 32px;
  height: 32px;
  font-size: 0.78rem;
}

.rule-card p {
  font-size: 0.86rem;
  line-height: 1.34;
}

.rules-list-grid .rule-card:last-child {
  grid-column: auto;
}

.rules-detail-compact {
  padding: 0 14px 14px;
}

.rules-detail section {
  padding: 12px 14px;
}

.rules-list {
  gap: 6px;
  line-height: 1.38;
}

@media (max-width: 980px) {
  .rules-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .extra-picks-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .extra-picks-actions {
    grid-column: 1 / -1;
  }
}

@media (max-width: 860px) {
  .login-view {
    grid-template-columns: 1fr;
    margin-top: 10px;
  }

  .app-tabs {
    top: 6px;
  }

  .bracket-round-rail {
    grid-template-columns: repeat(5, minmax(112px, 1fr));
  }

  .ranking-table-head,
  .ranking-list li {
    min-width: 780px;
  }
}

@media (max-width: 560px) {
  .topbar,
  .page {
    width: min(100% - 18px, 1120px);
  }

  .brand-logo {
    width: 104px;
  }

  .app-tabs a {
    padding: 8px 10px;
  }

  .summary-grid article {
    min-height: 58px;
  }

  .prediction-panel > .section-heading,
  .porra-overview,
  .prediction-panel > .tournament-builder,
  .prediction-panel > .extra-picks,
  .prediction-panel > .published-picks {
    margin-left: 0;
    margin-right: 0;
  }

  .login-intro .auth-glance.login-score-list article,
  .rules-grid,
  .extra-picks-form {
    grid-template-columns: 1fr;
  }

  .rule-card {
    min-height: 0;
  }
}

/* Admin operations pass: compact, task-first layout. */
.admin-grid {
  grid-template-columns: 1fr;
  gap: 10px;
}

.admin-login-panel,
.admin-panel {
  padding: 14px;
}

.admin-login-panel {
  display: grid;
  grid-template-columns: minmax(180px, 0.35fr) minmax(220px, 1fr) auto;
  gap: 8px 14px;
  align-items: center;
}

.admin-login-panel .section-heading,
.admin-panel .section-heading {
  margin-bottom: 4px;
}

.admin-content .eyebrow {
  display: none;
}

.admin-login-panel form {
  grid-template-columns: minmax(220px, 360px) auto;
  gap: 8px;
}

.admin-login-copy {
  margin: 0;
}

.admin-session-status {
  display: none;
}

#adminSessionActions {
  justify-content: flex-end;
}

.admin-shortcuts {
  display: flex;
  flex-wrap: wrap;
  grid-column: 1 / -1;
  gap: 5px;
  margin-top: 8px;
}

.admin-shortcuts button {
  min-height: 30px;
  padding: 0 9px;
  font-size: 0.78rem;
}

.admin-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  align-items: start;
}

#admin-overview,
#admin-payments,
#admin-points,
#admin-tournament-results,
#admin-reminders,
#admin-sync,
#admin-exports,
#admin-audit {
  grid-column: 1 / -1;
}

.admin-secondary-panel {
  padding: 12px;
}

.admin-secondary-panel .section-heading h2 {
  font-size: 1.05rem;
}

.admin-secondary-panel .inline-note {
  margin: 0 0 8px;
}

#admin-reminders {
  display: grid;
  grid-template-columns: minmax(180px, 0.45fr) minmax(260px, 1fr) auto;
  gap: 10px;
  align-items: center;
}

#admin-reminders .section-heading,
#admin-reminders .inline-note,
#admin-reminders .button-row {
  margin: 0;
}

#admin-reminders .button-row {
  justify-content: flex-end;
}

.admin-overview {
  gap: 8px;
}

.admin-ops-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.admin-ops-summary span {
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid rgba(0, 85, 135, 0.11);
  border-radius: var(--radius-1);
  background: rgba(246, 250, 252, 0.92);
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 900;
  white-space: nowrap;
}

.admin-ops-summary strong {
  color: var(--grass);
  font-size: 1.05rem;
}

.admin-kpi-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.admin-kpi-grid article {
  min-height: 52px;
  padding: 8px 10px;
  gap: 4px;
}

.admin-kpi-grid span {
  font-size: 0.74rem;
}

.admin-kpi-grid strong {
  font-size: 1.28rem;
}

.admin-watch-grid {
  gap: 8px;
}

.admin-watch-grid section {
  gap: 6px;
  padding: 8px;
}

.admin-watch-head span {
  min-width: 28px;
  height: 24px;
  font-size: 0.76rem;
}

.admin-watch-list {
  max-height: 160px;
  gap: 4px;
}

.admin-watch-list li {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  min-height: 52px;
  padding: 6px 8px;
  gap: 3px;
}

.admin-watch-list li div {
  display: grid;
  grid-template-columns: minmax(110px, 0.55fr) minmax(150px, 1fr);
  gap: 8px;
  min-width: 0;
}

.admin-watch-list small {
  justify-self: start;
  max-width: none;
  line-height: 1.2;
  white-space: nowrap;
}

.admin-inline-form {
  align-items: end;
  gap: 8px;
  margin: 8px 0;
}

.payments-list {
  grid-template-columns: 1fr;
  gap: 3px;
  overflow-x: auto;
}

.payment-row {
  min-height: 38px;
}

#admin-payments .payments-summary {
  min-width: 0;
  padding: 7px 9px;
}

#admin-payments .payments-table {
  width: 100%;
  min-width: 860px;
  gap: 2px;
}

#admin-payments .payments-table-head,
#admin-payments .payment-card {
  grid-template-columns: minmax(150px, 1.15fr) minmax(240px, 1.8fr) 88px minmax(96px, 0.7fr) 220px;
}

#admin-payments .payments-table-head {
  min-height: 24px;
}

#admin-payments .payment-card {
  min-height: 32px;
  padding: 3px 8px;
}

#admin-payments .payment-actions {
  display: flex;
  gap: 5px;
  justify-content: flex-end;
}

#admin-payments .payment-card .payment-status {
  min-height: 20px;
  padding: 0 7px;
  font-size: 0.68rem;
}

#admin-payments .payment-actions button {
  min-width: 58px;
  min-height: 24px;
  padding: 3px 7px;
  font-size: 0.7rem;
}

.admin-score-note {
  border-left: 4px solid var(--gold);
  background: rgba(255, 140, 0, 0.08);
  color: var(--ink);
  padding: 7px 9px;
}

.admin-scoring-flow {
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) minmax(280px, 1fr) minmax(260px, 1fr);
  gap: 8px;
  align-items: stretch;
  margin: 8px 0;
}

.admin-overview-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: stretch;
  padding: 8px;
  border: 1px solid rgba(255, 140, 0, 0.24);
  border-radius: var(--radius-1);
  background: rgba(255, 250, 242, 0.78);
}

.admin-overview-flow .admin-flow-main {
  border-color: rgba(255, 140, 0, 0.24);
  background: rgba(255, 255, 255, 0.86);
}

.admin-overview-flow .admin-flow-steps {
  border-color: rgba(255, 140, 0, 0.16);
  background: rgba(255, 255, 255, 0.72);
}

.admin-overview-flow > button {
  align-self: center;
  white-space: nowrap;
}

.admin-flow-main,
.admin-flow-process,
.admin-flow-steps,
.admin-flow-warning {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid rgba(0, 85, 135, 0.12);
  border-radius: var(--radius-1);
  background: rgba(246, 250, 252, 0.94);
}

.admin-flow-warning {
  grid-column: 1 / -1;
  border-color: rgba(212, 0, 59, 0.24);
  background: rgba(255, 239, 244, 0.92);
  color: var(--red);
  font-size: 0.86rem;
  font-weight: 900;
}

.admin-flow-main {
  display: grid;
  gap: 4px;
}

.admin-flow-main strong {
  color: var(--ink);
}

.admin-flow-main span,
.admin-flow-process li {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1.3;
}

.admin-flow-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
}

.admin-flow-steps span {
  display: grid;
  gap: 2px;
  min-height: 42px;
  align-content: center;
  padding: 5px 7px;
  border-radius: var(--radius-1);
  background: rgba(0, 85, 135, 0.07);
  color: var(--grass);
  font-size: 0.8rem;
  font-weight: 900;
}

.admin-flow-steps span.is-done {
  background: rgba(11, 122, 75, 0.12);
  color: var(--success);
}

.admin-flow-steps strong {
  color: var(--muted);
  font-size: 0.68rem;
  text-transform: uppercase;
}

.admin-flow-process {
  display: grid;
  gap: 4px;
  margin: 0;
  padding-left: 26px;
}

.admin-tournament-builder {
  margin-top: 8px;
}

.admin-extra-results {
  margin: 8px 0;
  padding: 10px;
}

.admin-extra-results .extra-picks-form {
  gap: 8px;
}

.reminder-list,
.audit-list {
  max-height: 180px;
}

.sync-actions,
.admin-secondary-panel .button-row {
  gap: 6px;
}

.admin-secondary-panel button {
  min-height: 34px;
  padding: 0 11px;
}

@media (max-width: 900px) {
  .admin-login-panel,
  .admin-content {
    grid-template-columns: 1fr;
  }

  .admin-scoring-flow,
  .admin-overview-flow,
  .admin-ops-summary,
  .admin-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-flow-process {
    grid-column: 1 / -1;
  }
}

@media (max-width: 620px) {
  .admin-login-panel form,
  .admin-inline-form,
  .admin-scoring-flow,
  .admin-overview-flow,
  .admin-ops-summary,
  .admin-kpi-grid,
  .admin-watch-grid {
    grid-template-columns: 1fr;
  }

  .admin-watch-list li {
    grid-template-columns: 1fr;
  }

  .admin-watch-list li div {
    grid-template-columns: 1fr;
  }

  .admin-watch-list small {
    justify-self: start;
  }
}

/* Bracket cleanup: single map view, no page-wide drift. */
.prediction-panel > .tournament-builder {
  width: auto;
  margin-left: 0;
  margin-right: 0;
  transform: none;
}

.bracket-stage {
  margin-left: 0;
  margin-right: 0;
  min-width: 0;
  overflow: hidden;
}

.bracket-road-map-only .bracket-map {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.bracket-road-map-only,
.bracket-road-map-only .bracket-map-scroll {
  min-width: 0;
}

/* Bracket map polish: cleaner connector rails and stronger match cards. */
.bracket-road-map-only .bracket-map {
  border-color: rgba(0, 85, 135, 0.18);
  background:
    linear-gradient(180deg, rgba(248, 252, 255, 0.96), rgba(255, 255, 255, 0.98)),
    linear-gradient(90deg, rgba(0, 85, 135, 0.035) 1px, transparent 1px),
    linear-gradient(180deg, rgba(15, 123, 79, 0.026) 1px, transparent 1px);
  background-size: auto, 36px 100%, 100% 36px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 12px 28px rgba(7, 20, 38, 0.06);
}

.bracket-road-map-only .bracket-map-scroll {
  gap: 10px;
  min-width: 1260px;
  padding: 14px;
}

.bracket-road-map-only .bracket-map-column h5 {
  min-height: 22px;
  color: rgba(43, 58, 83, 0.78);
  letter-spacing: 0.08em;
}

.bracket-road-map-only .bracket-map-stack::before {
  top: 42px;
  right: auto;
  bottom: 42px;
  left: auto;
  width: 0;
  border: 0;
  border-left: 2px solid rgba(0, 85, 135, 0.16);
}

.bracket-road-map-only .side-left .bracket-map-stack::before {
  right: -6px;
}

.bracket-road-map-only .side-right .bracket-map-stack::before {
  left: -6px;
}

.bracket-road-map-only .matches-1::before,
.bracket-road-map-only .final-column .bracket-map-stack::before {
  content: none;
}

.bracket-road-map-only .bracket-map-match {
  padding: 7px;
  border-color: rgba(0, 85, 135, 0.16);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 8px 20px rgba(7, 20, 38, 0.07);
}

.bracket-road-map-only .bracket-map-match::after {
  top: 50%;
  width: 13px;
  border-top-color: rgba(0, 85, 135, 0.18);
}

.bracket-road-map-only .side-left .bracket-map-match::after {
  right: -14px;
}

.bracket-road-map-only .side-right .bracket-map-match::after {
  left: -14px;
}

.bracket-road-map-only .final-column .bracket-map-match::after {
  content: none;
}

.bracket-road-map-only .bracket-map-match header {
  color: rgba(43, 58, 83, 0.74);
}

.bracket-road-map-only .bracket-map-match.winner-set {
  border-color: rgba(15, 123, 79, 0.34);
  background: linear-gradient(180deg, rgba(235, 249, 242, 0.98), rgba(255, 255, 255, 0.98));
  box-shadow: 0 8px 20px rgba(15, 123, 79, 0.08);
}

.bracket-road-map-only .final-column .bracket-map-match {
  border-color: rgba(255, 140, 0, 0.42);
  background:
    linear-gradient(180deg, rgba(255, 249, 237, 0.98), rgba(255, 255, 255, 0.98));
  box-shadow: 0 14px 32px rgba(255, 140, 0, 0.16);
}

.bracket-road-map-only .bracket-team {
  border-radius: 8px;
}

.bracket-road-map-only .bracket-team.selected {
  box-shadow: inset 4px 0 0 rgba(15, 123, 79, 0.92);
}

/* Twelve-team choice grids should land as a clean 3x4 on desktop. */
.group-rank-grid,
.third-place-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1120px) {
  .group-rank-grid,
  .third-place-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .group-rank-grid,
  .third-place-grid {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 1500px) {
  .page {
    width: min(1680px, calc(100% - 32px));
  }

  .bracket-road-map-only .bracket-map-scroll {
    min-width: 0;
  }
}

/* UI refresh: calmer shell, clearer hierarchy and denser task surfaces. */
:root {
  --app-shell: #f5f8fb;
  --surface-clean: rgba(255, 255, 255, 0.97);
  --surface-raised: #ffffff;
  --surface-tint: #f7fbfd;
  --line-ui: rgba(0, 85, 135, 0.14);
  --line-ui-strong: rgba(0, 85, 135, 0.22);
  --shadow-ui: 0 10px 24px rgba(7, 20, 38, 0.07);
  --shadow-ui-strong: 0 18px 40px rgba(7, 20, 38, 0.12);
}

body {
  background:
    linear-gradient(180deg, rgba(242, 247, 250, 0.94) 0, var(--app-shell) 300px, #f8fafc 100%),
    var(--app-shell);
}

body::before {
  height: 230px;
  opacity: 0.55;
  background:
    linear-gradient(180deg, rgba(7, 20, 38, 0.18) 0%, rgba(245, 248, 251, 0.94) 82%, var(--app-shell) 100%),
    var(--stadium-hero) center 20% / cover no-repeat;
}

body::after {
  opacity: 0.24;
  background-size: 72px 72px;
}

.topbar {
  width: min(1440px, calc(100% - 32px));
  padding: 14px 0 8px;
}

.brand {
  gap: 10px;
  padding: 7px 9px;
  border-color: rgba(255, 255, 255, 0.26);
  background: rgba(7, 20, 38, 0.74);
  box-shadow: 0 10px 24px rgba(7, 20, 38, 0.16);
}

.brand-logo {
  width: 108px;
  border-radius: 6px;
}

.brand h1 {
  font-size: clamp(1.15rem, 0.98rem + 0.55vw, 1.5rem);
}

.brand .eyebrow {
  font-size: 0.62rem;
  letter-spacing: 0.1em;
}

.page {
  width: min(1440px, calc(100% - 32px));
  gap: 14px;
  padding-bottom: 48px;
}

.app-view {
  gap: 14px;
}

.app-tabs {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: var(--radius-2);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 12px 28px rgba(7, 20, 38, 0.1);
}

.app-tab-links {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
  max-width: 760px;
}

.app-tabs a {
  min-width: 0;
  min-height: 38px;
  padding: 8px 10px;
  border-color: transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  font-size: 0.88rem;
  box-shadow: none;
}

.app-tabs a:hover,
.app-tabs a:focus-visible {
  border-color: rgba(0, 85, 135, 0.12);
  background: rgba(0, 85, 135, 0.06);
  color: var(--grass-deep);
  box-shadow: none;
  transform: none;
}

.app-tabs a.active {
  border-color: transparent;
  background: linear-gradient(135deg, var(--grass), var(--grass-deep));
  color: #fff;
  box-shadow: 0 8px 18px rgba(0, 85, 135, 0.2);
}

.app-session {
  flex: none;
  gap: 6px;
}

.app-session span {
  max-width: 230px;
  padding: 8px 10px;
  border-radius: 7px;
  background: rgba(0, 85, 135, 0.06);
  color: var(--ink-soft);
}

.panel,
.intro,
.summary-grid article,
.tournament-section,
.extra-picks,
.published-picks,
.live-card,
.rule-card,
.rules-detail section,
.ranking-list li,
.match-card,
.result-card,
.payment-card,
.point-adjustment-card,
.published-pick-card,
.prize-list div {
  border-color: rgba(24, 32, 51, 0.09);
  background: var(--surface-clean);
  box-shadow: var(--shadow-ui);
}

.login-intro {
  background:
    linear-gradient(135deg, rgba(7, 20, 38, 0.92), rgba(0, 59, 97, 0.64) 54%, rgba(15, 123, 79, 0.42)),
    linear-gradient(90deg, rgba(7, 20, 38, 0.74) 0%, rgba(7, 20, 38, 0.4) 54%, rgba(7, 20, 38, 0.14) 100%),
    var(--iniesta-login) center 42% / cover no-repeat;
  color: #fff;
}

.intro.login-intro .eyebrow,
.intro.login-intro h2,
.intro.login-intro p,
.intro.login-intro li {
  color: #fff;
}

.login-intro .auth-glance article {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(7, 20, 38, 0.48);
}

.login-intro .auth-glance strong,
.login-intro .auth-glance p {
  color: #fff;
}

.section-heading {
  gap: 14px;
}

.section-heading h2 {
  color: var(--ink);
  font-size: clamp(1.18rem, 1.06rem + 0.45vw, 1.45rem);
}

.eyebrow {
  color: var(--grass);
  letter-spacing: 0.08em;
}

.primary-button {
  background: linear-gradient(135deg, var(--grass), var(--grass-deep));
  box-shadow: 0 12px 24px rgba(0, 85, 135, 0.18);
}

.primary-button:hover,
.primary-button:focus-visible {
  background: linear-gradient(135deg, #006495, #00324f);
  box-shadow: 0 16px 30px rgba(0, 85, 135, 0.24);
}

#saveTournamentButton {
  min-width: 170px;
  background: linear-gradient(135deg, var(--gold), #ff6a00 36%, var(--red));
  box-shadow: 0 14px 26px rgba(212, 0, 59, 0.2);
}

#saveTournamentButton:hover,
#saveTournamentButton:focus-visible {
  background: linear-gradient(135deg, #ef7100, #c8003d);
  box-shadow: 0 18px 32px rgba(212, 0, 59, 0.24);
}

.secondary-button {
  border-color: rgba(0, 85, 135, 0.16);
  background: #fff;
  color: var(--grass-deep);
}

.summary-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.summary-grid article {
  min-height: 64px;
  padding: 12px 14px;
  border-color: rgba(0, 85, 135, 0.12);
  background: linear-gradient(180deg, #ffffff, #f7fbfd);
}

.summary-grid article::before {
  width: 30px;
  height: 30px;
  background: linear-gradient(135deg, var(--grass), var(--pitch));
  mask-size: 23px 23px;
  -webkit-mask-size: 23px 23px;
}

.summary-grid span {
  color: #64748b;
  font-size: 0.66rem;
}

.summary-grid strong {
  color: var(--grass-deep);
  font-size: clamp(1.12rem, 0.98rem + 0.5vw, 1.45rem);
}

.prediction-panel > .section-heading {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  padding: 16px 18px;
  overflow: hidden;
  border: 1px solid var(--line-ui);
  border-radius: var(--radius-2);
  background:
    linear-gradient(90deg, rgba(0, 85, 135, 0.06), transparent 42%),
    linear-gradient(180deg, #ffffff, #f7fbfd);
  color: var(--ink);
  box-shadow:
    inset 4px 0 0 var(--grass),
    var(--shadow-ui);
}

.prediction-panel > .section-heading .eyebrow,
.prediction-panel > .section-heading h2 {
  color: inherit;
}

.prediction-panel > .section-heading .eyebrow {
  color: var(--grass);
}

.prediction-panel > .section-heading .phase-cta span {
  border-color: rgba(11, 122, 75, 0.2);
  background: #eef9f3;
  color: var(--success);
  box-shadow: none;
}

.phase-cta {
  gap: 8px;
}

.porra-overview {
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.65fr);
  gap: 10px;
  margin: 12px 0 0;
}

.compact-meta-card {
  display: grid;
  border-color: rgba(255, 140, 0, 0.22);
  background: linear-gradient(180deg, #fffaf1, #ffffff);
}

.compact-meta-card .home-card-label {
  color: var(--warning);
}

.compact-meta-card strong {
  color: var(--ink);
}

.compact-meta-card p {
  color: var(--muted);
}

.home-card {
  min-height: 0;
  padding: 14px 16px;
  border-color: rgba(0, 85, 135, 0.12);
  background: linear-gradient(180deg, #ffffff, #f8fbfd);
  box-shadow: var(--shadow-ui);
}

.home-card::after {
  width: 44px;
  height: 44px;
  opacity: 0.05;
}

.next-phase-card {
  border-color: rgba(11, 122, 75, 0.22);
  background:
    linear-gradient(90deg, rgba(11, 122, 75, 0.08), transparent 34%),
    linear-gradient(180deg, #ffffff, #f7fbfd);
  box-shadow:
    inset 4px 0 0 var(--success),
    var(--shadow-ui);
}

.tournament-builder {
  gap: 12px;
}

.porra-progress {
  gap: 8px;
}

.porra-progress span {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-color: rgba(0, 85, 135, 0.12);
  background: #fff;
  text-align: left;
  box-shadow: 0 6px 14px rgba(7, 20, 38, 0.05);
}

.porra-progress strong {
  font-size: 0.92rem;
}

.porra-progress small {
  display: grid;
  min-width: 42px;
  height: 28px;
  place-items: center;
  border-radius: 999px;
  background: rgba(0, 85, 135, 0.08);
  color: var(--grass);
}

.porra-progress span.done {
  border-color: rgba(11, 122, 75, 0.28);
  background: #f1faf5;
}

.porra-progress span.done small {
  background: rgba(11, 122, 75, 0.12);
  color: var(--success);
}

.tournament-section {
  gap: 12px;
  padding: 14px;
  border-color: var(--line-ui);
  background: var(--surface-raised);
  box-shadow: var(--shadow-ui);
}

.compact-heading {
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(0, 85, 135, 0.08);
}

.compact-heading h3,
.extra-picks h3,
.live-card-head h3 {
  color: var(--ink);
  font-size: 1.04rem;
}

.compact-heading p {
  color: #64748b;
}

.group-rank-grid,
.third-place-grid {
  gap: 10px;
}

.group-rank-card {
  border-color: rgba(0, 85, 135, 0.13);
  background: #fff;
  box-shadow: 0 8px 18px rgba(7, 20, 38, 0.06);
}

.group-rank-card header {
  min-height: 46px;
  padding: 9px 10px;
  border-bottom-color: rgba(0, 85, 135, 0.1);
  background: linear-gradient(180deg, #f8fbfd, #ffffff);
}

.group-card-title > span {
  width: 30px;
  height: 30px;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.2);
}

.team-bank small {
  align-self: center;
  padding: 5px 8px;
  border: 1px solid rgba(11, 122, 75, 0.18);
  border-radius: 999px;
  background: #edf9f3;
  color: var(--success);
  font-size: 0.74rem;
}

.group-rank-card li {
  min-height: 50px;
  padding: 8px 10px;
  border-bottom-color: rgba(24, 32, 51, 0.08);
  background: #fff;
}

.group-rank-card li.filled:hover {
  background: #f9fcfe;
}

.position {
  width: 28px;
  height: 28px;
  background: rgba(0, 85, 135, 0.08);
}

.rank-actions {
  opacity: 0.72;
  transition: opacity 120ms ease;
}

.group-rank-card li:hover .rank-actions,
.group-rank-card li:focus-within .rank-actions {
  opacity: 1;
}

.mini-button {
  width: 30px;
  min-height: 30px;
  border-color: rgba(0, 85, 135, 0.14);
  background: #f8fafc;
}

.third-chip {
  min-height: 64px;
  padding: 10px;
  border-color: rgba(0, 85, 135, 0.13);
  background: linear-gradient(180deg, #ffffff, #f8fbfd);
  box-shadow: 0 8px 18px rgba(7, 20, 38, 0.05);
}

.third-chip:hover:not(:disabled),
.third-chip:focus-visible:not(:disabled) {
  border-color: var(--grass);
  outline: none;
  transform: translateY(-1px);
}

.third-chip.selected {
  border-color: rgba(11, 122, 75, 0.34);
  background:
    linear-gradient(90deg, rgba(11, 122, 75, 0.08), transparent 36%),
    #f3fbf6;
  color: var(--success);
  box-shadow:
    inset 4px 0 0 var(--success),
    0 8px 18px rgba(11, 122, 75, 0.07);
}

.extra-picks,
.published-picks {
  border-color: var(--line-ui);
  background: var(--surface-raised);
}

.extra-picks-form {
  gap: 10px;
}

.phase-hint {
  border-color: rgba(0, 85, 135, 0.14);
  background: rgba(0, 85, 135, 0.04);
}

.live-panel {
  background: var(--surface-clean);
}

.live-grid {
  gap: 12px;
}

.live-card {
  border-color: var(--line-ui);
  background: #fff;
}

.live-highlights article,
.live-match-card,
.forum-message {
  border-color: rgba(0, 85, 135, 0.12);
  background: linear-gradient(180deg, #ffffff, #f8fbfd);
}

.ranking-board {
  border: 1px solid rgba(0, 85, 135, 0.12);
  border-radius: var(--radius-2);
  background: #fff;
  padding: 8px;
}

.ranking-table-head {
  border-color: transparent;
  background: #eef5f9;
}

.ranking-list li {
  border-color: rgba(0, 85, 135, 0.1);
  box-shadow: none;
}

.bracket-stage {
  border-color: rgba(0, 85, 135, 0.16);
  background:
    linear-gradient(180deg, #ffffff, #f7fbfd);
}

.bracket-road-map-only .bracket-map {
  border-color: rgba(0, 85, 135, 0.2);
  background:
    linear-gradient(180deg, rgba(250, 253, 255, 0.98), rgba(255, 255, 255, 0.98)),
    linear-gradient(90deg, rgba(0, 85, 135, 0.035) 1px, transparent 1px),
    linear-gradient(180deg, rgba(15, 123, 79, 0.026) 1px, transparent 1px);
  background-size: auto, 40px 100%, 100% 40px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.94),
    0 10px 24px rgba(7, 20, 38, 0.06);
}

.bracket-road-map-only .bracket-map-scroll {
  gap: 14px;
  min-width: 1280px;
  padding: 16px;
}

.bracket-road-map-only .bracket-map-column h5 {
  min-height: 24px;
  color: #506078;
  font-size: 0.68rem;
}

.bracket-road-map-only .bracket-map-stack {
  isolation: isolate;
}

.bracket-road-map-only .bracket-map-stack::before {
  z-index: 0;
  border-left-color: rgba(0, 85, 135, 0.18);
}

.bracket-road-map-only .bracket-map-match {
  z-index: 1;
  border-color: rgba(0, 85, 135, 0.16);
  border-radius: var(--radius-1);
  background: #fff;
  box-shadow: 0 9px 18px rgba(7, 20, 38, 0.07);
}

.bracket-road-map-only .bracket-map-match::after {
  border-top-color: rgba(0, 85, 135, 0.2);
}

.bracket-road-map-only .bracket-map-match.winner-set {
  border-color: rgba(11, 122, 75, 0.32);
  background:
    linear-gradient(90deg, rgba(11, 122, 75, 0.07), transparent 42%),
    #ffffff;
}

.bracket-road-map-only .final-column .bracket-map-match {
  border-color: rgba(255, 140, 0, 0.42);
  background:
    linear-gradient(90deg, rgba(255, 140, 0, 0.1), transparent 44%),
    #ffffff;
  box-shadow: 0 14px 28px rgba(255, 140, 0, 0.14);
}

.bracket-road-map-only .bracket-team {
  min-height: 38px;
  padding: 6px;
  border-color: rgba(24, 32, 51, 0.11);
  background: #fff;
}

.bracket-road-map-only .team-identity,
.bracket-road-map-only .team-identity.compact {
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 4px;
}

.bracket-road-map-only .flag-shell,
.bracket-road-map-only .flag,
.bracket-road-map-only .team-identity.compact .flag {
  width: 22px;
  height: 16px;
}

.bracket-road-map-only .bracket-team .team-copy strong {
  display: block;
  overflow: hidden;
  font-size: 0.62rem;
  line-height: 1.08;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
  -webkit-line-clamp: initial;
}

.bracket-road-map-only .bracket-team .team-copy small {
  font-size: 0.56rem;
}

.bracket-road-map-only .bracket-team.selected {
  border-color: rgba(11, 122, 75, 0.36);
  background: #edf9f3;
  box-shadow: inset 4px 0 0 var(--success);
}

@media (max-width: 1120px) {
  .app-tabs {
    grid-template-columns: 1fr;
  }

  .app-tab-links {
    max-width: none;
  }

  .app-session {
    justify-content: space-between;
    width: 100%;
  }

  .porra-overview {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  .topbar,
  .page {
    width: min(100% - 20px, 1120px);
  }

  .app-tab-links {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  body::before {
    height: 170px;
  }

  .topbar,
  .page {
    width: min(100% - 16px, 1120px);
  }

  .brand {
    width: 100%;
  }

  .brand h1 {
    font-size: 1.05rem;
  }

  .app-tabs {
    top: 6px;
    padding: 6px;
  }

  .app-tab-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .app-tabs a {
    justify-content: flex-start;
    padding: 8px;
  }

  .app-session {
    align-items: stretch;
  }

  .app-session span,
  .app-session button {
    flex: 1 1 140px;
  }

  .summary-grid {
    grid-template-columns: 1fr;
  }

  .prediction-panel > .section-heading {
    grid-template-columns: 1fr;
    padding: 14px;
  }

  .phase-cta {
    justify-content: stretch;
  }

  .phase-cta span,
  .phase-cta button {
    flex: 1 1 150px;
  }

  .porra-progress {
    grid-template-columns: 1fr;
  }

  .tournament-section {
    padding: 12px;
  }
}

/* Bracket rollback: stable column separators, no connector overlay. */
.bracket-road-map-only .bracket-map {
  border-color: rgba(0, 85, 135, 0.18);
  background:
    linear-gradient(180deg, rgba(250, 253, 255, 0.98), rgba(255, 255, 255, 0.98)),
    linear-gradient(90deg, rgba(0, 85, 135, 0.035) 1px, transparent 1px),
    linear-gradient(180deg, rgba(15, 123, 79, 0.026) 1px, transparent 1px);
  background-size: auto, 40px 100%, 100% 40px;
}

.bracket-road-map-only .bracket-map-scroll {
  gap: 0;
  min-width: 1280px;
  padding: 16px;
}

.bracket-road-map-only .bracket-map-column {
  gap: 10px;
  min-width: 0;
  padding: 0 10px;
}

.bracket-road-map-only .bracket-map-column + .bracket-map-column {
  border-left: 1px solid rgba(0, 85, 135, 0.12);
}

.bracket-road-map-only .bracket-map-column h5 {
  display: grid;
  min-height: 28px;
  place-items: center;
  border-bottom: 1px solid rgba(0, 85, 135, 0.1);
  color: #4b5f7d;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
}

.bracket-road-map-only .final-column h5 {
  color: var(--warning);
}

.bracket-road-map-only .bracket-map-stack::before,
.bracket-road-map-only .bracket-map-match::after {
  content: none;
}

.bracket-road-map-only .bracket-map-match {
  padding: 8px;
  border-color: rgba(0, 85, 135, 0.16);
  border-radius: var(--radius-1);
  background: rgba(255, 255, 255, 0.99);
  box-shadow:
    0 10px 22px rgba(7, 20, 38, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.bracket-road-map-only .bracket-map-match header {
  padding: 0 1px 2px;
  color: #52647e;
  font-size: 0.66rem;
}

.bracket-road-map-only .bracket-map-match header small {
  color: var(--success);
}

.bracket-road-map-only .bracket-map-match.winner-set {
  border-color: rgba(11, 122, 75, 0.34);
  background:
    linear-gradient(90deg, rgba(11, 122, 75, 0.08), transparent 36%),
    #fff;
}

.bracket-road-map-only .final-column .bracket-map-stack {
  align-content: center;
  padding: 12px 0;
}

.bracket-road-map-only .final-column .bracket-map-match {
  border-color: rgba(255, 140, 0, 0.48);
  background:
    linear-gradient(90deg, rgba(255, 140, 0, 0.12), transparent 42%),
    #fff;
  box-shadow:
    0 16px 34px rgba(255, 140, 0, 0.14),
    0 8px 22px rgba(7, 20, 38, 0.07);
}

.bracket-road-map-only .bracket-team {
  overflow: hidden;
  border-color: rgba(24, 32, 51, 0.1);
  box-shadow: none;
}

.bracket-road-map-only .bracket-team:not(.selected):hover,
.bracket-road-map-only .bracket-team:not(.selected):focus-visible {
  border-color: rgba(0, 85, 135, 0.34);
  background: #f8fcfe;
}

.bracket-road-map-only .bracket-team.selected {
  border-color: rgba(11, 122, 75, 0.42);
  background: #eefaf4;
  box-shadow: inset 4px 0 0 var(--success);
}

.bracket-road-map-only .bracket-map-column,
.bracket-road-map-only .bracket-map-stack,
.bracket-road-map-only .bracket-map-match,
.bracket-road-map-only .bracket-options,
.bracket-road-map-only .bracket-team,
.bracket-road-map-only .team-identity,
.bracket-road-map-only .team-copy {
  min-width: 0;
}

.bracket-road-map-only .bracket-team .team-copy strong {
  word-break: break-word;
}

@media (min-width: 1500px) {
  .bracket-road-map-only .bracket-map-scroll {
    min-width: 0;
  }
}

/* Ranking compact pass: all phase buckets, including Extras, stay on one desktop row. */
.ranking-phase-summary {
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 8px;
}

.ranking-phase-summary span {
  min-height: 44px;
  padding: 7px 8px;
}

.ranking-table-head,
.ranking-list li {
  grid-template-columns: 40px minmax(190px, 1fr) repeat(9, minmax(50px, 0.62fr)) minmax(64px, 0.72fr);
  min-width: 980px;
}

.ranking-list {
  gap: 6px;
}

.ranking-list li {
  min-height: 46px;
  padding: 7px 10px;
}

.rank-number {
  width: 32px;
  height: 32px;
}

.ranking-copy {
  align-self: center;
  gap: 1px;
  padding: 0 10px;
}

.ranking-copy > span {
  font-size: 0.76rem;
  line-height: 1.15;
}

.ranking-score-cell,
.points {
  min-height: 32px;
}

.ranking-score-cell {
  font-size: 0.95rem;
}

.points {
  display: inline-flex;
  align-items: center;
  align-self: stretch;
  font-size: 1rem;
}

@media (max-width: 900px) {
  .ranking-phase-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ranking-table-head,
  .ranking-list li {
    min-width: 960px;
  }
}

@media (max-width: 560px) {
  .ranking-table-head {
    display: none;
  }

  .ranking-list li {
    grid-template-columns: 38px minmax(0, 1fr) minmax(62px, auto);
    min-width: 0;
    row-gap: 6px;
  }

  .ranking-score-cell {
    min-height: 36px;
  }
}

/* Login polish: keep the first screen aligned and readable. */
body:not(.logged-in) .topbar {
  width: min(1080px, calc(100% - 32px));
}

.login-view {
  justify-self: center;
  width: min(1080px, 100%);
}

.login-intro {
  grid-template-rows: auto auto;
  align-content: start;
}

.login-intro h2 {
  max-width: none;
  margin: 0;
  font-size: clamp(1.5rem, 1.22rem + 0.9vw, 2rem);
  line-height: 1.08;
}

.login-bullet-list {
  max-width: 620px;
  gap: 7px;
  margin-top: 12px;
  padding-left: 18px;
  font-size: 0.94rem;
  line-height: 1.34;
}

.login-score-list ul {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  font-size: 0.84rem;
}

.login-score-list li {
  min-width: 0;
}

.login-intro .auth-glance.login-score-list article {
  grid-template-columns: 1fr;
  align-items: start;
  padding: 12px;
}

.login-panel {
  gap: 14px;
}

@media (max-width: 860px) {
  body:not(.logged-in) .topbar {
    width: min(100% - 20px, 1080px);
  }

  .login-view {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  body:not(.logged-in) .topbar {
    width: min(100% - 16px, 1080px);
  }

  .login-intro .auth-glance.login-score-list article {
    grid-template-columns: 1fr;
  }
}

/* Product polish: denser Porra, Reglas and Ranking screens. */
.prediction-panel > .section-heading {
  min-height: 0;
  padding: 12px 16px;
  border-radius: 8px;
}

.prediction-panel > .section-heading h2,
.rules-hero h2,
#ranking-title {
  font-size: clamp(1.12rem, 1rem + 0.35vw, 1.35rem);
}

.prediction-panel > .section-heading .eyebrow,
.rules-hero .eyebrow {
  font-size: 0.68rem;
}

.phase-cta {
  align-items: center;
}

.phase-cta span {
  min-width: 0;
  padding: 7px 10px;
  font-size: 0.78rem;
}

#saveTournamentButton {
  min-width: 148px;
}

.porra-overview {
  grid-template-columns: 1fr;
  margin-top: 10px;
}

.home-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 14px;
}

.home-card strong {
  font-size: 1.05rem;
}

.home-card p {
  margin-top: 2px;
  font-size: 0.86rem;
}

.home-card-meta {
  justify-content: flex-end;
}

.home-card-meta span {
  padding: 6px 9px;
  font-size: 0.76rem;
}

.prediction-panel > .tournament-builder,
.prediction-panel > .extra-picks,
.prediction-panel > .phase-hint,
.prediction-panel > .published-picks {
  margin-left: 0;
  margin-right: 0;
}

.phase-hint {
  margin-top: 8px;
  padding: 8px 10px;
  font-size: 0.82rem;
}

.extra-picks {
  padding: 14px;
}

.extra-picks-form {
  gap: 10px;
}

.published-picks {
  gap: 8px;
  margin-top: 10px;
  padding: 12px;
}

.published-picks > .section-heading {
  margin-bottom: 0;
}

.published-picks-list {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px;
}

.published-pick-card {
  gap: 6px;
  padding: 10px;
}

.published-pick-card p {
  font-size: 0.84rem;
}

.published-pick-card span {
  padding: 5px 7px;
  font-size: 0.74rem;
}

body[data-screen="reglas"] .app-view > .two-column:not(.participant-meta) {
  display: block;
}

.rules-shell {
  gap: 8px;
  padding-bottom: 12px;
}

.rules-hero {
  padding: 12px 16px;
  border-radius: 8px 8px 0 0;
}

.rules-hero p {
  margin-top: 3px;
  font-size: 0.9rem;
}

.rules-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 0 12px;
}

.published-picks {
  gap: 10px;
  padding: 14px;
}

.published-picks-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 8px;
}

.published-pick-card {
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(0, 92, 132, 0.16);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 251, 252, 0.94));
  box-shadow: 0 8px 18px rgba(13, 34, 52, 0.05);
}

.published-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.published-card-head > strong {
  min-width: 0;
  color: var(--ink);
  font-size: 0.92rem;
  overflow-wrap: anywhere;
}

.published-pick-card .published-card-head > span {
  display: inline-flex;
  flex: 0 0 auto;
  padding: 5px 8px;
  border: 1px solid rgba(0, 114, 92, 0.18);
  border-radius: 999px;
  background: rgba(221, 246, 233, 0.78);
  color: var(--green);
  font-size: 0.72rem;
  font-weight: 900;
}

.published-pick-card.incomplete .published-card-head > span {
  border-color: rgba(204, 120, 0, 0.22);
  background: rgba(255, 244, 224, 0.82);
  color: #a25500;
}

.published-pick-card > .published-key-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}

.published-key-item {
  min-width: 0;
  padding: 6px 7px;
  border: 1px solid rgba(113, 135, 158, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
}

.published-key-item.wide {
  grid-column: 1 / -1;
}

.published-key-item small,
.published-chip-section > small {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 950;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.published-key-item > div {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  min-height: 24px;
  color: var(--ink);
  font-weight: 900;
  font-size: 0.82rem;
}

.published-chip-section {
  display: grid;
  gap: 5px;
}

.published-chip-row,
.published-round-line > div {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.published-team-chip {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  padding: 3px 5px;
  border: 1px solid rgba(0, 92, 132, 0.12);
  border-radius: 999px;
  background: rgba(232, 243, 247, 0.76);
}

.published-team-token {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: 3px;
  color: var(--ink);
  font-size: 0.76rem;
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
}

.published-team-token .flag-shell,
.published-team-token .flag {
  flex: 0 0 auto;
}

.published-team-token .flag-shell.compact,
.published-team-token .flag-shell.compact .flag,
.published-team-token > .flag {
  width: 20px;
  height: 14px;
}

.published-team-token strong {
  min-width: 0;
}

.published-pick-card .team-identity,
.published-pick-card .team-identity span,
.published-pick-card .flag-shell,
.published-pick-card .flag,
.published-pick-card .team-copy,
.published-pick-card .published-empty,
.published-pick-card .published-vs,
.published-pick-card .published-team-token {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.published-pick-card .team-identity {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 900;
}

.published-pick-card .team-copy {
  display: grid;
  min-width: 0;
  line-height: 1.05;
}

.published-pick-card .team-copy strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.published-pick-card .team-copy small {
  margin: 0;
  color: var(--muted);
  font-size: 0.65rem;
}

.published-pick-card .flag-shell,
.published-pick-card .flag {
  flex: 0 0 auto;
}

.published-pick-card .published-team-token .flag-shell.compact,
.published-pick-card .published-team-token .flag {
  border: 1px solid rgba(24, 32, 51, 0.12);
  border-radius: 4px;
  background: #fff;
}

.published-row .published-team-token .flag-shell.compact,
.published-row .published-team-token .flag {
  width: 18px;
  height: 13px;
  border: 1px solid rgba(24, 32, 51, 0.1);
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.72);
}

.published-row .published-team-token .flag-fallback {
  color: transparent;
  font-size: 0;
}

.published-pick-card .published-empty {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.published-vs {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 950;
  text-transform: uppercase;
}

.published-details {
  border-top: 1px solid rgba(113, 135, 158, 0.18);
  padding-top: 8px;
}

.published-details summary {
  cursor: pointer;
  color: var(--blue);
  font-size: 0.84rem;
  font-weight: 950;
}

.published-detail-stack {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.published-detail-stack h4 {
  margin: 0 0 6px;
  color: var(--ink);
  font-size: 0.86rem;
}

.published-group-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(126px, 1fr));
  gap: 5px;
}

.published-group-line,
.published-round-line {
  min-width: 0;
  padding: 6px;
  border: 1px solid rgba(113, 135, 158, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.64);
}

.published-group-line > strong,
.published-round-line > strong {
  display: block;
  margin-bottom: 4px;
  color: var(--blue);
  font-size: 0.72rem;
}

.published-group-line > div {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.published-round-grid {
  display: grid;
  gap: 6px;
}

.published-empty-line {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 800;
}

.published-picks-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
}

.published-row {
  border: 1px solid rgba(0, 92, 132, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 6px 14px rgba(13, 34, 52, 0.04);
}

.published-row[open] {
  background: rgba(250, 253, 254, 0.96);
  border-color: rgba(0, 92, 132, 0.22);
}

.published-row-summary {
  display: grid;
  grid-template-columns: minmax(110px, 0.95fr) minmax(112px, 1fr) minmax(72px, 0.7fr) minmax(72px, 0.7fr) minmax(140px, 1.15fr) minmax(210px, 1.55fr) 74px;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 6px 9px;
  cursor: pointer;
  list-style: none;
}

.published-row-summary::-webkit-details-marker {
  display: none;
}

.published-row-summary > span {
  min-width: 0;
}

.published-row-player {
  display: grid;
  gap: 1px;
}

.published-row-player strong {
  min-width: 0;
  color: var(--ink);
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}

.published-row-player small {
  width: fit-content;
  padding: 2px 6px;
  border: 1px solid rgba(204, 120, 0, 0.22);
  border-radius: 999px;
  background: rgba(255, 244, 224, 0.82);
  color: #a25500;
  font-size: 0.62rem;
  font-weight: 950;
}

.published-row.complete .published-row-player small {
  border-color: rgba(0, 114, 92, 0.18);
  background: rgba(221, 246, 233, 0.78);
  color: var(--green);
}

.published-mini-item {
  display: grid;
  gap: 2px;
  min-width: 0;
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 900;
}

.published-round-summary .published-mini-item > .published-team-chip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px;
  padding: 0;
  border: 0;
  background: transparent;
}

.published-round-summary .published-mini-item > .published-team-chip .published-team-token {
  min-width: 0;
  padding: 2px 5px;
  border: 1px solid rgba(0, 92, 132, 0.12);
  border-radius: 999px;
  background: rgba(232, 243, 247, 0.76);
}

.published-mini-item small,
.published-row-thirds > small {
  color: var(--muted);
  font-size: 0.58rem;
  font-weight: 950;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.published-mini-item > .published-team-token,
.published-mini-item > .published-empty {
  min-height: 18px;
}

.published-row-thirds,
.published-round-summary,
.published-extra-list {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.published-round-summary {
  display: grid;
  grid-template-columns: 1fr;
}

.published-row-thirds {
  flex-wrap: wrap;
}

.published-row-thirds > small {
  width: 100%;
}

.published-extra-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.published-row-action {
  justify-self: end;
  color: var(--blue);
  font-size: 0.74rem;
  font-weight: 950;
}

.published-row[open] .published-row-action {
  color: var(--muted);
}

.published-row-detail {
  padding: 8px 10px 10px;
  border-top: 1px solid rgba(113, 135, 158, 0.16);
  background: rgba(245, 250, 252, 0.74);
}

.published-row-detail .published-detail-stack {
  gap: 8px;
}

.published-row-detail h4 {
  font-size: 0.8rem;
}

.published-row-detail .published-group-grid {
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
}

.published-row-detail .published-round-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 680px) {
  .published-picks-list,
  .published-pick-card > .published-key-grid {
    grid-template-columns: 1fr;
  }

  .published-card-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .published-row-summary {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 8px;
  }

  .published-row-action {
    justify-self: start;
  }

  .published-extra-list {
    grid-template-columns: 1fr;
  }

  .published-round-summary {
    grid-template-columns: 1fr;
  }

  .published-row-detail .published-round-grid {
    grid-template-columns: 1fr;
  }
}

.rule-card {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: start;
  min-height: 0;
  gap: 4px 10px;
  padding: 10px;
}

.rule-card > span {
  grid-row: 1 / span 2;
  width: 30px;
  height: 30px;
}

.rule-card strong {
  align-self: end;
}

.rule-card p {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.28;
}

.rules-detail-compact {
  padding: 0 12px;
}

.rules-detail section {
  padding: 10px 12px;
}

.rules-detail h3 {
  margin-bottom: 6px;
  font-size: 1rem;
}

.rules-list {
  display: grid;
  gap: 4px;
  margin: 0;
  padding-left: 18px;
  font-size: 0.9rem;
  line-height: 1.32;
}

.ranking-summary {
  gap: 8px;
  margin-bottom: 8px;
}

.ranking-self {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 10px 12px;
  border-radius: 8px;
}

.ranking-self div {
  gap: 0;
}

.ranking-self span {
  font-size: 0.72rem;
  text-transform: uppercase;
}

.ranking-self strong {
  font-size: 1.12rem;
}

.ranking-breakdown {
  gap: 6px;
}

.ranking-phase-summary {
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 5px;
}

.ranking-phase-summary span {
  min-height: 34px;
  padding: 5px;
}

.ranking-phase-summary small {
  font-size: 0.58rem;
}

.ranking-phase-summary strong {
  font-size: 0.92rem;
}

.ranking-board {
  gap: 5px;
}

.ranking-table-head {
  min-height: 28px;
  padding: 0 9px;
  font-size: 0.66rem;
}

.ranking-list {
  gap: 5px;
}

.ranking-list li {
  min-height: 42px;
  padding: 6px 9px;
}

.rank-number {
  width: 30px;
  height: 30px;
}

.ranking-score-cell,
.points {
  min-height: 28px;
}

.ranking-score-cell {
  font-size: 0.88rem;
}

.points {
  font-size: 0.95rem;
}

@media (max-width: 900px) {
  .rules-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ranking-phase-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .prediction-panel > .section-heading,
  .home-card {
    align-items: stretch;
    grid-template-columns: 1fr;
    flex-direction: column;
  }

  .phase-cta,
  .home-card-meta {
    justify-content: flex-start;
  }

  .rules-grid {
    grid-template-columns: 1fr;
  }

  .ranking-self {
    grid-template-columns: 1fr 1fr 1fr;
  }
}