:root{
      --bg1:#fffdfa;
      --bg2:#ffffff;
      --ink:#111827;
      --muted:#6b7280;
      --card:#ffffff;
      --shadow: 0 10px 30px rgba(17,24,39,.06);
      --shadow2: 0 8px 18px rgba(17,24,39,.08);
      --radius:18px;
      --accent:#ffd34d;
      --accent2:#111827;
      --win:#16a34a;
      --warn:#f59e0b;
    }

    body{
      color: var(--ink);
      font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background:
        radial-gradient(1200px 500px at 15% -10%, rgba(255,211,77,.20), transparent 55%),
        radial-gradient(1200px 500px at 85% -10%, rgba(17,17,17,.06), transparent 55%),
        linear-gradient(180deg, var(--bg2), var(--bg1));
    }

    .page-shell{ max-width: 1480px; }

    .topbar{
      position: sticky;
      top: 0;
      z-index: 10;
      backdrop-filter: blur(10px);
      background: rgba(246,247,251,.72);
      border-bottom: 1px solid rgba(17,24,39,.06);
    }

    .hero{
      border: 1px solid rgba(17,24,39,.08);
      border-radius: 22px;
      background:
        radial-gradient(900px 300px at 10% 0%, rgba(79,70,229,.14), transparent 55%),
        radial-gradient(900px 300px at 90% 0%, rgba(6,182,212,.12), transparent 55%),
        linear-gradient(180deg, rgba(255,255,255,.90), rgba(255,255,255,.74));
      box-shadow: var(--shadow);
    }

    .pill{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding: 8px 12px;
      border-radius: 999px;
      background: rgba(255,211,77,.22);
      border: 1px solid rgba(255,211,77,.55);
      color: rgba(17,17,17,.95);
      font-weight: 800;
      font-size: 12px;
    }
    .pill.dark{
      background: rgba(17,24,39,.06);
      border: 1px solid rgba(17,24,39,.10);
      color: rgba(17,24,39,.80);
    }
    .pill.good{
      background: rgba(22,163,74,.10);
      border: 1px solid rgba(22,163,74,.22);
      color: rgba(22,163,74,.95);
    }
    .pill.info{
      background: rgba(255,211,77,.22);
      border: 1px solid rgba(255,211,77,.55);
      color: rgba(17,17,17,.95);
    }
    .pill.warn{
      background: rgba(245,158,11,.10);
      border: 1px solid rgba(245,158,11,.22);
      color: rgba(245,158,11,.95);
    }
    .pill.muted{
      background: rgba(17,24,39,.06);
      border: 1px solid rgba(17,24,39,.10);
      color: rgba(17,24,39,.70);
    }

    .champ{
      border-radius: 18px;
      border: 1px solid rgba(22,163,74,.22);
      background: linear-gradient(180deg, rgba(22,163,74,.10), rgba(255,255,255,.78));
      box-shadow: var(--shadow2);
      padding: 12px 14px;
    }
    .champ .trophy{
      width: 38px; height: 38px;
      display:grid; place-items:center;
      border-radius: 12px;
      background: rgba(22,163,74,.14);
      border: 1px solid rgba(22,163,74,.22);
      font-size: 18px;
    }

    .chip{
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding: 6px 10px;
      border-radius: 999px;
      border: 1px solid rgba(17,24,39,.10);
      background: rgba(255,255,255,.78);
      font-size: 12px;
      color: rgba(17,24,39,.78);
      font-weight: 800;
    }
    .chip.ok{
      border-color: rgba(22,163,74,.22);
      background: rgba(22,163,74,.08);
      color: rgba(22,163,74,.95);
    }
    .chip.warn{
      border-color: rgba(245,158,11,.22);
      background: rgba(245,158,11,.08);
      color: rgba(245,158,11,.95);
    }

    /* Alternância entre as duas leituras da chave */
    .view-toolbar{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:14px;
      margin: 18px 0 14px;
    }
    .view-switcher{
      display:inline-grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap:4px;
      padding:4px;
      border:1px solid rgba(17,24,39,.10);
      border-radius:16px;
      background:rgba(17,24,39,.045);
    }
    .view-tab{
      min-width:154px;
      border:0;
      border-radius:12px;
      padding:10px 14px;
      background:transparent;
      color:rgba(17,24,39,.66);
      font-size:13px;
      font-weight:900;
      transition:background .14s ease, color .14s ease, box-shadow .14s ease;
    }
    .view-tab:hover{ color:var(--ink); }
    .view-tab.active{
      color:var(--ink);
      background:#fff;
      box-shadow:0 5px 14px rgba(17,24,39,.10);
    }
    .view-tab:focus-visible{
      outline:3px solid rgba(79,70,229,.22);
      outline-offset:2px;
    }
    .view-caption{
      color:var(--muted);
      font-size:12px;
      font-weight:700;
      text-align:right;
    }
    .view-panel[hidden]{ display:none !important; }
    .groups-section{ margin:18px 0 22px; }
    .groups-heading{ display:flex; align-items:flex-end; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:12px; }
    .groups-heading h4{ margin:0; font-weight:950; letter-spacing:-.03em; }
    .groups-heading p{ margin:3px 0 0; color:var(--muted); font-size:13px; }
    .groups-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:14px; }
    .group-card{ overflow:hidden; border:1px solid rgba(17,24,39,.09); border-radius:18px; background:rgba(255,255,255,.88); box-shadow:var(--shadow); }
    .group-card-head{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid rgba(17,24,39,.08); background:linear-gradient(135deg,rgba(255,211,77,.15),rgba(255,255,255,.9)); }
    .group-card-head strong{ font-size:15px; font-weight:950; }
    .group-table{ width:100%; margin:0; font-size:12px; }
    .group-table th,.group-table td{ padding:10px 9px; border-bottom:1px solid rgba(17,24,39,.06); vertical-align:middle; white-space:nowrap; }
    .group-table th{ color:rgba(17,24,39,.52); font-size:10px; letter-spacing:.05em; text-transform:uppercase; }
    .group-table tr:last-child td{ border-bottom:0; }
    .group-table tr.qualified td{ color:#13733e; background:rgba(22,163,74,.055); font-weight:800; }
    .group-team{ max-width:180px; overflow:hidden; text-overflow:ellipsis; }
    .qualified-mark{ display:inline-grid; place-items:center; width:20px; height:20px; margin-left:5px; border-radius:999px; background:rgba(22,163,74,.12); color:#15803d; font-size:10px; font-weight:950; }
    .knockout-empty{ padding:22px; border:1px dashed rgba(17,24,39,.17); border-radius:18px; background:rgba(255,255,255,.6); color:var(--muted); text-align:center; font-size:13px; }

    /* Leitura organizada por rodada */
    .rounds-overview{
      display:grid;
      gap:20px;
    }
    .round-section{
      scroll-margin-top:96px;
      padding:20px;
      border:1px solid rgba(17,24,39,.09);
      border-radius:22px;
      background:rgba(255,255,255,.78);
      box-shadow:var(--shadow);
    }
    .round-section-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
      margin-bottom:16px;
      padding-bottom:14px;
      border-bottom:1px solid rgba(17,24,39,.08);
    }
    .round-kicker{
      margin-bottom:3px;
      color:rgba(17,24,39,.48);
      font-size:11px;
      font-weight:900;
      letter-spacing:.10em;
      text-transform:uppercase;
    }
    .round-section-title{
      margin:0;
      color:var(--ink);
      font-size:19px;
      font-weight:950;
      letter-spacing:-.025em;
    }
    .round-summary{
      display:flex;
      align-items:center;
      justify-content:flex-end;
      gap:8px;
      flex-wrap:wrap;
    }
    .round-match-grid{
      display:grid;
      grid-template-columns:repeat(auto-fit, minmax(310px, 1fr));
      gap:16px;
      align-items:stretch;
    }
    .rounds-overview .match-card{
      position:relative;
      inset:auto;
      height:100%;
      will-change:auto;
    }

    /* Bracket container */
    .bracket-wrap{
      border: 1px solid rgba(17,24,39,.08);
      border-radius: 22px;
      background: rgba(255,255,255,.70);
      box-shadow: var(--shadow);
      overflow: hidden;
    }
    .bracket-scroll{
      position: relative;
      overflow-x: auto;
      overflow-y: hidden;
      padding: 22px 24px 32px;
      scrollbar-gutter: stable;
      scroll-behavior: smooth;
      scroll-snap-type: x proximity;
      scroll-padding-inline:24px;
      overscroll-behavior-x:contain;
      -webkit-overflow-scrolling:touch;
      touch-action:pan-x pan-y;
      scrollbar-width:thin;
      scrollbar-color:rgba(17,24,39,.24) transparent;
    }
    .bracket-scroll::-webkit-scrollbar{ height:10px; }
    .bracket-scroll::-webkit-scrollbar-track{ background:transparent; }
    .bracket-scroll::-webkit-scrollbar-thumb{
      border:3px solid transparent;
      border-radius:999px;
      background:rgba(17,24,39,.24);
      background-clip:padding-box;
    }

    .bracket-lines{
      position:absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 1;
    }

    .bracket{
      display:flex;
      gap: 56px;
      position: relative;
      z-index: 2;
      align-items: flex-start;
      min-height: 560px;
    }

    .round-col{
      width: 224px;
      flex: 0 0 auto;
      scroll-snap-align: start;
    }

    /* ✅ FIX “texto vazando atrás”: header mais opaco + isolation */
    .round-head{
      position: sticky;
      top: 64px;
      z-index: 3;
      margin-bottom: 12px;
      padding: 10px 11px;
      border-radius: 10px;

      background: rgba(255,255,255,.97);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);

      border: 1px solid rgba(17,24,39,.12);
      box-shadow: 0 10px 24px rgba(17,24,39,.10);

      display:flex;
      justify-content: space-between;
      align-items:center;

      isolation: isolate;
    }

    .round-title{
      font-weight: 950;
      letter-spacing: -0.02em;
      font-size: 14px;
      margin: 0;
    }

    .round-body{
      position: relative;
      padding-bottom: 18px;
      min-height: 390px;
    }

    /* A árvore completa segue o diagrama compacto do aplicativo. */
    #bracket .match-card{
      padding:6px;
      border-radius:9px;
      box-shadow:0 5px 13px rgba(17,24,39,.055);
    }
    #bracket .match-top{ margin-bottom:4px; }
    #bracket .match-mini{ font-size:8px; }
    #bracket .match-state{ padding:2px 5px; font-size:8px; }
    #bracket .team-row{
      min-height:30px;
      gap:6px;
      margin-bottom:4px;
      padding:3px 6px;
      border-radius:7px;
    }
    #bracket .team-name{
      min-width:0;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
      font-size:12px;
      line-height:1.2;
    }
    #bracket .team-tag{
      width:14px;
      min-width:14px;
      overflow:hidden;
      border:0;
      padding:0;
      background:transparent;
      color:transparent;
      font-size:0;
    }
    #bracket .team-tag:not(:empty)::after{
      content:"✓";
      color:#15803d;
      font-size:11px;
      font-weight:950;
    }
    #bracket .match-meta{ gap:4px; margin-top:3px; }
    #bracket .score{ padding:3px 5px; font-size:10px; }
    #bracket .details .chip{ padding:4px 6px; font-size:9px; }

    .match-card{
      background: var(--card);
      border: 1px solid rgba(17,24,39,.10);
      border-radius: var(--radius);
      padding: 15px;
      box-shadow: 0 8px 18px rgba(17,24,39,.05);
      transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
      position: absolute; /* ✅ para “TV bracket” (layout calculado via JS) */
      left: 0; right: 0;
      will-change: transform, top;
    }
    .match-card:hover{
      transform: translateY(-1px);
      box-shadow: 0 14px 26px rgba(17,24,39,.08);
      border-color: rgba(79,70,229,.20);
    }

    .match-card.highlight{
      border-color: rgba(79,70,229,.45);
      box-shadow: 0 18px 32px rgba(79,70,229,.10);
    }
    .match-card.mine{
      border-color: rgba(6,182,212,.45);
      box-shadow: 0 18px 32px rgba(6,182,212,.10);
    }
    .match-card.mine::after{
      content:"👤";
      position:absolute;
      top: 10px;
      right: 12px;
      opacity:.95;
      font-size: 14px;
    }

    .match-top{
      display:flex;
      justify-content: space-between;
      align-items:center;
      gap: 10px;
      margin-bottom: 10px;
    }
    .match-mini{
      font-size: 12px;
      color: var(--muted);
      font-weight: 900;
    }
    .match-state{
      font-size: 12px;
      font-weight: 950;
      padding: 6px 10px;
      border-radius: 999px;
      border: 1px solid rgba(17,24,39,.10);
      background: rgba(17,24,39,.04);
      color: rgba(17,24,39,.75);
      white-space: nowrap;
    }
    .match-state.done{
      border-color: rgba(22,163,74,.22);
      background: rgba(22,163,74,.08);
      color: rgba(22,163,74,.95);
    }
    .match-state.sched{
      border-color: rgba(79,70,229,.22);
      background: rgba(255,211,77,.22);
      color: rgba(17,17,17,.95);
    }

    .match-state.live{
      border-color: rgba(245,158,11,.28);
      background: rgba(245,158,11,.10);
      color: rgba(245,158,11,.95);
    }

    .match-card.live{
      border-color: rgba(245,158,11,.28);
      box-shadow: 0 10px 24px rgba(245,158,11,.12);
    }


    .team-row{
      display:flex;
      justify-content: space-between;
      align-items:center;
      gap: 12px;
      padding: 12px 12px;
      border-radius: 14px;
      border: 1px solid rgba(17,24,39,.10);
      background: rgba(17,24,39,.02);
      margin-bottom: 8px;
    }

    .team-name{
      flex:1 1 auto;
      font-weight: 900;
      letter-spacing: -0.01em;
      line-height:1.35;
      overflow-wrap:anywhere;
    }
    .contact-info-btn{
      width:25px;
      height:25px;
      margin-left:6px;
      padding:0;
      border:1px solid rgba(37,99,235,.28);
      border-radius:999px;
      background:#eff6ff;
      color:#1d4ed8;
      font-size:13px;
      font-weight:950;
      line-height:23px;
      vertical-align:middle;
    }
    .contact-info-btn:hover,.contact-info-btn:focus-visible{ background:#dbeafe; border-color:#2563eb; outline:none; }
    .contact-person{ border:1px solid var(--divider); border-radius:14px; padding:12px; background:#fff; }
    .contact-person + .contact-person{ margin-top:10px; }

    .team-tag{
      font-size: 12px;
      font-weight: 950;
      padding: 6px 10px;
      border-radius: 999px;
      border: 1px solid rgba(17,24,39,.10);
      background: rgba(255,255,255,.78);
      color: rgba(17,24,39,.68);
      white-space: nowrap;
      min-width: 78px;
      text-align: center;
    }
    .team-tag:empty{ display:none; }

    .team-row.winner{
      border-color: rgba(22,163,74,.26);
      background: rgba(22,163,74,.08);
    }
    .team-row.winner .team-tag{
      border-color: rgba(22,163,74,.26);
      background: rgba(22,163,74,.10);
      color: rgba(22,163,74,.95);
    }

    .match-meta{
      margin-top: 8px;
      display:flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items:center;
      justify-content: space-between;
    }

    .score{
      font-weight: 950;
      letter-spacing: -0.02em;
      color: rgba(17,24,39,.92);
      font-size: 15px;
      line-height:1.2;
      padding:6px 9px;
      border-radius:10px;
      background:rgba(17,24,39,.055);
    }
    .score:empty{ display:none; }

    .smallmuted{ color: var(--muted); }

    /* Toggle */
    .toggle{
      display:flex;
      align-items:center;
      gap: 10px;
      user-select: none;
      font-size: 13px;
      color: rgba(17,24,39,.76);
      font-weight: 900;
    }
    .toggle input{ transform: translateY(1px); }

    /* Round nav chips */
    .rnav{
      display:flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 10px;
      align-items: center;
    }
    .rchip{
      border: 1px solid rgba(17,24,39,.10);
      background: rgba(255,255,255,.84);
      padding: 8px 10px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 950;
      color: rgba(17,24,39,.78);
      cursor: pointer;
      transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
      user-select: none;
    }
    .rchip.active{
      border-color:rgba(17,24,39,.88);
      background:var(--ink);
      color:#fff;
      box-shadow:0 10px 20px rgba(17,24,39,.14);
    }
    .rchip:focus-visible{
      outline:3px solid rgba(79,70,229,.22);
      outline-offset:2px;
    }
    .rchip:hover{
      transform: translateY(-1px);
      border-color: rgba(79,70,229,.24);
      box-shadow: 0 12px 22px rgba(17,24,39,.08);
    }

    /* Loading shimmer */
    .skeleton{
      border-radius: 18px;
      background: linear-gradient(90deg, rgba(17,24,39,.06), rgba(17,24,39,.02), rgba(17,24,39,.06));
      background-size: 200% 100%;
      animation: shimmer 1.2s linear infinite;
      height: 96px;
      margin-bottom: 12px;
      border: 1px solid rgba(17,24,39,.08);
    }
    @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

    @media (min-width: 1200px){
      .bracket{ gap:56px; }
      .round-col{ width:224px; }
    }

    /* ✅ Mobile */
    @media (max-width: 767.98px){
      .view-toolbar{
        align-items:stretch;
        flex-direction:column;
      }
      .view-switcher{ width:100%; }
      .view-tab{
        min-width:0;
        padding-inline:9px;
      }
      .view-caption{ text-align:left; }
      .round-section{ padding:15px; }
      .round-section-head{
        align-items:flex-start;
        flex-direction:column;
      }
      .round-summary{ justify-content:flex-start; }
      .round-match-grid{ grid-template-columns:minmax(0, 1fr); }
      .bracket-scroll{
        padding:18px 16px 30px;
        scroll-padding-inline:16px;
        scroll-snap-type:x mandatory;
      }
      .bracket{ gap:42px; }
      .round-col{ width:224px; }
      /* No celular o cabeçalho sticky encobria o primeiro confronto da rodada. */
      .round-head{ position:relative; top:auto; }
      .match-card{ padding:13px; }
      .team-row{ align-items:flex-start; }
      .team-tag{ min-width:70px; }
    }
  

    @page { size: landscape; margin: 12mm; }
    @media print{
      body{ background:#fff !important; }
      .topbar, .hero .toggle, #btnRefresh, #btnLive, #btnPrint, #search, #btnClearSearch, #roundNav, #hint, #msg, .view-toolbar, #roundsPanel, .contact-info-btn{ display:none !important; }
      #treePanel, #treePanel[hidden]{ display:block !important; }
      .container{ max-width: none !important; padding: 0 !important; }
      .hero{ border:none; box-shadow:none; background: transparent; }
      .bracket-wrap{ border:none; box-shadow:none; background: transparent; }
      .bracket-scroll{ overflow: visible !important; padding: 0 !important; }
      .round-head{ position: static; top:auto; box-shadow:none; }
      .match-card{ break-inside: avoid; }
    }