:root{
    --bg: #f1e8d6;
    --panel: #faf4e7;
    --panel-alt: #eaddc0;
    --brass: #93611c;
    --brass-dim: #7a5019;
    --parchment: #2a1d12;
    --white-disc: #f8f3e6;
    --black-disc: #1a130c;
    --ring: #8c3a30;
    --ring-dim: #b3453b;
    --good: #35702f;
    --text-dim: #5b4a37;
    --line: #d9c9a6;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--bg);
    color:var(--parchment);
    font-family:'Public Sans', sans-serif;
    font-size:17px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3{
    font-family:'Spectral', serif;
    font-weight:600;
    margin:0;
    color:var(--parchment);
    line-height:1.25;
  }
  .mono{font-family:'IBM Plex Mono', monospace;}
  button, select, input{font-size:1rem;}
  a{color:inherit; text-decoration:none;}

  /* ---------- Header ---------- */
  header{
    position:relative;
    padding:2.6rem 1.5rem 1.7rem;
    text-align:center;
    background:
      radial-gradient(circle at 50% 120%, rgba(211,163,85,0.16) 0%, rgba(211,163,85,0) 42%),
      repeating-radial-gradient(circle at 50% 50%, transparent 0 68px, rgba(211,163,85,0.06) 69px 71px),
      var(--bg);
    border-bottom:1px solid var(--line);
    overflow:hidden;
  }
  header .wordmark{
    font-size:clamp(1.8rem, 4vw, 2.7rem);
    letter-spacing:0.01em;
  }
  header .wordmark em{
    font-style:italic;
    color:var(--brass);
  }
  header .sub{
    margin-top:0.5rem;
    color:var(--text-dim);
    font-size:0.95rem;
  }

  nav{
    display:flex;
    justify-content:center;
    gap:0.3rem;
    margin-top:1.7rem;
    flex-wrap:wrap;
  }
  nav a{
    font-family:'Public Sans', sans-serif;
    font-size:0.9rem;
    font-weight:600;
    color:var(--text-dim);
    background:transparent;
    border:1px solid transparent;
    padding:0.6rem 1.15rem;
    border-radius:999px;
    cursor:pointer;
    display:inline-block;
    transition:color .15s ease, border-color .15s ease, background .15s ease;
  }
  nav a:hover{color:var(--parchment); border-color:var(--line);}
  nav a.active{
    color:var(--bg);
    background:var(--brass);
    border-color:var(--brass);
  }

  main{
    max-width:900px;
    margin:0 auto;
    padding:2.6rem 1.5rem 5rem;
  }
  section.view{display:none;}
  section.view.active{display:block;}

  .section-head{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:1rem;
    margin-bottom:1.3rem;
    padding-bottom:0.8rem;
    border-bottom:1px solid var(--line);
  }
  .section-head h2{font-size:1.5rem;}
  .section-head .count{color:var(--text-dim); font-size:0.88rem;}

  .helper-text{
    color:var(--text-dim);
    font-size:0.92rem;
    margin-bottom:1.4rem;
    max-width:60ch;
  }

  /* ---------- Ranking table ---------- */
  table.rank{
    width:100%;
    border-collapse:collapse;
  }
  table.rank th{
    text-align:left;
    font-size:0.78rem;
    letter-spacing:0.02em;
    color:var(--text-dim);
    font-weight:600;
    padding:0 0.7rem 0.7rem;
    border-bottom:1px solid var(--line);
  }
  table.rank td{
    padding:1rem 0.7rem;
    border-bottom:1px solid var(--line);
    vertical-align:middle;
    font-size:1rem;
  }
  table.rank tr:last-child td{border-bottom:none;}
  .rank-num{
    font-family:'IBM Plex Mono', monospace;
    color:var(--brass-dim);
    width:2.2rem;
    font-size:1rem;
  }
  .rank-num.top{color:var(--brass); font-weight:600;}
  .player-name{font-weight:600;}
  .player-name.clickable{
    cursor:pointer;
    text-decoration:underline;
    text-decoration-color:var(--line);
    text-underline-offset:3px;
  }
  .player-name.clickable:hover{color:var(--brass);}
  .player-row{display:flex; align-items:center; gap:0.75rem;}
  .disc{
    width:1.7rem; height:1.7rem; border-radius:50%;
    flex:none;
    border:1px solid rgba(0,0,0,0.35);
  }
  .disc.w{background:var(--white-disc);}
  .disc.b{background:var(--black-disc); border-color:rgba(255,255,255,0.18);}
  .elo{font-family:'IBM Plex Mono', monospace; font-weight:600; font-size:1.08rem;}
  .form-tag{
    font-family:'IBM Plex Mono', monospace;
    font-size:0.88rem;
    padding:0.15rem 0.45rem;
    border-radius:4px;
    white-space:nowrap;
  }
  .form-tag.up{color:var(--good);}
  .form-tag.down{color:var(--ring);}
  .record{color:var(--text-dim); font-size:0.92rem; font-family:'IBM Plex Mono', monospace;}

  /* ---------- Results ---------- */
  .result-row{
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:1.1rem;
    padding:1rem 0.2rem;
    border-bottom:1px solid var(--line);
  }
  .result-row:last-child{border-bottom:none;}
  .result-date{color:var(--text-dim); font-size:0.85rem; font-family:'IBM Plex Mono', monospace; width:4.4rem;}
  .result-players{font-size:1rem;}
  .result-players .winner{font-weight:700;}
  .result-players .vs{color:var(--text-dim); margin:0 0.4rem; font-size:0.85rem;}
  .result-score{font-family:'IBM Plex Mono', monospace; color:var(--brass); font-weight:600;}
  .result-score.decided-by-winner{color:var(--text-dim); font-style:italic; font-size:0.85rem;}
  .elo-delta{font-family:'IBM Plex Mono', monospace; font-size:0.85rem; text-align:right; width:6rem;}
  .elo-delta .plus{color:var(--good);}
  .elo-delta .minus{color:var(--ring);}

  .show-more{
    margin-top:1.3rem;
    width:100%;
    padding:0.8rem;
    background:transparent;
    border:1px solid var(--line);
    color:var(--text-dim);
    font-family:'Public Sans', sans-serif;
    font-size:0.9rem;
    font-weight:600;
    border-radius:8px;
    cursor:pointer;
    transition:border-color .15s ease, color .15s ease;
  }
  .show-more:hover{border-color:var(--brass-dim); color:var(--parchment);}
  #results-hidden{display:none;}

  /* ---------- Bracket ---------- */
  .tournament-picker{
    display:flex;
    align-items:center;
    gap:0.7rem;
    margin-bottom:1.6rem;
    flex-wrap:wrap;
  }
  .tournament-picker select{
    background:var(--panel-alt);
    border:1px solid var(--line);
    color:var(--parchment);
    border-radius:6px;
    padding:0.55rem 0.7rem;
  }
  .status-pill{
    font-family:'IBM Plex Mono', monospace;
    font-size:0.78rem;
    padding:0.2rem 0.55rem;
    border-radius:999px;
    border:1px solid var(--line);
  }
  .status-pill.aktiv{color:var(--good); border-color:var(--good);}
  .status-pill.arkiveret{color:var(--text-dim);}

  .bracket-scroll{
    overflow-x:auto;
    padding-bottom:1rem;
  }
  .bracket-labels{
    display:flex;
  }
  .bracket-labels .col-label{
    font-family:'IBM Plex Mono', monospace;
    font-size:0.75rem;
    letter-spacing:0.04em;
    color:var(--text-dim);
    margin-bottom:0.7rem;
  }
  .bracket-canvas{
    position:relative;
  }
  .b-match{
    position:absolute;
    border:1px solid var(--line);
    border-radius:8px;
    background:var(--panel);
    overflow:hidden;
  }
  .b-match .slot{
    display:flex;
    justify-content:space-between;
    align-items:center;
    height:50%;
    padding:0 0.8rem;
    font-size:0.92rem;
  }
  .b-match .slot + .slot{border-top:1px solid var(--line);}
  .b-match .slot.winner{color:var(--brass); font-weight:600;}
  .b-match .slot.loser{color:var(--text-dim);}
  .b-match .slot .score{font-family:'IBM Plex Mono', monospace;}
  .b-line-h{position:absolute; height:1px; background:var(--line);}
  .b-line-v{position:absolute; width:1px; background:var(--line);}
  .hidden-note{
    border:1px dashed var(--line);
    border-radius:10px;
    padding:2rem;
    text-align:center;
    color:var(--text-dim);
  }

  /* ---------- Odds ---------- */
  .odds-card{
    border:1px solid var(--line);
    border-radius:10px;
    background:var(--panel);
    padding:1.4rem;
    margin-bottom:1.2rem;
  }
  .odds-title{
    font-size:0.82rem;
    color:var(--text-dim);
    font-family:'IBM Plex Mono', monospace;
    margin-bottom:1rem;
  }
  .odds-players{
    display:flex;
    justify-content:space-between;
    font-weight:600;
    margin-bottom:0.7rem;
    font-size:1.05rem;
  }
  .odds-bar{
    display:flex;
    height:16px;
    border-radius:999px;
    overflow:hidden;
    background:var(--line);
    margin-bottom:0.7rem;
    border:1px solid var(--brass-dim);
  }
  .odds-bar .a{background:var(--brass);}
  .odds-bar .b{background:var(--parchment);}
  .odds-pct{
    display:flex;
    justify-content:space-between;
    font-family:'IBM Plex Mono', monospace;
    font-size:0.9rem;
    color:var(--text-dim);
  }
  .odds-pct .fav{color:var(--brass);}

  /* ---------- Admin ---------- */
  .admin-gate{
    border:1px dashed var(--line);
    border-radius:10px;
    padding:1.4rem 1.6rem;
    color:var(--text-dim);
    font-size:0.92rem;
    margin-bottom:1.8rem;
  }
  .admin-gate .mono{display:block; margin-top:0.6rem; font-size:0.82rem; color:var(--brass-dim);}

  .admin-block{
    border:1px solid var(--line);
    border-radius:10px;
    background:var(--panel);
    padding:1.5rem;
    margin-bottom:1.6rem;
  }
  .admin-block h3{font-size:1.1rem; margin-bottom:0.3rem;}
  .admin-block .block-note{color:var(--text-dim); font-size:0.88rem; margin-bottom:1.2rem;}

  .mode-toggle{
    display:flex;
    gap:0.5rem;
    margin-bottom:1.3rem;
  }
  .mode-toggle button{
    flex:1;
    padding:0.65rem;
    background:var(--panel-alt);
    border:1px solid var(--line);
    color:var(--text-dim);
    font-weight:600;
    font-size:0.9rem;
    border-radius:6px;
    cursor:pointer;
  }
  .mode-toggle button.active{
    background:var(--brass);
    color:var(--bg);
    border-color:var(--brass);
  }

  .field-row{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    gap:0.9rem;
    align-items:end;
    margin-bottom:1.1rem;
  }
  .field{display:flex; flex-direction:column; gap:0.4rem;}
  .field label{font-size:0.82rem; color:var(--text-dim);}
  .field select, .field input{
    background:var(--panel-alt);
    border:1px solid var(--line);
    color:var(--parchment);
    border-radius:6px;
    padding:0.6rem 0.7rem;
    font-family:'Public Sans', sans-serif;
  }
  .vs-label{
    color:var(--text-dim);
    font-family:'IBM Plex Mono', monospace;
    font-size:0.85rem;
    padding-bottom:0.65rem;
    text-align:center;
  }

  .winner-pick{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    gap:0.9rem;
    align-items:center;
    margin-bottom:1.1rem;
  }
  .winner-btn{
    padding:1rem;
    background:var(--panel-alt);
    border:1px solid var(--line);
    color:var(--parchment);
    border-radius:8px;
    font-weight:600;
    text-align:center;
    cursor:pointer;
    transition:border-color .15s ease, background .15s ease;
  }
  .winner-btn.selected{
    border-color:var(--brass);
    background:rgba(211,163,85,0.16);
    color:var(--brass);
  }

  .submit-btn{
    width:100%;
    padding:0.8rem;
    background:var(--brass);
    color:var(--bg);
    border:none;
    border-radius:6px;
    font-weight:700;
    font-size:0.95rem;
    cursor:pointer;
    margin-top:0.5rem;
  }
  .submit-btn:hover{background:#7a5019;}
  .admin-preview{
    margin-top:1rem;
    font-family:'IBM Plex Mono', monospace;
    font-size:0.85rem;
    color:var(--text-dim);
    min-height:1.3rem;
    line-height:1.5;
  }

  .visibility-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0.9rem 0;
    border-bottom:1px solid var(--line);
    gap:1rem;
  }
  .visibility-row:last-child{border-bottom:none;}
  .visibility-label{font-weight:600;}
  .visibility-desc{color:var(--text-dim); font-size:0.85rem; margin-top:0.2rem;}

  .switch{
    position:relative;
    width:3.1rem;
    height:1.7rem;
    flex:none;
  }
  .switch input{opacity:0; width:0; height:0;}
  .switch-track{
    position:absolute; inset:0;
    background:var(--panel-alt);
    border:1px solid var(--line);
    border-radius:999px;
    cursor:pointer;
    transition:background .15s ease;
  }
  .switch-track::after{
    content:"";
    position:absolute;
    top:2px; left:2px;
    width:1.3rem; height:1.3rem;
    background:var(--text-dim);
    border-radius:50%;
    transition:transform .15s ease, background .15s ease;
  }
  .switch input:checked + .switch-track{background:rgba(211,163,85,0.35); border-color:var(--brass-dim);}
  .switch input:checked + .switch-track::after{transform:translateX(1.4rem); background:var(--brass);}

  .tournament-list{border:1px solid var(--line); border-radius:8px; overflow:hidden;}  .tournament-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    padding:0.9rem 1.1rem;
    border-bottom:1px solid var(--line);
    background:var(--panel-alt);
  }
  .tournament-item:last-child{border-bottom:none;}
  .tournament-name{font-weight:600;}
  .tournament-actions{display:flex; align-items:center; gap:0.8rem;}
  .archive-btn{
    font-family:'Public Sans', sans-serif;
    font-size:0.82rem;
    font-weight:600;
    color:var(--text-dim);
    background:transparent;
    border:1px solid var(--line);
    padding:0.4rem 0.8rem;
    border-radius:6px;
    cursor:pointer;
  }
  .archive-btn:hover{border-color:var(--brass-dim); color:var(--parchment);}

  .trophy-badge{
    font-size:0.85rem;
    margin-left:0.15rem;
  }
  .delete-btn{
    font-family:'Public Sans', sans-serif;
    font-size:0.82rem;
    font-weight:600;
    color:var(--ring);
    background:transparent;
    border:1px solid var(--line);
    padding:0.4rem 0.8rem;
    border-radius:6px;
    cursor:pointer;
  }
  .delete-btn:hover{border-color:var(--ring); background:rgba(140,58,48,0.08);}

  /* ---------- Fantasy ---------- */
  .squad-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0.8rem 0;
    border-bottom:1px solid var(--line);
    gap:1rem;
  }
  .squad-row:last-child{border-bottom:none;}
  .squad-row.disabled{opacity:0.4;}
  .squad-left{display:flex; align-items:center; gap:0.8rem;}
  .squad-cost{font-family:'IBM Plex Mono', monospace; color:var(--text-dim); font-size:0.9rem; white-space:nowrap;}
  .squad-check{width:1.35rem; height:1.35rem; accent-color:var(--brass); flex:none;}

  .fantasy-row{
    display:flex;
    align-items:center;
    gap:1rem;
    padding:0.9rem 0;
    border-bottom:1px solid var(--line);
  }
  .fantasy-row:last-child{border-bottom:none;}
  .fantasy-rank{font-family:'IBM Plex Mono', monospace; color:var(--brass-dim); width:1.6rem;}
  .fantasy-info{flex:1;}
  .fantasy-manager{font-weight:600;}
  .fantasy-squad{color:var(--text-dim); font-size:0.85rem; margin-top:0.15rem;}
  .fantasy-points{font-family:'IBM Plex Mono', monospace; font-weight:700; color:var(--brass); font-size:1.1rem;}

  /* ---------- Player profile ---------- */
  #profile-chart{overflow:visible;}
  .profile-stat-row{display:flex; gap:1.8rem; margin-bottom:0.2rem; flex-wrap:wrap;}
  .profile-stat{font-family:'IBM Plex Mono', monospace; color:var(--text-dim); font-size:0.9rem;}
  .profile-stat b{color:var(--parchment); font-family:'Public Sans', sans-serif;}

  footer{
    text-align:center;
    color:var(--text-dim);
    font-size:0.8rem;
    padding:2.2rem 1.5rem 3rem;
    border-top:1px solid var(--line);
  }

  @media (max-width:560px){
    table.rank th:nth-child(4), table.rank td:nth-child(4){display:none;}
    .field-row, .winner-pick{grid-template-columns:1fr; }
    .vs-label{display:none;}
    body{font-size:16px;}
  }
