:root{
  --bg:#0b0b0f; --panel:#121214; --panel-2:#16161a;
  --accent:#ef4444; --accent-2:#dc2626;
  --muted:#9b9b9f; --ok:#22c55e; --bad:#f43f5e; --gold:#fbbf24;
  --ink:#f5f5f7;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;background:
  radial-gradient(1200px 700px at 80% -20%, #1a0b0d 0%, #0b0b0f 60%); color:var(--ink)}
.app{min-height:100%;display:flex;flex-direction:column}

.topbar,.bottombar{
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  padding:.8rem 1rem;background:#0b0b0fe6;border-bottom:1px solid #1f1f23;backdrop-filter: blur(6px);
}
.bottombar{border-top:1px solid #1f1f23;border-bottom:none;margin-top:auto; font-size:.9rem; color:var(--muted)}

.brand{font-weight:800; letter-spacing:.3px}
.stats{display:flex;gap:.5rem;flex-wrap:wrap}
.pill{background:#121214;padding:.45rem .65rem;border-radius:999px;border:1px solid #2a2a2e;min-width:64px;text-align:center}
.pill.hearts{min-width:auto}

.actions{display:flex;gap:.5rem;flex-wrap:wrap}
.btn{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;border:none;padding:.55rem .9rem;border-radius:12px;font-weight:700;cursor:pointer;box-shadow:0 6px 16px #ef44442a;transition:.2s}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 20px #ef444440}
.btn.ghost{background:#0f0f12;color:#e5e7eb;border:1px solid #2a2a2e;box-shadow:none}
.btn.ghost:hover{border-color:#3a3a40}

.legend{max-width:1100px;margin:10px auto 0 auto;padding:0 1rem;color:#d6d6da}
.match-grid{display:grid;grid-template-columns:1fr;gap:1rem;max-width:1100px;margin:0 auto;padding:1rem}
@media (min-width: 880px){ .match-grid{grid-template-columns:1fr 1fr;} }

.col-title{margin:.2rem 0 .6rem 0;color:#ffb4b4;font-weight:800;letter-spacing:.3px}
.list{display:grid;grid-template-columns:1fr;gap:.6rem}
.item{
  background:linear-gradient(160deg,var(--panel),var(--panel-2));
  border:1px solid #2a2a2e; border-radius:14px; padding:.8rem .9rem; text-align:left; color:var(--ink);
  box-shadow: 0 10px 24px #00000065, inset 0 1px 0 #ffffff08; transition:.2s; cursor:pointer; position:relative;
}
.item:hover{transform:translateY(-1px); box-shadow: 0 14px 26px #00000085}
.item.selected{outline:2px solid var(--accent); box-shadow:0 0 0 2px var(--accent) inset}
.item.good{outline:2px solid var(--ok); box-shadow:0 0 0 2px var(--ok) inset}
.item.bad{animation:shake .25s linear 2; outline:2px solid var(--bad)}
.item.removed{opacity:0; transform:scale(.96); pointer-events:none; transition:opacity .25s ease, transform .25s ease}

.hint{animation:pulse 1s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.5)}50%{box-shadow:0 0 0 6px rgba(239,68,68,.15)}}

@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}

.overlay{position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:#000000b0; backdrop-filter: blur(6px); padding:1rem; z-index:10}
.hidden{display:none}
.panel{
  width:min(860px,95vw); background:linear-gradient(160deg,#121214,#0e0e11); border:1px solid #2a2a2e; border-radius:16px; box-shadow:0 20px 50px #00000090;
  padding:1rem 1.2rem;
}
.panel h2{margin:.3rem 0 1rem 0}
.panel .row{display:flex; gap:1rem; flex-wrap:wrap}
.panel .row > *{flex:1 1 260px}
.panel .muted{color:var(--muted)}
.panel .lead{font-size:1.05rem}
.table{width:100%; border-collapse: collapse; margin:.5rem 0}
.table th,.table td{border-bottom:1px dashed #3a3a40; padding:.5rem .25rem; text-align:left}
.table th{color:#ffb4b4; font-weight:600}

.heart{display:inline-block;width:20px;height:18px; margin-left:2px; background:
  radial-gradient(circle at 6px 6px, var(--accent) 6px, transparent 7px),
  radial-gradient(circle at 14px 6px, var(--accent) 6px, transparent 7px),
  linear-gradient(var(--accent) 0 0) bottom/16px 10px no-repeat;
  filter: drop-shadow(0 1px 2px #ef444466);
  transform: translateY(2px);
}
.heart.lost{opacity:.25; filter:grayscale(1)}