:root{
    --pitch-900:#0B2E22;
    --pitch-800:#0F3D2C;
    --pitch-700:#155C41;
    --chalk:#F6F4EC;
    --chalk-dim:#DCD8C8;
    --amber:#F2A93B;
    --card:#FFFFFF;
    --line:#E4E0D2;
    --muted:#6B6B60;
    --red:#C24B3B;
    --tbl-green-a:#57B75F;
    --tbl-green-b:#4CAE59;
    --tbl-navy:#1D2A57;
    --tbl-row-alt:#EFEFEF;
  }
  *{box-sizing:border-box;}
  body{margin:0;background:var(--chalk);color:var(--pitch-900);font-family:'Work Sans',sans-serif;}
  .app{max-width:960px;margin:0 auto;padding:0 0 4rem;}

  .header{background:linear-gradient(180deg,var(--pitch-900) 0%, var(--pitch-800) 100%);color:var(--chalk);padding:2rem 1.5rem 1.4rem;position:relative;overflow:hidden;}
  .header::after{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(90deg, rgba(255,255,255,0.035) 0 2px, transparent 2px 42px);pointer-events:none;}
  .header-row{display:flex;align-items:center;gap:.6rem;position:relative;z-index:1;justify-content:space-between;}
  .header-left{display:flex;align-items:center;gap:.6rem;}
  .badge-dot{width:10px;height:10px;border-radius:50%;background:var(--amber);flex:none;}
  .eyebrow{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);}
  .gear{background:none;border:1px solid rgba(246,244,236,0.3);color:var(--chalk-dim);border-radius:6px;padding:.3rem .6rem;font-family:'Space Mono',monospace;font-size:11px;cursor:pointer;}
  .gear:hover{border-color:var(--amber);color:var(--amber);}
  .title-row{font-family:'Archivo Black',sans-serif;font-size:clamp(26px,5vw,38px);color:var(--chalk);margin:.3rem 0 0;letter-spacing:-.01em;}
  .subtext{font-size:13px;color:var(--chalk-dim);margin:.3rem 0 0;}

  .tabs{display:flex;gap:0;background:var(--pitch-800);position:sticky;top:0;z-index:5;border-bottom:1px solid var(--pitch-700);}
  .tab{flex:1;text-align:center;padding:.85rem .4rem;font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:15px;letter-spacing:.02em;text-transform:uppercase;color:var(--chalk-dim);background:none;border:none;cursor:pointer;border-bottom:3px solid transparent;}
  .tab.active{color:var(--chalk);border-bottom-color:var(--amber);}

  .panel{padding:1.5rem;}
  .panel[hidden]{display:none;}

  h2.section-title{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:22px;text-transform:uppercase;letter-spacing:.02em;margin:0 0 1rem;color:var(--pitch-900);}

  .card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:1.1rem;margin-bottom:1rem;}
  .row{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;}
  input[type=text], select, input[type=number], input[type=date]{
    font-family:'Work Sans',sans-serif;font-size:14px;padding:.6rem .7rem;border:1px solid var(--line);border-radius:7px;background:#FCFBF7;color:var(--pitch-900);outline:none;
  }
  input:focus, select:focus{border-color:var(--pitch-700);}
  .btn{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:15px;letter-spacing:.02em;text-transform:uppercase;padding:.6rem 1.1rem;border-radius:7px;border:none;cursor:pointer;background:var(--pitch-900);color:var(--chalk);}
  .btn:hover{background:var(--pitch-700);}
  .btn.amber{background:var(--amber);color:var(--pitch-900);}
  .btn.amber:hover{background:#e6981f;}
  .btn:disabled{opacity:.4;cursor:not-allowed;}
  .radio-card{display:flex;gap:.7rem;align-items:flex-start;border:1px solid var(--line);border-radius:9px;padding:.8rem;cursor:pointer;margin-bottom:.6rem;}
  .radio-card.selected{border-color:var(--pitch-700);background:#F2F7F3;}
  .radio-card input{margin-top:3px;}
  .radio-card .rc-title{font-weight:600;font-size:14px;}
  .radio-card .rc-desc{font-size:12px;color:var(--muted);margin-top:2px;}

  .team-list{list-style:none;margin:0;padding:0;display:grid;gap:.55rem;}
  .team-row{display:flex;align-items:center;gap:.7rem;background:var(--card);border:1px solid var(--line);border-radius:9px;padding:.6rem .8rem;}
  .flagcircle{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;flex:none;background:#F1EFE6;border:1px solid var(--line);overflow:hidden;}
  .flagcircle.init{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:13px;color:#fff;}
  .team-name{flex:1;font-weight:500;font-size:15px;}
  .group-select{font-size:12px;padding:.35rem .5rem;}
  .icon-btn{background:none;border:none;cursor:pointer;color:var(--muted);font-size:13px;font-family:'Space Mono',monospace;padding:.3rem .5rem;}
  .icon-btn:hover{color:var(--red);}
  .active-toggle{display:flex;align-items:center;gap:.35rem;font-size:12px;color:var(--muted);white-space:nowrap;cursor:pointer;flex:none;}
  .active-toggle input{cursor:pointer;}
  .team-row.team-sitting-out{opacity:.55;}
  .team-row.team-sitting-out .team-name{text-decoration:line-through;text-decoration-color:var(--line);}
  .empty{color:var(--muted);font-size:14px;padding:1.2rem 0;text-align:center;}
  .group-heading{font-family:'Space Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:1rem 0 .4rem;}

  .match-row{display:flex;align-items:center;gap:.5rem;background:var(--card);border:1px solid var(--line);border-radius:9px;padding:.7rem .9rem;margin-bottom:.5rem;}
  .match-team{flex:1;font-size:14px;font-weight:500;text-align:right;}
  .match-team.left-team{text-align:left;}
  .match-score{font-family:'Space Mono',monospace;font-weight:700;font-size:17px;background:var(--pitch-900);color:var(--chalk);border-radius:6px;padding:.25rem .6rem;min-width:52px;text-align:center;}
  .match-meta{font-size:11px;color:var(--muted);font-family:'Space Mono',monospace;}
  .match-row.pending{border-style:dashed;}
  .vs-label{font-family:'Space Mono',monospace;font-size:11px;color:var(--muted);text-transform:uppercase;}
  .score-input{width:64px;height:44px;padding:.5rem;font-size:16px;text-align:center;font-family:'Space Mono',monospace;}

  /* Compact single-line score editor (Home Team  1 - 3  Away Team)
     — combined dark pill like the public result strip, but editable. */
  .match-row.match-row-edit{flex-wrap:nowrap;gap:.5rem;padding:.6rem .8rem;border-left:3px solid var(--line);justify-content:flex-start;}
  .match-row.match-row-edit.played{border-left-color:var(--pitch-700);}
  .match-row.match-row-edit.pending{border-left-color:var(--amber);border-style:dashed;}
  .match-row.match-row-edit .match-team{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1 1 0;}
  .score-pair{display:flex;align-items:center;flex:none;background:var(--pitch-900);border-radius:6px;overflow:hidden;}
  .score-pair .score-input-mini{
    width:30px;height:34px;padding:0;border:none;background:transparent;color:var(--chalk);
    font-family:'Space Mono',monospace;font-weight:700;font-size:15px;text-align:center;-moz-appearance:textfield;
  }
  .score-pair .score-input-mini::-webkit-outer-spin-button,
  .score-pair .score-input-mini::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
  .score-pair .score-dash{color:var(--chalk-dim);font-family:'Space Mono',monospace;font-weight:700;font-size:14px;}
  .match-row.match-row-edit .btn.small{flex:none;padding:.35rem .6rem;font-size:12px;}
  .match-row.match-row-edit .group-tag{display:none;}

  @media (min-width:521px){
    .match-row.match-row-edit .group-tag{display:inline;flex:none;margin-right:.2rem;}
  }
  @media (max-width:420px){
    .match-row.match-row-edit{gap:.35rem;padding:.55rem .6rem;}
    .match-row.match-row-edit .match-team{font-size:12.5px;}
    .score-pair .score-input-mini{width:26px;height:30px;font-size:14px;}
    .match-row.match-row-edit .btn.small{padding:.3rem .5rem;font-size:11px;}
  }
  .btn.small{padding:.35rem .7rem;font-size:13px;}
  .btn.ghost{background:transparent;color:var(--muted);border:1px solid var(--line);}
  .btn.ghost:hover{border-color:var(--red);color:var(--red);}
  .matchday-heading{display:flex;align-items:center;gap:.6rem;margin:1.2rem 0 .5rem;}
  .matchday-heading .md-title{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:16px;text-transform:uppercase;letter-spacing:.04em;color:var(--pitch-900);background:var(--chalk-dim);padding:.25rem .7rem;border-radius:5px;}
  .matchday-heading .md-line{flex:1;height:1px;background:var(--line);}
  .status-tag{font-family:'Space Mono',monospace;font-size:10px;text-transform:uppercase;letter-spacing:.05em;padding:.2rem .45rem;border-radius:4px;flex:none;}
  .status-tag.played{background:#E1F0E5;color:var(--pitch-700);}
  .status-tag.upcoming{background:#FBEFDD;color:var(--amber);color:#8A5B10;}
  .group-tag{font-family:'Space Mono',monospace;font-size:10px;color:var(--muted);flex:none;}

  /* Green scoreboard-style tables (matches reference design) */
  .gtable-wrap{border-radius:12px;overflow:hidden;border:1px solid var(--line);margin-bottom:1.5rem;background:var(--card);}
  .gtable-head{background:linear-gradient(180deg,var(--tbl-green-a),var(--tbl-green-b));color:#fff;padding:.9rem 1rem;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:20px;text-transform:uppercase;text-align:center;letter-spacing:.02em;}
  table.gtable{width:100%;border-collapse:collapse;}
  table.gtable thead th{background:var(--tbl-green-b);color:#fff;font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.04em;padding:.55rem .3rem;text-align:center;}
  table.gtable thead th.team-col{text-align:left;padding-left:.9rem;}
  table.gtable tbody td{padding:.6rem .3rem;text-align:center;font-family:'Space Mono',monospace;font-size:13px;color:var(--tbl-navy);}
  table.gtable tbody tr:nth-child(even){background:var(--tbl-row-alt);}
  table.gtable tbody tr:nth-child(odd){background:#fff;}
  table.gtable td.team-col{text-align:left;padding-left:.7rem;font-family:'Work Sans',sans-serif;font-weight:600;font-size:14px;}
  table.gtable td.team-col .tc{display:flex;align-items:center;gap:.55rem;}
  table.gtable td.pos{font-family:'Work Sans',sans-serif;font-weight:700;font-size:15px;color:var(--tbl-navy);width:26px;}
  table.gtable tbody tr.leader td.team-col{position:relative;}
  table.gtable tbody tr.leader{box-shadow:inset 3px 0 0 var(--amber);}

  .legend{font-size:11px;color:var(--muted);margin-top:.4rem;margin-bottom:1.5rem;font-family:'Space Mono',monospace;}

  .setup-overlay{padding:1.5rem;}
  .format-note{font-size:12px;color:var(--muted);margin-top:.4rem;}

  /* Knockout bracket */
  .bracket-wrap{display:flex;gap:2rem;overflow-x:auto;padding:.5rem .2rem 1.2rem;}
  .bracket-round{display:flex;flex-direction:column;justify-content:space-around;min-width:200px;flex:none;}
  .bracket-round-title{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--pitch-700);text-align:center;margin-bottom:.6rem;}
  .ko-match{background:var(--card);border:1px solid var(--line);border-radius:9px;padding:.5rem .6rem;margin:.5rem 0;}
  .ko-slot{display:flex;align-items:center;gap:.5rem;padding:.25rem 0;}
  .ko-slot .ko-name{flex:1;font-size:13px;font-weight:600;}
  .ko-slot.winner .ko-name{color:var(--pitch-700);}
  .ko-slot .ko-score{font-family:'Space Mono',monospace;font-weight:700;font-size:13px;background:var(--pitch-900);color:var(--chalk);border-radius:5px;padding:.1rem .45rem;min-width:26px;text-align:center;}
  .ko-select{width:100%;font-size:12px;padding:.3rem;margin-bottom:.3rem;}
  .ko-score-input{width:64px;height:44px;padding:.4rem;font-size:16px;text-align:center;font-family:'Space Mono',monospace;}
  .ko-empty-slot{color:var(--muted);font-size:13px;font-style:italic;}
  .champion-card{display:flex;align-items:center;justify-content:center;gap:.6rem;background:linear-gradient(180deg,var(--red),#a13b2d);color:#fff;border-radius:10px;padding:1rem;margin:1rem auto;max-width:280px;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:20px;text-transform:uppercase;letter-spacing:.03em;}

/* ---- Added for the multi-page admin/public split ---- */
.site-nav{display:flex;gap:0;background:var(--pitch-800);position:sticky;top:0;z-index:5;border-bottom:1px solid var(--pitch-700);}
.site-nav a{flex:1;text-align:center;padding:.85rem .4rem;font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:15px;letter-spacing:.02em;text-transform:uppercase;color:var(--chalk-dim);text-decoration:none;border-bottom:3px solid transparent;}
.site-nav a.active{color:var(--chalk);border-bottom-color:var(--amber);}
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--chalk);padding:1.5rem;}
.login-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:1.6rem;max-width:360px;width:100%;}
.login-card h1{font-family:'Archivo Black',sans-serif;font-size:22px;margin:0 0 .3rem;color:var(--pitch-900);}
.login-card p{font-size:13px;color:var(--muted);margin:0 0 1rem;}
.login-card input{width:100%;margin-bottom:.7rem;}
.login-card .btn{width:100%;}
.err-text{color:var(--red);font-size:13px;margin:.3rem 0 0;}
.help-text{font-size:12px;color:var(--muted);margin-top:.8rem;text-align:center;}
.help-text a{color:var(--pitch-700);}

/* ---- Winners page ---- */
.trophy-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;background:linear-gradient(180deg,var(--amber),#c9821c);color:var(--pitch-900);border-radius:12px;padding:1.6rem 1rem;margin-bottom:1.5rem;text-align:center;}
.trophy-card .trophy-emoji{font-size:38px;line-height:1;}
.trophy-card .trophy-label{font-family:'Space Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:.12em;opacity:.75;}
.trophy-card .trophy-name{font-family:'Archivo Black',sans-serif;font-size:clamp(22px,5vw,30px);margin-top:.2rem;}
.stat-highlight{display:flex;align-items:center;gap:.8rem;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:.9rem 1.1rem;margin-bottom:1rem;}
.stat-highlight .sh-label{font-family:'Space Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);}
.stat-highlight .sh-value{font-weight:700;font-size:16px;flex:1;}
.stat-highlight .sh-goals{font-family:'Space Mono',monospace;font-weight:700;background:var(--pitch-900);color:var(--chalk);border-radius:6px;padding:.25rem .6rem;}
.podium{display:flex;align-items:flex-end;justify-content:center;gap:.7rem;margin:1rem 0 1.5rem;flex-wrap:wrap;}
.podium-item{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:.9rem .8rem;text-align:center;width:150px;}
.podium-item.p1{order:2;padding-top:1.3rem;border-color:var(--amber);box-shadow:0 0 0 2px var(--amber) inset;}
.podium-item.p2{order:1;}
.podium-item.p3{order:3;}
.podium-rank{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);}
.podium-item.p1 .podium-rank{color:#8A5B10;}
.podium-name{font-weight:600;font-size:15px;margin-top:.3rem;}
.podium-team{font-size:12px;color:var(--muted);margin-top:.1rem;}
.podium-goals{font-family:'Space Mono',monospace;font-weight:700;font-size:14px;margin-top:.4rem;color:var(--pitch-700);}

/* ---------- Winners archive (hall of fame) list ---------- */
.winner-list-item{display:flex;align-items:center;gap:.9rem;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:.9rem 1.1rem;margin-bottom:.7rem;text-decoration:none;color:inherit;transition:border-color .15s;}
.winner-list-item:hover{border-color:var(--amber);}
.winner-list-item .wl-trophy{font-size:26px;line-height:1;flex-shrink:0;}
.winner-list-item .wl-body{flex:1;min-width:0;}
.winner-list-item .wl-name{font-weight:700;font-size:16px;}
.winner-list-item .wl-meta{font-size:13px;color:var(--muted);margin-top:.15rem;}
.winner-list-item .wl-arrow{color:var(--muted);font-size:18px;flex-shrink:0;}
.back-link{display:inline-block;font-family:'Space Mono',monospace;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);text-decoration:none;margin-bottom:1rem;}
.back-link:hover{color:var(--amber);}
.player-row{display:flex;gap:.6rem;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:9px;padding:.6rem .8rem;margin-bottom:.5rem;}
.player-row input[type=text]{flex:1;min-width:0;}
.player-row input[type=number]{width:70px;}

/* =========================================================
   RESPONSIVE / MOBILE-FRIENDLY LAYOUT
   ========================================================= */

/* Prevent the whole page from scrolling sideways; nested
   elements below (nav, tables, bracket) get their own
   horizontal scroll where content genuinely needs it. */
html{overflow-x:hidden;}
body{overflow-x:hidden;width:100%;}
.app{max-width:960px;width:100%;margin:0 auto;padding:0 0 4rem;}
img,svg{max-width:100%;}

/* Let long words/names shrink instead of forcing overflow */
.title-row,.subtext,.team-name,.match-team,.ko-name,.wl-name,.podium-name,
.trophy-name,.sh-value{overflow-wrap:anywhere;word-break:break-word;}

/* Flex children need min-width:0 to actually shrink/truncate
   inside a flex row instead of pushing it wider than the screen */
.match-team,.team-name,.ko-name,.sh-value,.podium-name,.wl-name,.wl-body{min-width:0;}

/* Top nav: on phones, evenly-squeezed tabs become unreadable.
   Switch to a horizontally-scrollable strip of full-size tabs instead. */
@media (max-width:760px){
  .tabs,.site-nav{overflow-x:auto;-webkit-overflow-scrolling:touch;justify-content:flex-start;scrollbar-width:none;}
  .tabs::-webkit-scrollbar,.site-nav::-webkit-scrollbar{display:none;}
  .tab,.site-nav a{flex:0 0 auto;padding:.8rem 1rem;white-space:nowrap;}
}

/* Standings / stats tables: scroll horizontally on narrow screens
   instead of being clipped by the rounded-corner overflow:hidden. */
.gtable-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
table.gtable{min-width:460px;}

/* Rows that pack a lot of inline elements (match cards, team
   rows, players) wrap onto multiple lines cleanly on small screens
   instead of overflowing horizontally. */
@media (max-width:600px){
  .match-row{flex-wrap:wrap;justify-content:center;row-gap:.35rem;}
  .match-row .match-team{flex:1 1 40%;text-align:center;}
  .team-row{flex-wrap:wrap;row-gap:.5rem;}
  .player-row{flex-wrap:wrap;row-gap:.4rem;}
  .player-row input[type=text]{min-width:120px;}
  .stat-highlight{flex-wrap:wrap;}
}

/* Tighter spacing + smaller headline sizes on phones so cards,
   headers and panels don't feel oversized or cramped. */
@media (max-width:600px){
  .header{padding:1.3rem 1rem 1rem;}
  .panel{padding:1rem .9rem;}
  .card{padding:.9rem;}
  h2.section-title{font-size:19px;}
  .btn{padding:.55rem .9rem;font-size:14px;}
  table.gtable thead th,table.gtable tbody td{padding:.5rem .3rem;font-size:12px;}
  table.gtable td.team-col{font-size:13px;}
  .bracket-round{min-width:170px;}
  .podium-item{width:130px;}
}

@media (max-width:380px){
  .title-row{font-size:22px;}
  .eyebrow{font-size:10px;}
  .btn{font-size:13px;padding:.5rem .75rem;}
}