:root{
  --bg:#1b2838; --bg2:#171a21; --card:#2a3f5a; --card2:#223349;
  --accent:#66c0f4; --accent2:#4b9fd4; --green:#a4d007; --gold:#f0c43c;
  --text:#c7d5e0; --muted:#8f98a0; --border:#34435a;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:"Motiva Sans","Segoe UI",system-ui,sans-serif;
  background:linear-gradient(135deg,#1b2838,#171a21);
  color:var(--text);min-height:100vh;line-height:1.5;
}
header{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 28px;background:rgba(0,0,0,.25);border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:10;backdrop-filter:blur(8px);
}
header h1{font-size:1.5rem;font-weight:800}
.stats{color:var(--muted);font-size:.9rem}
main{max-width:1100px;margin:0 auto;padding:24px 20px 60px}
h2{font-size:1.15rem;margin-bottom:14px;color:#fff;font-weight:700}

.picker{background:rgba(0,0,0,.18);border:1px solid var(--border);border-radius:14px;padding:22px;margin-bottom:28px}
.mode-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.mode{
  display:flex;flex-direction:column;gap:4px;text-align:left;cursor:pointer;
  background:linear-gradient(135deg,var(--card),var(--card2));
  border:1px solid var(--border);border-radius:12px;padding:16px;color:var(--text);
  transition:.15s;
}
.mode:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.3)}
.mode.active{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent) inset}
.mi{font-size:1.6rem}
.mt{font-size:1.02rem;font-weight:600;color:#fff}
.mt b{color:var(--accent)}
.ms{font-size:.8rem;color:var(--muted)}

.controls{display:flex;flex-wrap:wrap;gap:20px;align-items:center;margin:20px 0 6px;padding-top:18px;border-top:1px solid var(--border)}
.controls label{font-size:.9rem;display:flex;align-items:center;gap:8px}
.controls input[type=range]{accent-color:var(--accent);width:180px}
.controls output{color:var(--accent);font-weight:700;min-width:46px}
.chk input{accent-color:var(--green);width:16px;height:16px}

#result{margin-top:20px}
.pick-card{
  display:flex;gap:18px;align-items:center;
  background:linear-gradient(135deg,#2a475e,#1b2838);
  border:1px solid var(--accent);border-radius:14px;padding:20px;
  animation:pop .3s ease;
}
@keyframes pop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
.pick-card img{width:120px;height:56px;object-fit:cover;border-radius:6px;background:#000}
.pick-info{flex:1}
.pick-info h3{font-size:1.3rem;color:#fff;margin-bottom:6px}
.pick-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.badge{font-size:.76rem;padding:3px 9px;border-radius:20px;background:var(--card);border:1px solid var(--border)}
.badge.green{background:rgba(164,208,7,.15);border-color:var(--green);color:var(--green)}
.badge.gold{background:rgba(240,196,60,.12);border-color:var(--gold);color:var(--gold)}
.badge.blue{background:rgba(102,192,244,.12);border-color:var(--accent);color:var(--accent)}
.pick-actions{display:flex;flex-direction:column;gap:8px}
.btn{cursor:pointer;border:none;border-radius:8px;padding:10px 18px;font-weight:600;font-size:.9rem;transition:.15s}
.btn.play{background:var(--green);color:#1b2838}
.btn.play:hover{filter:brightness(1.1)}
.btn.reroll{background:var(--card);color:var(--text);border:1px solid var(--border)}
.btn.reroll:hover{border-color:var(--accent)}
.empty{color:var(--muted);padding:20px;text-align:center;font-style:italic}

.lib-head{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:16px}
.lib-head h2{margin:0}
#libCount{color:var(--muted);font-size:.85rem;font-weight:400}
.lib-head input,.lib-head select{
  background:var(--card2);border:1px solid var(--border);color:var(--text);
  padding:8px 12px;border-radius:8px;font-size:.9rem;
}
.lib-head input[type=search]{flex:1;min-width:160px}
.lib-head input:focus,.lib-head select:focus{outline:none;border-color:var(--accent)}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.game{
  background:linear-gradient(135deg,var(--card2),#1b2838);
  border:1px solid var(--border);border-radius:10px;padding:12px;transition:.15s;
}
.game:hover{border-color:var(--accent2);transform:translateY(-2px)}
.game.installed{border-left:3px solid var(--green)}
.game h4{font-size:.95rem;color:#fff;margin-bottom:6px;display:flex;align-items:center;gap:6px}
.game .row{font-size:.78rem;color:var(--muted);display:flex;justify-content:space-between;margin-top:3px}
.game .cats{margin-top:8px;display:flex;flex-wrap:wrap;gap:4px}
.game .cat{font-size:.68rem;padding:2px 7px;border-radius:12px;background:var(--card);color:var(--muted)}
.achbar{height:6px;background:#0d1520;border-radius:4px;margin-top:8px;overflow:hidden}
.achbar>i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--green))}
.dot{width:7px;height:7px;border-radius:50%;display:inline-block}
.dot.on{background:var(--green)} .dot.off{background:var(--muted)}

footer{text-align:center;color:var(--muted);font-size:.78rem;padding:20px;border-top:1px solid var(--border)}
a{color:var(--accent);text-decoration:none}
@media(max-width:560px){.pick-card{flex-direction:column;text-align:center}.pick-card img{width:100%;height:90px}}