:root {
  --gold: #d9a520;
  --ink: #1a1a1a;
  --mute: #8a8a8a;
  --rule: #e6e6e6;
  --soft: #f6f6f6;
  --win: #2e9e5b;
  --loss: #d9483b;
  --push: #b5b5b5;
  --on: #1a1a1a;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: #fff; color: var(--ink);
  font: 14px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
button:disabled { cursor: default; }
#app { max-width: 1240px; margin: 0 auto; padding: 0 20px 60px; }

.top { display: flex; align-items: baseline; gap: 28px; padding: 18px 0 10px; font-size: 15px; }
.top .rec b { font-weight: 600; }
.top .who { margin-left: auto; color: var(--mute); font-size: 13px; }

.tabs { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--rule); margin-bottom: 14px; }
.tab { position: relative; padding: 8px 10px 9px; color: var(--mute); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tab.on { color: var(--ink); border-bottom-color: var(--ink); }
.tab:hover { color: var(--ink); }
.dot { position: absolute; top: 5px; right: 3px; width: 5px; height: 5px; border-radius: 50%; }
.dot.win { background: var(--win); }
.dot.loss { background: var(--loss); }
.dot.tie { background: var(--push); }

.bar { display: flex; align-items: center; justify-content: space-between; padding: 6px 0 12px; font-size: 15px; }
.bar .ctl { display: flex; gap: 8px; align-items: center; }
.bar .recs { display: flex; gap: 20px; }
.bar .recs b { font-weight: 600; }
.muted { color: var(--mute); }
.help { color: var(--mute); font-size: 12px; text-align: right; line-height: 1.35; }
.btn { padding: 6px 14px; border: 1px solid var(--ink); border-radius: 4px; background: var(--ink); color: #fff; }
.btn:disabled { background: none; color: var(--mute); border-color: var(--rule); }
.btn.ghost { background: none; color: var(--ink); }

.heads, .row { display: grid; grid-template-columns: 250px 1fr 1fr; gap: 0; }
.heads > span { padding: 0 0 6px 32px; text-align: center; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--mute); }
.heads > span:first-child { padding-left: 0; }
.heads .locked { color: var(--ink); text-transform: none; letter-spacing: 0; margin-left: 6px; }
.row { padding: 14px 0; border-top: 1px solid var(--rule); align-items: center; }
.row:last-child { border-bottom: 1px solid var(--rule); }
.gold { color: var(--gold); }
.row.split .theirs .pick::before { content: ""; position: absolute; top: -3px; bottom: -3px; left: -166px; right: -3px;
  border: 2px solid var(--gold); border-radius: 6px; pointer-events: none; }
.row > .mine, .row > .theirs { padding-left: 16px; margin-left: 16px; border-left: 1px solid var(--rule); align-self: stretch; }

.game { display: flex; flex-direction: column; gap: 4px; }
.match { display: flex; align-items: center; justify-content: center; gap: 16px; }
.helm { width: 56px; height: 51px; display: inline-block; }
.vs { font-weight: 600; font-size: 15px; }
.line { display: flex; justify-content: center; align-items: baseline; gap: 12px; color: var(--mute); font-size: 13px; white-space: nowrap; }
.line b { color: var(--ink); font-size: 14px; font-weight: 600; }

.mine, .theirs { display: grid; grid-template-columns: 1fr 130px; gap: 12px; align-items: stretch; }
.theirs { grid-template-columns: 130px 1fr; }

.notes { width: 100%; min-height: 76px; padding: 8px 10px; border: 1px solid var(--rule); border-radius: 4px;
  background: var(--soft); font: inherit; color: inherit; resize: vertical; }
.notes:focus { outline: none; border-color: #bbb; background: #fff; }
.notes.ro { white-space: pre-wrap; overflow: auto; }

.pick { position: relative; display: flex; gap: 6px; align-items: center; justify-content: center; padding: 6px;
  border: 1px solid var(--rule); border-radius: 4px; min-height: 76px; }
.team { width: 54px; min-height: 54px; display: flex; flex-direction: column; gap: 3px; align-items: center; justify-content: center; opacity: .45; border-radius: 4px; }
.team.on::after { display: block; width: 14px; height: 14px; line-height: 0; }
.pick.win .team.on::after { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.5l3.5 3.5 7.5-8' fill='none' stroke='%232e9e5b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.pick.loss .team.on::after { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 3.5l9 9M12.5 3.5l-9 9' fill='none' stroke='%23d9483b' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E"); }
.pick.push .team.on::after { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h10' fill='none' stroke='%23b5b5b5' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E"); }
.team img { max-width: 48px; max-height: 44px; }
.team:not(:disabled):hover { opacity: .8; background: var(--soft); }
.pick.picked .team { opacity: .1; }
.pick .team.on { opacity: 1; }
button.team:disabled { cursor: default; }

.veil > * { filter: blur(6px); opacity: .5; pointer-events: none; user-select: none; }

.stats table { border-collapse: collapse; margin: 0 0 28px; min-width: 360px; }
.stats th, .stats td { padding: 6px 14px 6px 0; text-align: left; border-bottom: 1px solid var(--rule); }
.stats th { font-weight: 600; }
.stats td:first-child { color: var(--mute); }
.stats .teams td:first-child { color: var(--ink); white-space: nowrap; }
.stats .teams thead tr:first-child th { border-bottom: 0; padding-bottom: 0; }
.stats .grp { color: var(--mute); font-weight: 500; text-align: center; }
.stats th.sort { cursor: pointer; user-select: none; }
.stats th.sort.asc::after { content: " \2191"; color: var(--mute); }
.stats th.sort.desc::after { content: " \2193"; color: var(--mute); }
.mini { width: 18px; height: 18px; vertical-align: middle; object-fit: contain; margin-right: 4px; }

body.login { display: flex; min-height: 100vh; align-items: center; justify-content: center; }
body.login form { display: flex; flex-direction: column; gap: 14px; width: 240px; }
.names { display: flex; gap: 8px; }
.names label { flex: 1; }
.names input { display: none; }
.names span { display: block; text-align: center; padding: 10px; border: 1px solid var(--rule); border-radius: 4px; color: var(--mute); }
.names input:checked + span { border-color: var(--ink); color: var(--ink); }
body.login .field { display: flex; flex-direction: column; gap: 4px; }
body.login .field span { font-size: 12px; color: var(--mute); }
body.login .field[hidden] { display: none; }
body.login input[type=password] { padding: 10px; border: 1px solid var(--rule); border-radius: 4px; font: inherit; width: 100%; }
body.login .err { min-height: 18px; font-size: 13px; color: var(--loss); }
body.login form.bad input[type=password] { border-color: var(--loss); }
body.login button { padding: 10px; border-radius: 4px; background: var(--ink); color: #fff; }

@media (max-width: 900px) {
  .heads { display: none; }
  .row { grid-template-columns: 1fr; gap: 12px; }
  .row > .mine, .row > .theirs { padding-left: 0; margin-left: 0; border-left: 0; }
  .row.split .theirs .pick::before { display: none; }
  .row.split .pick:not(.win):not(.loss):not(.push) { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
  .game { align-items: stretch; }
  .mine, .theirs { grid-template-columns: 1fr 110px; }
  .theirs { grid-template-columns: 110px 1fr; }
  .top { flex-wrap: wrap; gap: 12px; }
}