/* style.css - dark material style (cards, elevation, rounded corners) */
:root {
  color-scheme: dark;
  --primary:#3b82f6; --primary-dark:#2563eb; --primary-soft:rgba(77,163,255,.16); --primary-text:#7db8ff;
  --bg:#0d1117; --paper:#161c26; --raised:#1d2532; --ink:#e6ebf2; --muted:#98a4b8; --line:#2a3445;
  --win:#5bd18a; --win-soft:rgba(91,209,138,.14);
  --e1:0 1px 3px rgba(0,0,0,.5); --e2:0 6px 18px rgba(0,0,0,.55); --e3:0 16px 44px rgba(0,0,0,.7);
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:Roboto, "Segoe UI", Arial, sans-serif; }
button { font:inherit; cursor:pointer; }
a { color:inherit; text-decoration:none; }

/* app bar */
.appbar { background:var(--paper); border-bottom:1px solid var(--line); box-shadow:var(--e1); position:sticky; top:0; z-index:5; }
.bar { max-width:1700px; margin:0 auto; padding:10px 20px; display:flex; align-items:center; gap:12px; }
.brand { flex:1; min-width:0; }
.brand h1 { margin:0; font-size:1.25rem; font-weight:700; }
.brand p { margin:2px 0 0; font-size:.8rem; color:var(--muted); }
.btn { display:inline-block; padding:9px 18px; border:0; border-radius:8px; background:var(--primary); color:#fff; font-weight:500; letter-spacing:.03em; box-shadow:var(--e1); transition:box-shadow .2s, background .2s, transform .1s; }
.btn:hover { background:var(--primary-dark); box-shadow:var(--e2); }
.btn:active { transform:scale(.97); }
.btn.ghost { background:transparent; border:1px solid var(--line); color:var(--primary-text); box-shadow:none; }
.btn.ghost:hover { background:var(--primary-soft); }

/* logos: image or letter placeholder */
.logo { display:inline-flex; align-items:center; justify-content:center; flex:none; width:28px; height:28px; border-radius:50%; background:var(--primary-soft); color:var(--primary-text); font-size:.62rem; font-weight:700; overflow:hidden; }
.logo img { width:100%; height:100%; object-fit:contain; }
.logo.lg { width:64px; height:64px; font-size:1.1rem; }
.logo.xl { width:46px; height:46px; font-size:.85rem; }
.zoom { cursor:zoom-in; transition:transform .2s; }
.zoom:hover { transform:scale(1.12); }

.page { max-width:1700px; margin:0 auto; padding:16px 20px 48px; }
.hint { text-align:center; color:var(--muted); font-size:.9rem; margin:4px 0 12px; }
.paper { background:var(--paper); border:1px solid var(--line); border-radius:14px; box-shadow:var(--e1); padding:18px; margin-bottom:16px; }
.paper h2 { margin:0 0 6px; font-size:1.15rem; }
.muted { color:var(--muted); }
#summary { scroll-margin-top:84px; }

/* bracket tree (desktop) */
#bracket { overflow-x:auto; }
.wrap { position:relative; display:block; min-width:1415px; }
.grid { display:flex; gap:20px; justify-content:center; position:relative; z-index:1; }
.col { display:flex; flex-direction:column; flex:1 1 0; min-width:185px; max-width:230px; }
.col h3 { margin:0 0 10px; font-size:.72rem; text-align:center; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
.stack { flex:1; display:flex; flex-direction:column; justify-content:space-around; gap:18px; }
#lines { position:absolute; left:0; top:0; pointer-events:none; }
.line { fill:none; stroke:#4a5a75; stroke-width:2; stroke-dasharray:900; stroke-dashoffset:900; animation:draw 1.1s .3s ease forwards; }
@keyframes draw { to { stroke-dashoffset:0; } }

/* match card */
.match { display:block; width:100%; padding:0; text-align:left; background:var(--raised); color:inherit; border:1px solid var(--line); border-radius:12px; overflow:hidden; box-shadow:var(--e1);
  transition:box-shadow .2s, transform .2s, border-color .2s; animation:rise .5s ease backwards; animation-delay:calc(var(--i, 0) * 60ms); }
.match:hover, .match:focus-visible { box-shadow:var(--e2); transform:translateY(-3px); border-color:var(--primary); outline:none; }
.mhead { display:flex; justify-content:space-between; padding:4px 10px; font-size:.68rem; letter-spacing:.05em; text-transform:uppercase; background:#0f141c; color:var(--muted); }
.mhead .done { color:var(--win); font-weight:700; }
.slot { display:flex; align-items:center; gap:6px; padding:8px 10px; font-size:.85rem; }
.slot + .slot { border-top:1px solid var(--line); }
.seed { width:16px; color:var(--muted); font-size:.75rem; }
.nm { flex:1; min-width:0; line-height:1.2; overflow-wrap:break-word; }
.sc { font-weight:700; }
.slot.win { background:var(--win-soft); font-weight:700; }
.slot.win .sc { color:var(--win); }
.slot.lose { color:var(--muted); }
.slot.tbd .nm { color:var(--muted); font-style:italic; }
@keyframes rise { from { opacity:0; transform:translateY(14px); } }

/* tabs (mobile) */
.tabs { display:flex; gap:4px; overflow-x:auto; border-bottom:1px solid var(--line); margin:-6px -6px 14px; }
.tab { flex:none; border:0; background:none; padding:12px 14px; color:var(--muted); font-weight:500; border-bottom:3px solid transparent; transition:color .2s, border-color .2s; }
.tab.on { color:var(--primary-text); border-color:var(--primary); }
.cards { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:14px; }

/* popups */
dialog { width:min(920px, 96vw); max-height:92vh; border:1px solid var(--line); border-radius:16px; padding:22px; background:var(--paper); box-shadow:var(--e3); color:var(--ink); }
dialog[open] { animation:pop .28s cubic-bezier(.2,.8,.3,1); }
dialog::backdrop { background:rgba(0,0,0,.7); animation:fade .25s ease; }
@keyframes pop { from { opacity:0; transform:translateY(24px) scale(.97); } }
@keyframes fade { from { opacity:0; } }
.x { position:absolute; right:12px; top:8px; width:36px; height:36px; border:0; border-radius:50%; background:none; font-size:1.6rem; color:var(--muted); transition:background .2s; }
.x:hover { background:var(--raised); color:var(--ink); }
#modal-body h2 { margin:0 0 2px; font-size:1.2rem; }
#modal-body h3 { margin:18px 0 6px; font-size:1rem; }
.vs { display:flex; align-items:center; justify-content:center; gap:18px; margin:14px 0; text-align:center; }
.side { flex:1; max-width:260px; display:flex; flex-direction:column; align-items:center; gap:4px; padding:12px; border-radius:12px; background:var(--raised); }
.side.win { background:var(--win-soft); }
.tn { font-weight:700; }
.big { font-size:2.2rem; font-weight:700; line-height:1; }
.side.win .big { color:var(--win); }
.vtxt { color:var(--muted); font-weight:700; }
.chip { display:inline-block; padding:3px 12px; border-radius:16px; background:var(--primary-soft); color:var(--primary-text); font-size:.8rem; font-weight:500; }
.chip.win { background:var(--win-soft); color:var(--win); }
.center { text-align:center; margin:0 0 6px; }
.reason { text-align:center; margin:8px 0; padding:10px 14px; border-radius:10px; background:var(--raised); }
.filters { display:flex; gap:10px; margin:8px 0; flex-wrap:wrap; }
select { font:inherit; padding:7px 10px; border:1px solid var(--line); border-radius:8px; background:var(--raised); color:var(--ink); }
.note { font-size:.8rem; color:var(--muted); margin:2px 0 8px; }
.tbl { overflow-x:auto; border:1px solid var(--line); border-radius:10px; margin-bottom:12px; }
table { border-collapse:collapse; width:100%; font-size:.86rem; }
th, td { padding:8px 10px; border-bottom:1px solid var(--line); }
td { white-space:nowrap; }
tbody tr:hover { background:var(--primary-soft); }
tbody tr:last-child td { border-bottom:0; }
td.n { text-align:right; font-variant-numeric:tabular-nums; }
th { background:#0f141c; text-align:left; vertical-align:bottom; min-width:84px; }
.sort { border:0; background:none; font-weight:700; padding:0; text-align:left; color:var(--ink); }
.sort:hover { color:var(--primary-text); }
/* first column stays visible when the table scrolls sideways on phones */
tbody td:first-child, thead th:first-child { position:sticky; left:0; }
tbody td:first-child { background:var(--paper); }
thead th:first-child { background:#0f141c; }

/* footer with social links */
.footer { border-top:1px solid var(--line); background:var(--paper); text-align:center; padding:22px 16px 28px; color:var(--muted); font-size:.85rem; }
.footer p { margin:0; }
.socials { display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin-top:12px; }
.social { display:inline-flex; align-items:center; gap:8px; padding:8px 16px 8px 12px; border:1px solid var(--line); border-radius:24px; color:var(--ink); transition:border-color .2s, background .2s, transform .2s; }
.social:hover, .social:focus-visible { border-color:var(--primary); background:var(--primary-soft); transform:translateY(-2px); outline:none; }
.ico { display:inline-flex; width:22px; height:22px; color:var(--primary-text); }
.ico img, .ico svg { width:100%; height:100%; object-fit:contain; }

/* image popup */
#lightbox { width:auto; max-width:94vw; text-align:center; }
#lb-img { display:block; max-width:100%; max-height:68vh; margin:14px auto; border-radius:8px; background:var(--raised); }
.lb-bar { display:flex; align-items:center; justify-content:center; gap:16px; font-weight:700; }

/* summary */
.sum-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(290px, 1fr)); gap:14px; margin-top:12px; }
.sum-card { background:var(--raised); border:1px solid var(--line); border-radius:12px; padding:14px 16px; animation:rise .5s ease backwards; }
.sum-card h3 { margin:0 0 8px; font-size:.95rem; color:var(--primary-text); }
.sum-card ul, .sum-card ol { margin:0; padding-left:20px; font-size:.88rem; line-height:1.55; }
.sum-card li { margin-bottom:3px; }

/* header on small screens: row 1 = logo + title, row 2 = the two buttons side by side, same width */
@media (max-width:700px) {
  .bar { padding:8px 12px; gap:8px; flex-wrap:wrap; }
  .brand { flex:1 1 calc(100% - 56px); } .brand h1 { font-size:1rem; } .brand p { display:none; }
  .bar .btn { flex:1 1 calc(50% - 4px); text-align:center; padding:9px 12px; font-size:.82rem; }
}
@media (max-width:600px) {
  .page { padding:10px 10px 40px; } .paper { padding:12px; }
  dialog { width:100vw; max-width:100vw; max-height:94vh; margin:auto 0 0; padding:16px 12px; border-radius:18px 18px 0 0; }
  #lightbox { width:96vw; margin:auto; border-radius:16px; }
  .vs { gap:8px; } .big { font-size:1.8rem; } .logo.lg { width:48px; height:48px; }
}
@media (prefers-reduced-motion:reduce) { * { animation:none !important; transition:none !important; scroll-behavior:auto !important; } .line { stroke-dashoffset:0; } }