:root{
  --bg:#050912;
  --panel:#0b111b;
  --card:#0a0f19;
  --muted:#b0b9c6;
  --text:#f1f5fa;
  --accent:#ffd560;
  --accent-2:#f5a623;
  --line:rgba(255,255,255,0.08);
  --glass:rgba(255,255,255,0.03);
  --shadow:0 12px 40px rgba(2,6,23,0.65);
  --elev:0 6px 18px rgba(2,6,23,0.55);
  --radius:12px;
  --pad:16px;
  --transition:220ms cubic-bezier(.2,.9,.3,1);
  --focus: 0 0 0 4px rgba(255,213,96,0.12);
  --glass-strong: rgba(255,255,255,0.04);
}

/* base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial;
  background:
    radial-gradient(1200px 600px at 10% 10%, rgba(21,30,50,0.25), transparent 8%),
    linear-gradient(180deg,#04070e 0%, #080e19 100%);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.35;
  font-feature-settings: "ss01" on;
  -webkit-text-size-adjust:100%;
  padding:24px 0;
}

/* layout */
.container{
  max-width:1100px;
  margin:0 auto;
  padding:20px;
}

/* header */
.site-header{padding:12px 0}
.btn-back{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius:10px;
  color:var(--text);
  text-decoration:none;
  border:1px solid var(--line);
  font-weight:700;
  font-size:14px;
  transition:transform var(--transition), box-shadow var(--transition), background var(--transition);
  box-shadow:var(--elev);
}
.btn-back:focus{outline:0; box-shadow:var(--focus)}
.btn-back:hover{transform:translateY(-3px); box-shadow:var(--shadow)}

/* panel / cards */
.panel{
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius:var(--radius);
  padding:22px;
  box-shadow:var(--shadow);
  border:1px solid rgba(255,255,255,0.06);
  backdrop-filter:blur(6px) saturate(120%);
}
.panel-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}
.muted{color:var(--muted)}
.updated{font-size:13px;color:var(--muted)}

/* grid */
.grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin-top:18px;
}

.card{
  background:linear-gradient(180deg, rgba(255,255,255,0.018), rgba(255,255,255,0.01));
  padding:16px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.04);
  transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  box-shadow:var(--elev);
}
.card:hover{transform:translateY(-6px); box-shadow:var(--shadow); border-color:rgba(255,213,96,0.08)}
.card.big{
  grid-column: span 3;
  display:flex;
  gap:18px;
  align-items:center;
  justify-content:space-between;
  padding:22px;
}
.card h3{
  margin:0 0 8px 0;
  font-size:18px;
  font-weight:800;
  letter-spacing:0.2px;
}

/* rows / tables */
.row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 0;
  border-top:1px dashed var(--line);
}
.row:first-child{border-top:0}

/* player */
.player{
  display:flex;
  align-items:center;
  gap:12px;
}
.player img{
  width:64px;
  height:64px;
  object-fit:cover;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.08);
  box-shadow:0 6px 18px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.02);
  transition:transform var(--transition);
}
.player img:hover{transform:translateY(-4px) scale(1.02)}

/* pct */
.pct{
  font-weight:900;
  min-width:64px;
  text-align:right;
  font-size:15px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  letter-spacing:0.2px;
}

/* progress bar */
.bar{
  height:12px;
  background:rgba(255,255,255,0.06);
  border-radius:999px;
  overflow:hidden;
  flex:1;
  margin-left:12px;
  margin-right:12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.02);
  transition:opacity var(--transition);
}
.bar > i{
  height:100%;
  display:block;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  transition:width 600ms cubic-bezier(.2,.9,.3,1);
  box-shadow:0 6px 18px rgba(244,170,40,0.06) inset;
}

/* images */
.deck-thumb{
  width:100px;
  height:64px;
  object-fit:cover;
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.05);
  box-shadow:0 8px 20px rgba(0,0,0,0.55);
}

/* small text */
.small{
  font-size:13px;
  color:var(--muted);
}

/* highlight */
.highlight{
  border:1px solid rgba(234,179,8,0.22);
  box-shadow:0 18px 40px rgba(234,179,8,0.06);
  background:linear-gradient(90deg, rgba(234,179,8,0.06), rgba(234,179,8,0.01));
}

/* winners list */
.section-title{
  font-weight:900;
  font-size:18px;
  letter-spacing:0.3px;
}
.winners-grid{
  display:grid;
  gap:14px;
  margin-top:12px;
}
.winner-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:14px;
  border-radius:10px;
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border:1px solid rgba(255,255,255,0.03);
  transition:transform var(--transition), box-shadow var(--transition);
}
.winner-row:hover{transform:translateY(-6px); box-shadow:var(--shadow)}
.winner-left{
  display:flex;
  gap:12px;
  align-items:center;
}
.winner-left img{
  width:56px;
  height:56px;
  object-fit:cover;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.08);
  box-shadow:0 8px 20px rgba(0,0,0,0.45);
}
.meta-title{
  font-weight:800;
  font-size:15px;
}
.meta-notes{
  font-size:12px;
  color:var(--muted);
}

/* focus / accessibility */
a:focus, button:focus, input:focus, .card:focus{
  outline:0;
  box-shadow:var(--focus);
  border-radius:10px;
}

/* responsiveness */
@media(max-width:1100px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .card.big{grid-column:span 2}
}
@media(max-width:700px){
  .grid{grid-template-columns:1fr}
  .card.big{
    grid-column:span 1;
    flex-direction:column;
    align-items:flex-start;
  }
  .player img, .winner-left img{width:48px;height:48px}
  .deck-thumb{width:80px;height:48px}
}

/* images safety */
img{max-width:100%;display:block}

/* micro details */
.card h3 small{font-weight:600; color:var(--muted); margin-left:8px; font-size:12px}
.muted.upper{ text-transform:uppercase; letter-spacing:1px; font-size:12px; color:rgba(176,185,198,0.7) }