/* style.css for BadBoysGAME */
:root{
  --bg:#0b0b0c;
  --panel:#0f0f10;
  --accent:#ff7a00;
  --muted:#9a9a9a;
  --glass: rgba(255,255,255,0.03);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;background:var(--bg);color:#eee;overflow:hidden}
a{color:inherit;text-decoration:none}
#bg-canvas-wrap{position:fixed;inset:0;z-index:0;pointer-events:none}
#bg-canvas{width:100%;height:100%;display:block}
.app{position:relative;z-index:2;display:grid;grid-template-columns:260px 1fr;min-height:100vh;max-height:100vh;overflow:hidden}
/* Sidebar */
.sidebar{background:linear-gradient(180deg,var(--panel),#050505);padding:18px;border-right:1px solid rgba(255,255,255,0.03);height:100vh;overflow:auto}
.logo{font-weight:800;font-size:20px;color:var(--accent);display:flex;align-items:center;gap:10px}
.logo .dot{width:12px;height:12px;border-radius:3px;background:var(--accent);box-shadow:0 0 18px rgba(255,122,0,0.2)}
.nav{margin-top:20px;display:flex;flex-direction:column;gap:8px}
.nav button{background:transparent;border:none;color:#ddd;text-align:left;padding:10px;border-radius:8px;cursor:pointer;font-weight:700}
.nav button.active{background:linear-gradient(90deg, rgba(255,122,0,0.08), rgba(255,122,0,0.03));box-shadow:inset 0 1px 0 rgba(255,255,255,0.02)}
.userbox{margin-top:auto;padding-top:18px;border-top:1px solid rgba(255,255,255,0.02)}
.auth-btn{display:inline-flex;align-items:center;gap:8px;background:var(--glass);padding:8px;border-radius:8px;border:1px solid rgba(255,255,255,0.03);cursor:pointer}

/* Header */
.header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid rgba(255,255,255,0.02);background:linear-gradient(180deg,transparent,rgba(255,255,255,0.01));position:sticky;top:0;z-index:3}
.search{display:flex;align-items:center;gap:8px}
.search input{background:transparent;border:1px solid rgba(255,255,255,0.04);padding:10px 12px;border-radius:10px;color:#fff;min-width:360px}
.header .controls{display:flex;gap:12px;align-items:center}
.badge{background:rgba(255,122,0,0.12);color:var(--accent);padding:6px 10px;border-radius:8px;font-weight:700}

/* Content */
.content{padding:18px;height:calc(100vh - 72px);overflow:auto}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.card{background:linear-gradient(180deg,rgba(255,255,255,0.01), rgba(255,255,255,0.005));padding:12px;border-radius:12px;border:1px solid rgba(255,255,255,0.03);display:flex;flex-direction:column;backdrop-filter: blur(4px);}
.card img{width:100%;height:120px;object-fit:cover;border-radius:8px}
.card h3{margin:10px 0 6px;font-size:16px}
.card p{margin:0;font-size:13px;color:var(--muted);min-height:36px}
.card .row{display:flex;justify-content:space-between;align-items:center;margin-top:10px}
.btn{background:var(--accent);border:none;color:#111;padding:8px 12px;border-radius:8px;font-weight:800;cursor:pointer;box-shadow:0 6px 18px rgba(255,122,0,0.08)}
.ghost{background:transparent;border:1px solid rgba(255,255,255,0.06);color:#ddd;padding:8px 10px;border-radius:8px;cursor:pointer}

/* Game page */
.game-page{display:none;padding:18px;background:linear-gradient(180deg,transparent,rgba(0,0,0,0.05));}
.back-btn{background:transparent;border:none;color:var(--muted);margin-bottom:8px;cursor:pointer}
.game-header{display:flex;gap:20px}
.game-header img{width:360px;height:200px;object-fit:cover;border-radius:10px}
.game-meta{flex:1}
.meta-row{display:flex;gap:14px;align-items:center;margin-top:8px}
.comments{margin-top:14px}
.comment{background:rgba(255,255,255,0.02);padding:10px;border-radius:8px;margin-bottom:8px}
textarea{width:100%;padding:10px;border-radius:8px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:#fff}

/* Settings */
.settings{display:none;padding:18px}
.row-flex{display:flex;gap:12px;align-items:center}

/* Modals */
.modal-wrap{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.6);z-index:999;opacity:0;pointer-events:none;transition:opacity .2s}
.modal-wrap.open{opacity:1;pointer-events:auto}
.modal{width:420px;background:linear-gradient(180deg,#0f0f10,#0b0b0c);padding:18px;border-radius:12px;border:1px solid rgba(255,255,255,0.04);position:relative}
.modal-close{position:absolute;right:12px;top:8px;background:transparent;border:none;color:var(--muted);font-size:22px;cursor:pointer}
.modal-inner h3{margin:0 0 6px}
.field{display:flex;flex-direction:column;margin-top:8px}
.field input{padding:8px;border-radius:6px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:#fff}

/* Responsive */
@media(max-width:900px){.app{grid-template-columns:1fr}.sidebar{display:flex;flex-direction:row;overflow:auto;height:auto}.header .search input{min-width:160px}}

/* subtle hover */
.card:hover{transform:translateY(-4px);transition:transform .18s}