/* CleverGame Platform - Complete Styles */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#0a0a0f;--card:#12121a;--border:#1e1e2e;
  --accent:#6c5ce7;--accent2:#00d4ff;--gold:#f59e0b;
  --text:#e0e0e0;--muted:#888;--red:#ff4757;--green:#2ed573;
}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:var(--bg);color:var(--text);min-height:100vh}
.header{text-align:center;padding:2rem 1rem 1rem;background:linear-gradient(180deg,rgba(108,92,231,0.1),transparent)}
.header h1{font-size:2.5rem;background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.header p{color:var(--muted);margin-top:0.5rem;font-size:0.95rem}
.user-bar{display:flex;justify-content:center;align-items:center;gap:12px;padding:10px 20px;margin:0 auto;max-width:1000px;flex-wrap:wrap;font-size:0.9rem}
.btn{display:inline-block;padding:6px 16px;border-radius:6px;text-decoration:none;font-size:0.8rem;font-weight:600;transition:all 0.2s;border:none;cursor:pointer}
.btn-login{background:var(--accent);color:#fff}
.btn-login:hover{background:#7d6ff0}
.btn-register{background:rgba(255,255,255,0.08);color:var(--text);border:1px solid var(--border)}
.btn-register:hover{background:rgba(255,255,255,0.15)}
.btn-friend{background:rgba(0,212,255,0.15);color:var(--accent2);border:1px solid rgba(0,212,255,0.3)}
.btn-friend:hover{background:rgba(0,212,255,0.25)}
.container{max-width:1100px;margin:1rem auto;padding:0 1rem}
.game-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:1rem;margin-top:1rem}
.game-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:1rem;display:flex;gap:1rem;cursor:pointer;transition:all 0.25s}
.game-card:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(0,0,0,0.3);border-color:var(--accent)}
.card-left{flex:0 0 auto;text-align:center;min-width:50px}
.card-icon{font-size:2rem;margin-bottom:0.3rem}
.card-personal{font-size:0.75rem}
.best{color:var(--gold);font-weight:700;font-size:0.9rem}
.card-center{flex:1;min-width:0}
.card-center h3{font-size:1.1rem;margin-bottom:0.3rem}
.card-center p{font-size:0.82rem;color:var(--muted);line-height:1.4}
.card-badge{display:inline-block;padding:2px 10px;border-radius:10px;font-size:0.7rem;margin-top:0.5rem;background:rgba(108,92,231,0.2);color:var(--accent)}
.card-right{flex:0 0 auto;text-align:right;display:flex;flex-direction:column;gap:0.5rem;min-width:90px}
.card-stat{font-size:0.75rem;color:var(--muted)}
.card-stat strong{color:var(--accent2);font-size:0.9rem}
.card-rank{font-size:0.7rem;color:var(--gold);cursor:pointer}
.card-rank:hover{text-decoration:underline}
.modal-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.7);z-index:1000;justify-content:center;align-items:center}
.modal-overlay.show{display:flex}
.modal{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:1.5rem;max-width:500px;width:90%;max-height:80vh;overflow-y:auto}
.modal h3{font-size:1.2rem;margin-bottom:1rem;color:var(--accent2)}
.modal-close{float:right;background:none;border:none;color:var(--muted);font-size:1.5rem;cursor:pointer}
.lb-table{width:100%;border-collapse:collapse;margin-top:0.5rem;font-size:0.85rem}
.lb-table th{color:var(--muted);text-align:left;padding:8px 6px;border-bottom:1px solid var(--border);font-size:0.75rem}
.lb-table td{padding:8px 6px;border-bottom:1px solid rgba(255,255,255,0.05)}
.lb-table .rank{color:var(--gold);font-weight:700;width:30px}
.lb-table .name{color:var(--accent2);cursor:pointer}.lb-table .name:hover{text-decoration:underline}
.lb-table .score{font-weight:600}
.tab-bar{display:flex;gap:0.5rem;margin-bottom:1rem}
.tab-btn{padding:6px 16px;border-radius:20px;border:1px solid var(--border);background:transparent;color:var(--muted);cursor:pointer;font-size:0.8rem;transition:all 0.2s}
.tab-btn.active{background:var(--accent);border-color:var(--accent);color:#fff}
@media(max-width:600px){.game-grid{grid-template-columns:1fr}.header h1{font-size:1.8rem}}
.loading{text-align:center;padding:1rem;color:var(--muted)}