*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Inter',system-ui,sans-serif;background:#f0f2f5;color:#1a1a2e;font-size:17px;line-height:1.6}
a{text-decoration:none;color:inherit}

/* ===== NAVBAR ===== */
.navbar{background:#37003c;padding:0 28px;display:flex;align-items:center;justify-content:space-between;height:60px;box-shadow:0 2px 12px rgba(0,0,0,.2)}
.navbar .logo{display:flex;align-items:center;gap:10px;color:#fff;font-weight:800;font-size:18px}
.navbar .logo img{height:36px}
.navbar .user-area{display:flex;align-items:center;gap:14px;color:#fff;font-size:14px}
.btn-out{background:rgba(255,255,255,.15);color:#fff;border:none;padding:7px 16px;border-radius:8px;cursor:pointer;font-size:13px;font-weight:600;transition:.2s;font-family:inherit}
.btn-out:hover{background:rgba(255,255,255,.3)}

/* ===== TABS ===== */
.tab-bar{background:#fff;border-bottom:2px solid #ece0f0;display:flex;gap:0;padding:0 28px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.tab-btn{padding:15px 22px;font-size:15px;font-weight:600;color:#777;border:none;background:none;cursor:pointer;border-bottom:3px solid transparent;transition:.2s;white-space:nowrap;font-family:inherit}
.tab-btn:hover{color:#37003c}
.tab-btn.active{color:#37003c;border-bottom-color:#37003c}

.container{max-width:960px;margin:0 auto;padding:24px 16px}
.section{display:none}
.section.active{display:block}

/* ===== LOGIN ===== */
.login-overlay{
  position:fixed;inset:0;
  background-color:#37003c;
  background-image:url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 20.5V18H0v-2h20v-2.5L22.5 11 25 13.5V16h15v2H25v2.5L22.5 23 20 20.5zM0 38h20v-2.5L22.5 33 25 35.5V38h15v2H25v2.5L22.5 45 20 42.5V40H0v-2zm0-20h20v-2.5L22.5 13 25 15.5V18h15v2H25v2.5L22.5 25 20 22.5V20H0v-2z' fill='%23d4a843' fill-opacity='0.08' fill-rule='evenodd'/%3E%3C/svg%3E"),linear-gradient(135deg,#37003c 0%,#1a0a2e 100%);
  display:flex;align-items:center;justify-content:center;z-index:9999;padding:20px
}
.login-card{background:#fff;border-radius:24px;padding:44px 36px 36px;width:100%;max-width:400px;box-shadow:0 24px 64px rgba(0,0,0,.35);text-align:center}
.login-card .emblem{width:120px;height:auto;margin-bottom:16px}
.login-card h1{font-size:24px;font-weight:900;color:#37003c;margin-bottom:2px}
.login-card .sub{color:#999;font-size:13px;margin-bottom:28px}
.fg{text-align:left;margin-bottom:16px}
.fg label{display:block;font-size:12px;font-weight:700;color:#555;margin-bottom:5px;text-transform:uppercase;letter-spacing:.4px}
.fg input{width:100%;padding:13px 14px;border:2px solid #e0e0e0;border-radius:10px;font-size:15px;font-family:inherit;outline:none;transition:.2s}
.fg input:focus{border-color:#37003c;box-shadow:0 0 0 3px rgba(55,0,60,.08)}
.btn-go{width:100%;padding:14px;background:linear-gradient(135deg,#37003c,#5a1065);color:#fff;border:none;border-radius:12px;font-size:16px;font-weight:700;cursor:pointer;transition:.2s;font-family:inherit;margin-top:6px}
.btn-go:hover{opacity:.9;transform:translateY(-1px)}
.toggle-link{margin-top:18px;font-size:13px;color:#999}
.toggle-link span{color:#37003c;font-weight:700;cursor:pointer}
.toggle-link span:hover{text-decoration:underline}
.err-msg{color:#e53935;font-size:13px;margin-top:8px;min-height:18px}

/* ===== FLAGS ===== */
.flag-circle{width:48px;height:48px;border-radius:50%;object-fit:cover;box-shadow:0 2px 8px rgba(0,0,0,.15);flex-shrink:0;background:#eee;display:inline-flex;align-items:center;justify-content:center}
.flag-sm{width:32px;height:32px;border-radius:50%;object-fit:cover;box-shadow:0 1px 4px rgba(0,0,0,.12);background:#eee;display:inline-flex;align-items:center;justify-content:center}
.flag-lg{width:56px;height:56px;border-radius:50%;object-fit:cover;box-shadow:0 3px 10px rgba(0,0,0,.18);flex-shrink:0;background:#eee;display:inline-flex;align-items:center;justify-content:center}
.tbd-flag{background:#e0e0e0;color:#888;font-size:12px;font-weight:700;letter-spacing:.5px}

/* ===== SECTION TITLE / MATCH HEADER ===== */
.s-title{font-size:24px;font-weight:800;color:#1a1a2e;margin-bottom:18px;display:flex;align-items:center;gap:10px}
.s-title svg{width:26px;height:26px;color:#37003c;flex-shrink:0}
.match-header{background:linear-gradient(135deg,#37003c,#5a1065);color:#fff;padding:18px 22px;border-radius:14px;margin-bottom:18px}
.match-header h2{font-size:20px;font-weight:800}
.match-header p{font-size:13px;opacity:.7;margin-top:3px}

/* ===== FILTERS ===== */
.filters{display:flex;gap:8px;margin-bottom:18px;overflow-x:auto;padding-bottom:6px;-webkit-overflow-scrolling:touch}
.fbtn{padding:8px 18px;border-radius:20px;border:2px solid #ddd;background:#fff;font-size:13px;font-weight:600;cursor:pointer;transition:.2s;font-family:inherit;white-space:nowrap;flex-shrink:0}
.fbtn:hover,.fbtn.on{border-color:#37003c;background:#37003c;color:#fff}

/* ===== MATCH CARDS (MAIN LIST) ===== */
.day-label{font-size:13px;font-weight:700;color:#37003c;text-transform:uppercase;letter-spacing:.5px;margin:22px 0 10px;padding-bottom:6px;border-bottom:2px solid #ece0f0}
.mc{background:#fff;border-radius:14px;padding:18px 20px;margin-bottom:14px;box-shadow:0 2px 10px rgba(0,0,0,.05);border-left:4px solid #37003c;transition:.2s}
.mc.tbd-card{border-left-color:#ccc;opacity:.8}
.mc.predicted{background:#f8f5ff;border-left-color:#7c4dff}
.mc.completed{border-left-color:#27ae60}
.mc.no-pred{border-left-color:#9e9e9e}
.mc:hover{box-shadow:0 4px 18px rgba(0,0,0,.09)}
.mc-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.mc-time{font-size:13px;font-weight:600;color:#888;display:flex;align-items:center;gap:5px}
.mc-time svg{width:14px;height:14px}

.badge-s{font-size:11px;font-weight:700;padding:3px 10px;border-radius:12px;display:inline-flex;align-items:center;gap:4px}
.badge-s svg{width:12px;height:12px}
.b-open{background:#e8f5e9;color:#2e7d32}
.b-pred{background:#ede7f6;color:#5e35b1}
.b-lock{background:#fce4ec;color:#c62828}

.btn-edit{background:none;border:1px solid #ccc;color:#555;padding:2px 10px;border-radius:10px;font-size:11px;font-weight:700;cursor:pointer;transition:.15s;font-family:inherit;display:inline-flex;align-items:center;gap:3px}
.btn-edit svg{width:11px;height:11px}
.btn-edit:hover{border-color:#37003c;color:#37003c;background:#f8f6fa}

.ko-tag{display:inline-block;font-size:10px;font-weight:700;padding:2px 7px;border-radius:6px;margin-left:6px;vertical-align:middle}
.ko-tag-et{background:#fff3e0;color:#e65100}
.ko-tag-pen{background:#fce4ec;color:#c62828}
.pen-score-small{font-size:14px;font-weight:700;color:#888}

.teams-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:14px}
.team-side{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.team-side.right{flex-direction:row-reverse;text-align:right}
.team-name{font-size:18px;font-weight:700;color:#1a1a2e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vs-label{font-size:14px;font-weight:800;color:#bbb;flex-shrink:0;padding:0 6px}

.inline-ctrl{display:flex;align-items:center;background:#f8f6fa;padding:6px 10px;border-radius:30px;border:1px solid #ece0f0;gap:8px;flex-shrink:0}
.inline-ctrl button{width:32px;height:32px;border-radius:50%;border:none;background:#fff;color:#37003c;font-size:18px;font-weight:800;cursor:pointer;box-shadow:0 2px 4px rgba(0,0,0,.05);display:flex;align-items:center;justify-content:center;transition:.1s}
.inline-ctrl button:active{transform:scale(.9)}
.inline-ctrl .inline-val{font-size:20px;font-weight:900;color:#37003c;width:24px;text-align:center;line-height:1}

.mc-action-bar{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:12px;padding-top:12px;border-top:1px dashed #ece0f0}
.btn-confirm{padding:10px 28px;background:#37003c;color:#fff;border:none;border-radius:10px;font-size:14px;font-weight:700;cursor:pointer;transition:.2s;font-family:inherit;width:100%;max-width:300px}
.btn-confirm:hover{background:#5a1065}

.ko-extras{display:flex;align-items:center;gap:16px;justify-content:center;flex-wrap:wrap}
.ko-chk{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:#555}
.ko-chk input[type=checkbox]{width:18px;height:18px;accent-color:#37003c}
.pen-row{display:none;align-items:center;gap:10px;margin-top:8px;background:#f8f6fa;padding:8px 16px;border-radius:12px;border:1px solid #ece0f0;flex-wrap:wrap;justify-content:center}
.pen-row.show{display:flex}

.pred-locked{padding:12px 16px;background:#f0faf0;border-radius:10px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}
.pred-score-display{font-size:22px;font-weight:900;color:#37003c}
.pred-pts{font-size:13px;font-weight:700;padding:4px 10px;border-radius:8px}
.pts-green{background:#e8f5e9;color:#2e7d32}
.pts-zero{background:#fce4ec;color:#c62828}

.completed-toggle{padding:12px 20px;background:#fff;border-radius:12px;cursor:pointer;font-size:15px;font-weight:600;color:#37003c;display:flex;align-items:center;gap:8px;box-shadow:0 2px 8px rgba(0,0,0,.05);margin-top:8px;border:none;width:100%;text-align:left;font-family:inherit;transition:.2s}
.completed-toggle:hover{background:#f8f6fa}
.completed-toggle svg{width:18px;height:18px;transition:.3s}
.completed-toggle.open svg{transform:rotate(180deg)}
.completed-list{display:none}
.completed-list.show{display:block}

/* ===== GROUPS ===== */
.groups-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.g-card{background:#fff;border-radius:14px;padding:18px;box-shadow:0 2px 10px rgba(0,0,0,.05);border:1px solid #f0e6f6;transition:.2s}
.g-card:hover{box-shadow:0 5px 20px rgba(0,0,0,.08);transform:translateY(-2px)}
.g-head{font-size:16px;font-weight:800;color:#37003c;margin-bottom:12px;padding-bottom:8px;border-bottom:2px solid #f0e6f6;display:flex;align-items:center;gap:8px}
.g-badge{background:#37003c;color:#fff;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0}
.g-team{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid #f8f8f8}
.g-team:last-child{border-bottom:none}
.g-team span{font-size:15px;font-weight:500}

/* ===== LEADERBOARD ===== */
.lb{width:100%;border-collapse:collapse;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,.05)}
.lb thead{background:#37003c;color:#fff}
.lb th{padding:13px 16px;text-align:left;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.lb td{padding:13px 16px;border-bottom:1px solid #f0f0f0;font-size:15px}
.lb tr:hover{background:#faf8fb}
.lb .hl{background:#f0e6f6 !important}
.rank-num{font-weight:800;font-size:17px}
.medal{width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;color:#fff}
.m-gold{background:#d4a843}
.m-silver{background:#a0a0a0}
.m-bronze{background:#cd7f32}
.lb .pts-col{font-weight:800;color:#37003c;font-size:17px}
.trend-up{color:#2e7d32;font-weight:700;font-size:13px}
.trend-down{color:#c62828;font-weight:700;font-size:13px}
.trend-same{color:#999;font-weight:700;font-size:13px}

/* ===== LIVE / RESULTS ===== */
.live-card{background:#fff;border-radius:14px;padding:18px 20px;margin-bottom:12px;box-shadow:0 2px 10px rgba(0,0,0,.05)}
.live-card.is-live{border-left:4px solid #e53935}
.live-card.is-ft{border-left:4px solid #37003c}
.live-badge{font-size:11px;font-weight:700;padding:3px 10px;border-radius:10px;display:inline-block;margin-bottom:10px}
.lb-live{background:#e53935;color:#fff}
.lb-ft{background:#37003c;color:#fff}
.pulse{animation:pulse 1.5s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
.live-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.live-team{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
.live-team.right{flex-direction:row-reverse;text-align:right}
.live-tname{font-size:16px;font-weight:700}
.live-score{font-size:28px;font-weight:900;color:#1a1a2e;flex-shrink:0;padding:0 10px}

/* ===== RULES ===== */
.rules-card{background:#fff;border-radius:14px;padding:28px;box-shadow:0 2px 10px rgba(0,0,0,.05)}
.rule{display:flex;align-items:flex-start;gap:14px;padding:14px 0;border-bottom:1px solid #f0f0f0}
.rule:last-child{border-bottom:none}
.rule-icon{width:44px;height:44px;background:#f0e6f6;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.rule-icon svg{width:22px;height:22px;color:#37003c}
.rule-pts{font-size:22px;font-weight:900;color:#37003c}
.rule-title{font-size:15px;font-weight:700;color:#1a1a2e}
.rule-desc{font-size:14px;color:#666;margin-top:2px}

.pts-table{width:100%;border-collapse:collapse;margin:16px 0;font-size:14px}
.pts-table th{background:#37003c;color:#fff;padding:10px 14px;text-align:left;font-size:12px;font-weight:700;text-transform:uppercase}
.pts-table td{padding:10px 14px;border-bottom:1px solid #f0f0f0}
.pts-table tr:hover{background:#faf8fb}
.pts-table .pts-val{font-weight:800;color:#37003c;font-size:16px}
.eg-card{background:#f8f6fa;border-radius:10px;padding:14px 16px;margin:8px 0;border-left:3px solid #37003c}
.eg-card .eg-title{font-size:13px;font-weight:700;color:#37003c;margin-bottom:4px}
.eg-card .eg-detail{font-size:13px;color:#555}
.eg-card .eg-pts{font-size:15px;font-weight:800;color:#2e7d32;margin-top:4px}

/* =========================================================
   ===== TWO-WAY KNOCKOUT BRACKET (CONNECTED TREE v4) =====
   ========================================================= */

/* === HEADERS (Absolutely positioned inside columns for perfect alignment) === */
.b-col-header {
  position:absolute;top:-42px;left:18px;right:18px; /* Snaps exactly to match card width */
  font-size:11px;font-weight:900;color:#37003c;
  text-transform:uppercase;letter-spacing:1.2px;
  padding:10px 4px;text-align:center;
  background:linear-gradient(180deg,#fff 0%,#faf5fc 100%);
  border:1px solid #ece0f0;border-radius:8px;
  box-shadow:0 2px 4px rgba(0,0,0,.05);
  line-height:1.2;
}
.b-center-header {
  position:absolute;top:-42px;left:14px;right:14px;
  font-size:12px;font-weight:900;color:#d4a843;
  text-transform:uppercase;letter-spacing:1.5px;
  padding:10px 4px;text-align:center;
  background:linear-gradient(180deg,#fffbe6 0%,#fff 100%);
  border:1.5px solid #d4a843;border-radius:8px;
  box-shadow:0 2px 6px rgba(212,168,67,.2);
  box-sizing:border-box;
}

/* === BRACKET LAYOUT === */
.bracket-layout{
  display:flex;justify-content:center;width:100%;gap:0;
  padding:45px 0 30px; /* Space added at top for absolute headers */
}
.b-wing{display:flex;flex:1}
.b-left{flex-direction:row}
.b-right{flex-direction:row}

.b-center{
  display:flex;flex-direction:column;
  justify-content:center;align-items:center;
  flex:0 0 200px;
  padding:0 14px;gap:14px;
  position:relative; /* Anchor for center header */
}

.b-col{
  display:flex;flex-direction:column;
  justify-content:space-around;
  flex:1;
  position:relative; /* Anchor for column headers */
}

.b-right .bm-team{flex-direction:row-reverse;text-align:right}
.b-right .bm-score{text-align:left}

/* === CONNECTOR LINES === */
.match-wrapper{
  display:flex;flex-direction:column;justify-content:center;
  flex:1;position:relative;padding:6px 18px;
}

/* FIX: Because the header is now the 1st child, the first match is nth-child(2) [EVEN]. 
   We swap odd/even here so the top/bottom brackets draw in the correct direction. */
.b-left .b-col:not(:last-child) .match-wrapper:nth-child(even)::after{
  content:'';position:absolute;top:50%;right:0;width:18px;height:50%;
  border-top:2px solid #c9b6ce;border-right:2px solid #c9b6ce;border-radius:0 4px 0 0;
}
.b-left .b-col:not(:last-child) .match-wrapper:nth-child(odd)::after{
  content:'';position:absolute;bottom:50%;right:0;width:18px;height:50%;
  border-bottom:2px solid #c9b6ce;border-right:2px solid #c9b6ce;border-radius:0 0 4px 0;
}
.b-left .b-col:not(:first-child) .match-wrapper::before{
  content:'';position:absolute;top:50%;left:0;width:18px;border-top:2px solid #c9b6ce;
}

/* Right side connectors */
.b-right .b-col:not(:first-child) .match-wrapper:nth-child(even)::after{
  content:'';position:absolute;top:50%;left:0;width:18px;height:50%;
  border-top:2px solid #c9b6ce;border-left:2px solid #c9b6ce;border-radius:4px 0 0 0;
}
.b-right .b-col:not(:first-child) .match-wrapper:nth-child(odd)::after{
  content:'';position:absolute;bottom:50%;left:0;width:18px;height:50%;
  border-bottom:2px solid #c9b6ce;border-left:2px solid #c9b6ce;border-radius:0 0 0 4px;
}
.b-right .b-col:not(:last-child) .match-wrapper::before{
  content:'';position:absolute;top:50%;right:0;width:18px;border-top:2px solid #c9b6ce;
}

/* Connections to the Final */
.b-left .b-col:last-child .match-wrapper::after{
  content:'';position:absolute;top:50%;
  right:-14px; 
  width:32px; 
  border-top:2px solid #c9b6ce;
}
.b-right .b-col:first-child .match-wrapper::after{
  content:'';position:absolute;top:50%;
  left:-14px; 
  width:32px; 
  border-top:2px solid #c9b6ce;
}

/* === MATCH CARDS === */
.bracket-match{
  background:#fff;border-radius:10px;padding:10px 12px;
  box-shadow:0 2px 8px rgba(0,0,0,.07);
  border:1px solid #f0e6f6;
  transition:.2s;position:relative;
  font-size:14px;min-width:0;
}
.bracket-match:hover{box-shadow:0 5px 14px rgba(0,0,0,.12);border-color:#37003c}
.bracket-match.bm-live{border:2px solid #e53935;animation:pulse 1.5s infinite}
.bracket-match.bm-done{border-color:#27ae60}
.bracket-match.placeholder{background:#f8f6fa;border:1px dashed #ddd;box-shadow:none;opacity:.65}
.bracket-match.bm-projected{background:#fbf8fd;border:1.5px dashed #b794c4;opacity:.92}

.bm-status{
  font-size:10px;font-weight:800;color:#999;
  text-transform:uppercase;margin-bottom:5px;
  letter-spacing:.5px;text-align:center;
}
.bm-status-live{color:#e53935}
.bm-status-proj{color:#9c6db5}

.bm-team{display:flex;align-items:center;gap:9px;padding:4px 0}
.bm-team .bm-flag{width:24px;height:24px;flex-shrink:0}
.bm-team .bm-flag img,.bm-team .bm-flag div{width:24px !important;height:24px !important;font-size:9px}
.bm-team .bm-name{
  flex:1;font-weight:600;color:#1a1a2e;font-size:13px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.bm-team .bm-score{font-size:16px;font-weight:900;color:#37003c;min-width:18px;text-align:right}
.bm-team.bm-winner .bm-name,.bm-team.bm-winner .bm-score{color:#27ae60}
.bm-team.bm-loser{opacity:.5}

.ko-pen-score{font-size:11px;color:#888;font-weight:700;margin-left:2px}

.b-final-label{
  font-size:14px;font-weight:900;color:#d4a843;
  text-transform:uppercase;letter-spacing:1.5px;
  text-align:center;margin-bottom:6px;
}
.b-bronze-label{
  font-size:12px;font-weight:800;color:#cd7f32;
  text-transform:uppercase;letter-spacing:1px;
  text-align:center;margin-bottom:6px;
}

/* === CHAMPION TROPHY === */
.b-champion{
  display:flex;flex-direction:column;align-items:center;
  padding:14px 12px 12px;
  background:linear-gradient(180deg,#fffbe6 0%,#fff 100%);
  border:2px solid #d4a843;border-radius:14px;
  box-shadow:0 6px 18px rgba(212,168,67,.25);
  width:100%;box-sizing:border-box;
}
.b-champion.b-champion-won{
  background:linear-gradient(180deg,#fff4c2 0%,#fffbe6 100%);
  box-shadow:0 8px 24px rgba(212,168,67,.45);
}
.b-trophy-img{
  width:60px;height:auto;display:block;
  filter:drop-shadow(0 4px 8px rgba(212,168,67,.5));
  animation:trophyFloat 2.8s ease-in-out infinite;
}
.b-champion-label{
  font-size:10px;font-weight:900;color:#d4a843;
  text-transform:uppercase;letter-spacing:2px;margin-top:8px;
}
.b-champion-flag{margin-top:6px}
.b-champion-flag img,.b-champion-flag div{width:28px !important;height:28px !important}
.b-champion-name{
  font-size:15px;font-weight:800;color:#37003c;
  margin-top:4px;text-align:center;
}
@keyframes trophyFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-4px)}
}

/* === FINAL CARD (PROMINENT) === */
.b-final-wrap{width:100%;position:relative}
.b-final-wrap .match-wrapper {
  padding-left:0;padding-right:0; /* Forces card to span full width to meet connecting lines */
}
.b-final-wrap .bracket-match{
  padding:14px 16px;
  border:2px solid #37003c;
  box-shadow:0 6px 20px rgba(55,0,60,.2);
  background:linear-gradient(180deg,#fff 0%,#faf5fc 100%);
}
.b-final-wrap .bm-team{padding:6px 0}
.b-final-wrap .bm-team .bm-flag,
.b-final-wrap .bm-team .bm-flag img,
.b-final-wrap .bm-team .bm-flag div{width:30px !important;height:30px !important}
.b-final-wrap .bm-name{font-size:15px;font-weight:700}
.b-final-wrap .bm-score{font-size:20px}

/* === 3RD PLACE === */
.b-bronze-wrap{
  width:100%;margin-top:20px;
  padding-top:18px;
  border-top:2px dashed #e0d4e6;
}
.b-bronze-wrap .bracket-match{
  border:1.5px solid #cd7f32;
  background:linear-gradient(180deg,#fff 0%,#fdf6ef 100%);
  box-shadow:0 3px 10px rgba(205,127,50,.18);
}

/* === GOAL TICKER === */
.goal-ticker{
  background:linear-gradient(90deg,#37003c 0%,#5a1065 100%);
  border-radius:12px;padding:10px 14px;margin-bottom:14px;
  display:flex;align-items:center;gap:14px;
  overflow:hidden;
  box-shadow:0 3px 10px rgba(55,0,60,.15);
}
.gt-label{
  font-size:11px;font-weight:900;color:#d4a843;
  text-transform:uppercase;letter-spacing:1px;
  flex-shrink:0;padding-right:12px;
  border-right:1px solid rgba(255,255,255,.2);
}
.gt-track{
  display:flex;gap:22px;overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  color:#fff;font-size:13px;font-weight:600;
}
.gt-track::-webkit-scrollbar{height:4px}
.gt-track::-webkit-scrollbar-thumb{background:rgba(255,255,255,.3);border-radius:2px}
.gt-item{white-space:nowrap}
.gt-item b{color:#d4a843;font-weight:900;font-size:14px;padding:0 4px}
.gt-pen{color:#ffd966;font-size:11px;font-weight:700}

/* === BRACKET MOBILE === */
@media(max-width:768px){
  .bracket-layout{padding:35px 0 10px}
  .b-col-header{
    top:-30px;left:7px;right:7px; /* Matches mobile card padding */
    font-size:8px;padding:5px 2px;
  }
  .b-center-header{
    top:-30px;left:6px;right:6px;
    font-size:9px;padding:5px 2px;
  }
  .b-center{flex:0 0 100px;gap:10px;padding:0 6px}
  .bm-name{display:none !important}
  .bracket-match{padding:6px;border-radius:6px}
  .bm-team{gap:5px;justify-content:center}
  .bm-team .bm-flag,
  .bm-team .bm-flag img,
  .bm-team .bm-flag div{width:18px !important;height:18px !important}
  .bm-score{font-size:13px}
  .ko-pen-score{font-size:9px}
  .bm-status{font-size:8px;margin-bottom:3px}
  .b-right .bm-team{flex-direction:row;text-align:center}
  .b-final-label{font-size:10px;letter-spacing:.5px}
  .b-bronze-label{font-size:9px}
  .b-trophy-img{width:42px}
  .b-champion{padding:10px 6px 8px}
  .b-champion-label{font-size:8px;letter-spacing:1px}
  .b-champion-name{font-size:11px}
  .b-champion-flag img,.b-champion-flag div{width:20px !important;height:20px !important}
  .b-final-wrap .bracket-match{padding:6px}
  .b-final-wrap .bm-team .bm-flag,
  .b-final-wrap .bm-team .bm-flag img,
  .b-final-wrap .bm-team .bm-flag div{width:20px !important;height:20px !important}
  .b-final-wrap .bm-score{font-size:13px}
  .b-bronze-wrap{margin-top:12px;padding-top:10px}
  .match-wrapper{padding:3px 7px}
  .b-left .b-col:not(:last-child) .match-wrapper:nth-child(odd)::after,
  .b-left .b-col:not(:last-child) .match-wrapper:nth-child(even)::after{width:7px}
  .b-left .b-col:not(:first-child) .match-wrapper::before{width:7px}
  .b-left .b-col:last-child .match-wrapper::after{right:-6px;width:13px}
  .b-right .b-col:not(:first-child) .match-wrapper:nth-child(odd)::after,
  .b-right .b-col:not(:first-child) .match-wrapper:nth-child(even)::after{width:7px}
  .b-right .b-col:not(:last-child) .match-wrapper::before{width:7px}
  .b-right .b-col:first-child .match-wrapper::after{left:-6px;width:13px}
  .goal-ticker{padding:7px 10px;gap:8px}
  .gt-label{font-size:9px;padding-right:7px}
  .gt-track{font-size:11px;gap:14px}
  .gt-item b{font-size:12px}
}

/* ===== WEEKLY STATS ===== */
.weekly-wrap{display:flex;flex-direction:column;gap:18px}

.weekly-card{
  background:#fff;
  border-radius:14px;
  padding:18px 20px;
  box-shadow:0 2px 10px rgba(0,0,0,.05);
  border-left:4px solid #d4a843;
  transition:.2s;
}
.weekly-card:hover{box-shadow:0 4px 18px rgba(0,0,0,.09)}

.weekly-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:14px;
  padding-bottom:10px;
  border-bottom:2px solid #f0e6f6;
}
.weekly-title{font-size:18px;font-weight:800;color:#37003c}
.weekly-date{font-size:13px;color:#888;font-weight:600}

.weekly-table{
  width:100%;
  border-collapse:collapse;
  font-size:14px;
}
.weekly-table thead{
  background:#37003c;
  color:#fff;
}
.weekly-table th{
  padding:10px 12px;
  text-align:left;
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.5px;
}
.weekly-table th.right{text-align:right}
.weekly-table td{
  padding:11px 12px;
  border-bottom:1px solid #f0f0f0;
  font-size:14px;
}
.weekly-table td.right{text-align:right}
.weekly-table tr.wk-row:last-child td{border-bottom:none}
.weekly-table tr.wk-row:hover{background:#faf8fb}
.weekly-table tr.hl{background:#f0e6f6 !important}

.weekly-table .emp-col{color:#888;font-size:13px;font-family:monospace}
.weekly-table .name-col{font-weight:600;color:#1a1a2e}
.weekly-table .wk-pts{font-weight:800;color:#2e7d32;font-size:15px}
.weekly-table .wk-total{font-weight:700;color:#37003c;font-size:14px}

.you-tag{
  font-size:10px;
  background:#37003c;
  color:#fff;
  padding:2px 8px;
  border-radius:8px;
  margin-left:4px;
  font-weight:700;
}

@media(max-width:600px){
  .weekly-card{padding:14px 12px}
  .weekly-title{font-size:16px}
  .weekly-date{font-size:11px}
  .weekly-table th,
  .weekly-table td{padding:8px 6px;font-size:12px}
  .weekly-table .emp-col{font-size:11px}
  .weekly-table .wk-pts{font-size:13px}
  .weekly-table .wk-total{font-size:12px}
  .you-tag{font-size:9px;padding:1px 6px}
}

/* ===== PLAY ZONE ===== */

/* Intro text */
.pz-intro{
  color:#666;
  font-size:14px;
  margin-bottom:20px;
  padding:12px 16px;
  background:#fff;
  border-radius:10px;
  border-left:3px solid #d4a843;
}

/* Cards container */
.pz-wrap{display:flex;flex-direction:column;gap:18px}

/* Individual game card */
.pz-card{
  background:#fff;
  border-radius:16px;
  padding:22px;
  box-shadow:0 2px 12px rgba(0,0,0,.06);
  border-left:5px solid #37003c;
  transition:.25s;
  position:relative;
  overflow:hidden;
}
.pz-card:hover{
  box-shadow:0 6px 24px rgba(0,0,0,.1);
  transform:translateY(-2px);
}
.pz-card::before{
  content:'';
  position:absolute;
  top:0;right:0;
  width:120px;height:120px;
  background:radial-gradient(circle,rgba(212,168,67,.08) 0%,transparent 70%);
  pointer-events:none;
}

/* Card header */
.pz-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:8px;
  gap:10px;
}
.pz-title{
  font-size:19px;
  font-weight:800;
  color:#37003c;
  flex:1;
  min-width:0;
}

/* Status badges */
.pz-badge{
  font-size:11px;
  font-weight:800;
  padding:5px 11px;
  border-radius:12px;
  text-transform:uppercase;
  letter-spacing:.5px;
  white-space:nowrap;
  flex-shrink:0;
}
.pz-badge-open{background:#e8f5e9;color:#2e7d32}
.pz-badge-partial{background:#fff3e0;color:#e65100}
.pz-badge-done{background:#ede7f6;color:#5e35b1}
.pz-badge-locked{background:#fce4ec;color:#c62828}
.pz-badge-scored{background:#fffbe6;color:#b8860b;border:1px solid #d4a843}

/* Description */
.pz-desc{
  color:#666;
  font-size:14px;
  margin-bottom:14px;
  line-height:1.5;
}

/* Countdown */
.pz-countdown{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:#37003c;
  color:#fff;
  padding:8px 14px;
  border-radius:20px;
  font-size:13px;
  font-weight:700;
  margin-bottom:14px;
}
.pz-countdown.pz-cd-urgent{
  background:#e53935;
  animation:pulse 1.5s infinite;
}
.pz-countdown.pz-cd-locked{background:#666}

.pz-locked-info{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:#f5f5f5;
  color:#666;
  padding:8px 14px;
  border-radius:20px;
  font-size:13px;
  font-weight:600;
  margin-bottom:14px;
}

/* Scoring info */
.pz-scoring{
  background:#faf8fb;
  border-radius:10px;
  padding:12px 14px;
  margin-bottom:14px;
  border:1px solid #ece0f0;
}
.pz-score-row{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:13px;
  color:#555;
  padding:4px 0;
}
.pz-score-row strong{color:#37003c;font-size:15px}
.pz-score-icon{
  width:24px;height:24px;
  border-radius:50%;
  background:#37003c;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  font-size:13px;
  flex-shrink:0;
}
.pz-jackpot .pz-score-icon{
  background:linear-gradient(135deg,#d4a843,#f4c84e);
  color:#fff;
  box-shadow:0 2px 6px rgba(212,168,67,.4);
}
.pz-jackpot strong{color:#b8860b}

/* Your picks preview */
.pz-picks-preview{
  background:#f8f5ff;
  border-radius:10px;
  padding:14px;
  margin-bottom:14px;
  border:1px solid #ede7f6;
}
.pz-picks-label{
  font-size:11px;
  font-weight:800;
  color:#5e35b1;
  text-transform:uppercase;
  letter-spacing:.5px;
  margin-bottom:8px;
}
.pz-picks-list{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.pz-pick-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:#fff;
  border:1px solid #d1c4e9;
  border-radius:18px;
  padding:4px 10px 4px 4px;
  font-size:12px;
  font-weight:600;
  color:#37003c;
}
.pz-pick-chip .flag-sm{width:22px;height:22px}
.pz-pick-chip .tbd-flag{font-size:9px}

.pz-result-row{
  margin-top:10px;
  padding-top:10px;
  border-top:1px dashed #d1c4e9;
  font-size:13px;
  color:#555;
}
.pz-result-pts{color:#2e7d32;font-size:15px}

/* Action button */
.pz-btn{
  width:100%;
  padding:13px;
  background:linear-gradient(135deg,#37003c,#5a1065);
  color:#fff;
  border:none;
  border-radius:10px;
  font-size:14px;
  font-weight:700;
  cursor:pointer;
  transition:.2s;
  font-family:inherit;
}
.pz-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 16px rgba(55,0,60,.3);
}

/* ===== PICKER VIEW ===== */
.pz-picker{
  background:#fff;
  border-radius:16px;
  padding:20px;
  box-shadow:0 2px 12px rgba(0,0,0,.06);
  margin-bottom:80px;
}

.pz-picker-head{
  display:flex;
  align-items:center;
  gap:12px;
  padding-bottom:14px;
  border-bottom:2px solid #f0e6f6;
  margin-bottom:16px;
  flex-wrap:wrap;
}
.pz-back-btn{
  background:#f8f6fa;
  border:1px solid #ece0f0;
  color:#37003c;
  padding:7px 14px;
  border-radius:8px;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-family:inherit;
  transition:.15s;
}
.pz-back-btn:hover{background:#ede7f6}
.pz-picker-title{
  font-size:17px;
  font-weight:800;
  color:#37003c;
  flex:1;
  min-width:0;
}
.pz-picker-counter{
  background:#fce4ec;
  color:#c62828;
  padding:6px 12px;
  border-radius:14px;
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
}
.pz-counter-full{
  background:#e8f5e9;
  color:#2e7d32;
}

.pz-picker-instr{
  color:#555;
  font-size:14px;
  margin-bottom:18px;
  padding:12px 14px;
  background:#faf8fb;
  border-radius:10px;
  border-left:3px solid #d4a843;
}
.pz-picker-instr strong{color:#37003c}

/* Team grid */
.pz-team-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:12px;
  margin-bottom:20px;
}
.pz-team-card{
  background:#fff;
  border:2px solid #ece0f0;
  border-radius:14px;
  padding:14px 10px;
  text-align:center;
  cursor:pointer;
  transition:.2s;
  position:relative;
  user-select:none;
}
.pz-team-card:hover{
  border-color:#37003c;
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(0,0,0,.08);
}
.pz-team-card.pz-team-selected{
  border-color:#27ae60;
  background:linear-gradient(135deg,#e8f5e9,#fff);
  box-shadow:0 4px 16px rgba(39,174,96,.2);
}
.pz-team-flag{
  display:flex;
  justify-content:center;
  margin-bottom:8px;
}
.pz-team-flag .flag-circle{
  width:48px;
  height:48px;
}
.pz-team-name{
  font-size:13px;
  font-weight:700;
  color:#1a1a2e;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.pz-team-card.pz-team-selected .pz-team-name{color:#27ae60}

.pz-team-check{
  position:absolute;
  top:6px;
  right:6px;
  width:22px;
  height:22px;
  background:#27ae60;
  color:#fff;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 2px 6px rgba(39,174,96,.4);
}
.pz-team-check svg{width:14px;height:14px}

/* Save bar (sticky) */
.pz-save-bar{
  position:sticky;
  bottom:0;
  background:linear-gradient(180deg,rgba(255,255,255,0) 0%,#fff 30%);
  padding:20px 0 8px;
  margin-top:10px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  z-index:10;
}
.pz-save-hint{
  color:#888;
  font-size:13px;
  font-weight:600;
}
.pz-save-btn{
  padding:14px 30px;
  background:linear-gradient(135deg,#37003c,#5a1065);
  color:#fff;
  border:none;
  border-radius:12px;
  font-size:15px;
  font-weight:800;
  cursor:pointer;
  transition:.2s;
  font-family:inherit;
  width:100%;
  max-width:320px;
  box-shadow:0 4px 14px rgba(55,0,60,.25);
}
.pz-save-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(55,0,60,.35);
}
.pz-save-btn.pz-save-disabled{
  background:#ccc;
  color:#888;
  cursor:not-allowed;
  box-shadow:none;
}
.pz-save-btn.pz-save-disabled:hover{
  transform:none;
  box-shadow:none;
}

/* Mobile */
@media(max-width:600px){
  .pz-card{padding:18px 16px}
  .pz-title{font-size:17px}
  .pz-badge{font-size:10px;padding:4px 9px}
  .pz-desc{font-size:13px}
  .pz-countdown,.pz-locked-info{font-size:12px;padding:6px 12px}
  .pz-scoring{padding:10px 12px}
  .pz-score-row{font-size:12px}
  .pz-score-row strong{font-size:14px}
  .pz-score-icon{width:22px;height:22px;font-size:12px}
  .pz-picks-list{gap:5px}
  .pz-pick-chip{font-size:11px;padding:3px 8px 3px 3px}
  .pz-pick-chip .flag-sm{width:18px;height:18px}
  .pz-btn{font-size:13px;padding:12px}

  .pz-picker{padding:16px 12px}
  .pz-picker-title{font-size:15px}
  .pz-back-btn{font-size:12px;padding:6px 12px}
  .pz-picker-counter{font-size:11px;padding:5px 10px}
  .pz-picker-instr{font-size:13px;padding:10px 12px}
  .pz-team-grid{
    grid-template-columns:repeat(auto-fill,minmax(110px,1fr));
    gap:8px;
  }
  .pz-team-card{padding:10px 6px}
  .pz-team-flag .flag-circle{width:40px;height:40px}
  .pz-team-name{font-size:12px}
  .pz-team-check{width:20px;height:20px;top:4px;right:4px}
  .pz-team-check svg{width:12px;height:12px}
  .pz-save-btn{font-size:14px;padding:12px 24px}
}
@media(max-width:380px){
  .pz-team-grid{grid-template-columns:1fr 1fr}
}
/* ===== PLAY ZONE - LAYOUT WITH VISUAL ===== */

/* Two-column card layout */
.pz-card-body{
  display:flex;
  gap:18px;
  align-items:stretch;
}
.pz-card-left{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
}
.pz-card-left .pz-btn{margin-top:auto}

.pz-card-right{
  width:170px;
  flex-shrink:0;
  display:flex;
  align-items:stretch;
  justify-content:center;
  align-self:stretch;
}

/* Visual containers — full-height image strip */
.pz-visual{
  width:100%;
  height:100%;
  min-height:100%;
  display:flex;
  align-items:stretch;
  justify-content:center;
  position:relative;
  border-radius:14px;
  overflow:hidden;
  background:transparent;
}

.pz-visual img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  border-radius:14px;
  filter:drop-shadow(0 3px 10px rgba(0,0,0,0.15));
}

/* Remove backgrounds */
.pz-visual-qf,
.pz-visual-champ{
  background:none;
  padding:0;
  box-shadow:none;
}
.pz-visual-champ::before{
  display:none;
}



/* Mobile - stack vertically */
@media(max-width:600px){
  .pz-card-body{
    flex-direction:row;
    gap:12px;
  }
  .pz-card-right{
    width:110px;
    align-self:stretch;
  }
  .pz-visual{
    width:100%;
    height:100%;
    min-height:100%;
  }
  .pz-visual img{
    border-radius:12px;
  }
}


/* ===== LEADERBOARD - MATCH + BONUS COLUMNS ===== */
.lb-match-col,
.lb-bonus-col{
  text-align:center;
  font-weight:600;
  color:#555;
  font-size:14px;
}
.lb th.lb-match-col,
.lb th.lb-bonus-col{
  text-align:center;
  color:#fff;
}

.lb-bonus-pts{
  color:#d4a843;
  font-weight:800;
  background:#fffbe6;
  padding:3px 8px;
  border-radius:8px;
  font-size:13px;
}

.lb-bonus-zero{
  color:#ccc;
  font-weight:600;
}

@media(max-width:600px){
  /* Hide match/bonus columns on mobile to save space, show only total */
  .lb-match-col,
  .lb-bonus-col{display:none}
}

/* ===== NEW TAG ON TAB BUTTON ===== */
.tab-new-tag{
  display:inline-block;
  background:linear-gradient(135deg,#e53935,#ff6b35);
  color:#fff;
  font-size:9px;
  font-weight:900;
  padding:2px 7px;
  border-radius:6px;
  margin-left:5px;
  vertical-align:middle;
  letter-spacing:.5px;
  animation:tabNewPulse 1.5s ease-in-out infinite;
  box-shadow:0 2px 6px rgba(229,57,53,.5);
  text-transform:uppercase;
  line-height:1.4;
}

@keyframes tabNewPulse{
  0%,100%{
    transform:scale(1);
    opacity:1;
  }
  50%{
    transform:scale(1.1);
    opacity:.85;
  }
}
/* ===== PLAY ZONE PROMO MODAL ===== */
.pz-promo-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.7);
  z-index:10000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  animation:fadeIn 0.3s ease-out;
}

@keyframes fadeIn{
  from{opacity:0}
  to{opacity:1}
}

.pz-promo-card{
  background:#fff;
  border-radius:20px;
  max-width:480px;
  width:100%;
  position:relative;
  overflow:hidden;
  box-shadow:0 24px 64px rgba(0,0,0,0.4);
  animation:slideUp 0.4s ease-out;
}

@keyframes slideUp{
  from{
    opacity:0;
    transform:translateY(40px) scale(0.95);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

.pz-promo-close{
  position:absolute;
  top:14px;
  right:14px;
  width:36px;
  height:36px;
  border-radius:50%;
  background:rgba(0,0,0,0.4);
  backdrop-filter:blur(8px);
  border:none;
  color:#fff;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:2;
  transition:.2s;
  font-family:inherit;
}
.pz-promo-close:hover{
  background:rgba(0,0,0,0.7);
  transform:scale(1.1);
}
.pz-promo-close svg{width:18px;height:18px}

.pz-promo-img{
  width:100%;
  padding:24px 24px 0;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  box-sizing:border-box;
}
.pz-promo-img img{
  max-width:100%;
  max-height:280px;
  width:auto;
  height:auto;
  object-fit:contain;
  display:block;
  border-radius:16px;
  box-shadow:0 8px 24px rgba(0,0,0,0.15);
}

@media(max-width:600px){
  .pz-promo-img{padding:18px 18px 0}
  .pz-promo-img img{max-height:240px}
}
.pz-promo-content{
  padding:24px 28px 24px;
  text-align:center;
}

.pz-promo-badge{
  display:inline-block;
  background:linear-gradient(135deg,#e53935,#ff6b35);
  color:#fff;
  font-size:10px;
  font-weight:900;
  padding:5px 12px;
  border-radius:8px;
  letter-spacing:1px;
  margin-bottom:12px;
  box-shadow:0 2px 8px rgba(229,57,53,0.4);
  animation:tabNewPulse 1.5s ease-in-out infinite;
}

.pz-promo-title{
  font-size:24px;
  font-weight:900;
  color:#37003c;
  margin-bottom:10px;
  line-height:1.2;
}

.pz-promo-desc{
  color:#666;
  font-size:14px;
  margin-bottom:20px;
  line-height:1.5;
}

.pz-promo-btn{
  width:100%;
  padding:14px 20px;
  background:linear-gradient(135deg,#37003c,#5a1065);
  color:#fff;
  border:none;
  border-radius:12px;
  font-size:15px;
  font-weight:800;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:inherit;
  transition:.2s;
  box-shadow:0 4px 16px rgba(55,0,60,0.3);
}
.pz-promo-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 24px rgba(55,0,60,0.4);
}

.pz-promo-timer{
  margin-top:14px;
  font-size:12px;
  color:#999;
  font-weight:600;
}

/* Mobile */
@media(max-width:600px){
  .pz-promo-card{max-width:360px}
  .pz-promo-img{height:160px}
  .pz-promo-content{padding:20px 20px 20px}
  .pz-promo-title{font-size:20px}
  .pz-promo-desc{font-size:13px}
  .pz-promo-btn{font-size:14px;padding:12px}
}

/* ===== MOBILE LEADERBOARD FIX ===== */
@media(max-width:600px){
  .lb{
    font-size:12px;
  }
  .lb th,
  .lb td{
    padding:8px 6px;
    font-size:12px;
  }
  .lb th{
    font-size:10px;
    letter-spacing:.3px;
  }
  .lb .pts-col{
    font-size:14px;
  }
  .rank-num{
    font-size:14px;
  }
  .medal{
    width:24px;
    height:24px;
    font-size:11px;
  }
  .trend-up,
  .trend-down,
  .trend-same{
    font-size:11px;
  }
  /* Hide emp# column on very small screens to save space */
  .lb th:nth-child(3),
  .lb td:nth-child(3){
    font-size:10px;
    padding:8px 4px;
  }
}

@media(max-width:400px){
  /* Even smaller screens - hide trend column */
  .lb th:nth-child(2),
  .lb td:nth-child(2){
    display:none;
  }
}

/* ===== MOBILE BRACKET FIX ===== */
@media(max-width:768px){
  /* Make the whole bracket section horizontally scrollable */
  #sec-bracket{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  
  /* Force bracket to its natural width so it doesn't compress */
  .bracket-layout{
    min-width:780px;
    padding:35px 16px 10px;
  }
  
  /* Add scroll hint */
  #sec-bracket::-webkit-scrollbar{
    height:8px;
  }
  #sec-bracket::-webkit-scrollbar-track{
    background:#f0e6f6;
    border-radius:4px;
  }
  #sec-bracket::-webkit-scrollbar-thumb{
    background:#37003c;
    border-radius:4px;
  }
}
/* ===== MOBILE - STACK TEAM NAME BELOW FLAG (BOTH SIDES) ===== */
@media(max-width:600px){
  /* Wider card padding so everything fits */
  .mc{
    padding:14px 10px !important;
  }
  
  /* Smaller gaps in teams row */
  .mc .teams-row{
    gap:4px !important;
  }
  
  /* Force BOTH left and right team-side to flag-on-top, name-below */
  .mc .team-side,
  .mc .team-side.right{
    flex-direction:column !important;
    align-items:center !important;
    gap:4px !important;
    flex:0 0 auto !important;
    min-width:50px !important;
    max-width:62px !important;
    text-align:center !important;
  }
  
  /* Team name below flag */
  .mc .team-name{
    font-size:10px !important;
    font-weight:700 !important;
    color:#1a1a2e !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    max-width:62px !important;
    text-align:center !important;
    line-height:1.1 !important;
  }
  
  /* Slightly smaller flags to make room */
  .mc .flag-lg{
    width:48px !important;
    height:48px !important;
  }
  
  /* TBD flag adjust */
  .mc .flag-lg.tbd-flag{
    font-size:9px !important;
  }
  
  /* Smaller inline controls (+/-) on mobile */
  .mc .inline-ctrl{
    padding:4px 8px !important;
    gap:4px !important;
  }
  .mc .inline-ctrl button{
    width:26px !important;
    height:26px !important;
    font-size:14px !important;
  }
  .mc .inline-ctrl .inline-val{
    font-size:16px !important;
    width:18px !important;
  }
  .mc .inline-ctrl span{
    font-size:11px !important;
    margin:0 2px !important;
  }
  
  /* Predicted score display smaller */
.mc .live-score{
  font-size:25px !important;
  padding:0 6px !important;
}
.mc .pred-score-display{
  font-size:22px !important;
}
}

@media(max-width:380px){
  .mc{
    padding:12px 6px !important;
  }
  .mc .flag-lg{
    width:32px !important;
    height:32px !important;
  }
  .mc .team-name{
    font-size:9px !important;
    max-width:55px !important;
  }
  .mc .team-side,
  .mc .team-side.right{
    max-width:56px !important;
    min-width:46px !important;
  }
}
/* ===== MOBILE - FLAG ON TOP, NAME BELOW (HANDLES DOM ORDER DIFFERENCE) ===== */
@media(max-width:600px){
  /* Left side: DOM order is flag → name. Column direction = flag top, name below. */
  .mc .team-side:not(.right){
    flex-direction:column !important;
    text-align:center !important;
  }
  
  /* Right side: DOM order is name → flag. Use column-reverse to flip = flag top, name below. */
  .mc .team-side.right{
    flex-direction:column-reverse !important;
    text-align:center !important;
  }
}