*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial, Helvetica, sans-serif;
}

body{
background:#000;
color:white;
min-height:100vh;
display:flex;
justify-content:center;
overflow-x:hidden;
overflow-y:auto;
}

canvas{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:0;
pointer-events:none;
}

.container{
position:relative;
z-index:1;
text-align:center;
width:100%;
max-width:360px;
padding:20px;
margin-top:80px;
}

.perfil{
width:110px;
height:110px;
border-radius:50%;
object-fit:cover;
margin-bottom:15px;
border:3px solid #d4a84f;
}

.nome{
font-size:26px;
font-weight:bold;
margin-bottom:5px;
}

.descricao{
color:#ccc;
margin-bottom:30px;
}

.link{
display:block;
width:100%;
padding:16px;
margin-bottom:15px;
border-radius:14px;
border:1px solid #2a2a2a;
background:#111;
color:white;
text-decoration:none;
font-size:16px;
transition:.25s;
}

.link:hover{
transform:scale(1.03);
background:#1a1a1a;
}

.link i{
margin-right:10px;
font-size:18px;
}

.categoria{
margin-bottom:35px;
text-align:left;
}

.titulo-categoria{
font-size:18px;
margin-bottom:15px;
display:flex;
align-items:center;
gap:10px;
color:#d4a84f;
}

.cards{
display:grid;
grid-template-columns:1fr;
gap:12px;
}

.card-regra{
background:#111;
border-radius:14px;
padding:14px 16px;
display:flex;
align-items:center;
gap:12px;
border:1px solid #2a2a2a;
transition:.25s;
}

.card-regra i{
font-size:18px;
color:#d4a84f;
min-width:20px;
}

.card-regra p{
font-size:14px;
color:#ccc;
line-height:1.4;
}

.card-regra:hover{
transform:scale(1.02);
background:#1a1a1a;
border:1px solid #d4a84f;
box-shadow:0 0 12px rgba(212,168,79,0.25);
}

.botoes-menores{
display:flex;
gap:10px;
margin-top:80px;
}

.link.pequeno{
flex:1;
font-size:14px;
padding:10px;
}