html{
/* default: dark */
color-scheme: dark;
/* Base tokens (default dark) */
--bg: #0b0b0f;
--panel: rgba(255,255,255,.03);
--panel2: rgba(0,0,0,.18);
--border: rgba(255,255,255,.10);
--text: #e8e8f0;
--muted: rgba(232,232,240,.68);
/* Marca */
--brand: #7b5cff;
--accent: var(--brand);
/* Seções */
--section-blog: #3da5ff;
--section-games: #2dff8f;
--section-profile: #ff5ca8;
--section-shop: #ffc83d;
/* Default section */
--section-color: var(--brand);
/* Avatar base (NOVO) */
--tg-avatar-w: 240px;
--tg-avatar-h: 470px;
}
html[data-theme="light"]{
color-scheme: light;
--bg: #f5f6fa;
--panel: rgba(0,0,0,.04);
--panel2: rgba(255,255,255,.72);
--border: rgba(24,28,36,.16);
--text: #1c1c24;
--muted: rgba(28,28,36,.65);
--brand: #6b5cff;
--accent: var(--brand);
--section-blog: #1e7fdc;
--section-games: #18b873;
--section-profile: #d94b8a;
--section-shop: #d6a300;
}
/* Section routing (set by PHP on ) */
html[data-section="blog"]{ --section-color: var(--section-blog); }
html[data-section="games"]{ --section-color: var(--section-games); }
html[data-section="profile"]{ --section-color: var(--section-profile); }
html[data-section="shop"]{ --section-color: var(--section-shop); }
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
margin:0;
font-family: Arial, sans-serif;
background:var(--bg);
color:var(--text);
padding-bottom:74px; /* espaço pro rodapé fixo */
overflow-x:hidden;
}
/* Mobile / viewport safety */
html{ -webkit-text-size-adjust: 100%; }
img, video, canvas{ max-width:100%; height:auto; }
/* Evita "scroll lateral" por grids/inputs
(mantém possibilidade de scroll dentro de componentes que usam overflow-x) */
.page{ overflow-x:hidden; }
/* ================== AVATAR HELPERS (global) ================== */
/* Sistema antigo de hue/saturação/brilho removido */
.skin-layer, .hair-layer{ filter:none !important; }
/* Overlay de pele (#2c1c07) em modo "linear-light" com 81% */
.tg-skin-overlay{
position:absolute;
inset:0;
pointer-events:none;
background: var(--tg-skin-tone, #2c1c07);
mix-blend-mode: linear-light;
opacity: .81;
}
/* ================== AVATAR FRAMES (global) ==================
Containers com .tg-avatar-framed recebem crop/zoom/offset via CSS vars.
As vars são aplicadas pelo JS (/assets/js/avatar_frames_apply.js).
*/
.tg-avatar-fixed{ position:relative; }
.tg-avatar-framed{ position:relative; overflow:hidden; }
.tg-avatar-framed > img,
.tg-avatar-framed > canvas,
.tg-avatar-framed img,
.tg-avatar-framed canvas{
position:absolute;
left:50%;
top:50%;
width:var(--tg-avatar-w);
height:var(--tg-avatar-h);
transform:
translate(
calc(-50% + var(--tg-af-ox, 0px)),
calc(-50% + var(--tg-af-oy, 0px))
)
scale(var(--tg-af-scale, 1));
transform-origin:center;
pointer-events:none;
image-rendering:pixelated;
}
a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:underline; }
.page{ max-width:1200px; margin:0 auto; padding:20px; }
.topbar{
display:flex; align-items:center; justify-content:space-between; gap:12px;
padding:12px 14px;
border:1px solid var(--border);
background:var(--panel);
border-radius:14px;
margin-bottom:16px;
flex-wrap:nowrap;
}
.brand{
display:flex; align-items:center; gap:10px; font-weight:bold;
letter-spacing:.3px;
}
.brand-logo{
width:36px;
height:36px;
object-fit:contain;
filter: drop-shadow(0 6px 14px rgba(0,0,0,.5));
}
.brand-text{ display:flex; flex-direction:column; line-height:1.05; }
.brand-title{ font-weight:900; letter-spacing:.2px; }
.brand-sub{ font-size:11px; color:var(--muted); font-weight:600; }
.nav{
display:flex; align-items:center; gap:10px;
flex-wrap:nowrap;
white-space:nowrap;
overflow-x:auto;
-ms-overflow-style:none;
scrollbar-width:none;
color:var(--muted);
font-size:13px;
}
.nav::-webkit-scrollbar{ display:none; }
/* ================== MOBILE HEADER / LAYOUT ================== */
@media (max-width: 900px){
.page{ padding:14px 12px; }
.topbar{ flex-wrap:wrap; align-items:stretch; gap:10px; }
.brand{ flex:1 1 100%; justify-content:space-between; }
.nav{
flex:1 1 100%;
order: 10;
flex-wrap:wrap;
white-space:normal;
overflow-x:visible;
gap:8px;
}
.user-search{ flex:1 1 100%; width:100%; }
.user-search input{ width:100%; max-width: 520px; }
.user-search-results{ width:100%; max-width: 520px; }
}
@media (max-width: 520px){
.brand-sub{ display:none; }
.brand-title{ font-size:14px; }
.tg-wallet-pill{ font-size:11px; }
.tg-online-pill{ font-size:11px; }
.tg-online-dropdown{ min-width: min(92vw, 320px); }
}
/* ===== Header: online + carteira + relógio ===== */
.tg-header-meta{ display:flex; align-items:center; gap:8px; margin-left:6px; position:relative; flex-shrink:0; }
.tg-online-pill{
display:inline-flex;
align-items:center;
gap:8px;
padding:6px 8px;
border-radius:999px;
border:1px solid rgba(255,255,255,.14);
background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.18));
color: rgba(255,255,255,.92);
cursor:pointer;
font-weight:1000;
font-size:12px;
letter-spacing:.3px;
box-shadow: 0 10px 26px rgba(0,0,0,.28);
}
.tg-online-pill:hover{ border-color: rgba(255,255,255,.22); }
.tg-online-pill .dot{
width:10px; height:10px; border-radius:999px;
background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.65), rgba(255,255,255,0) 55%),
linear-gradient(180deg, rgba(0,255,170,.95), rgba(0,180,120,.85));
box-shadow: 0 0 0 3px rgba(0,255,170,.10), 0 0 18px rgba(0,255,170,.18);
}
.tg-online-pill .lbl{ color: rgba(255,255,255,.78); font-weight:900; }
.tg-online-pill .tg-brtime{ margin-left:6px; padding-left:8px; border-left:1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.72); font-weight:1000; }
.tg-online-dropdown{
position:absolute;
top: 100%;
left: 0;
margin-top:10px;
min-width:240px;
max-height: 320px;
overflow:auto;
border:1px solid rgba(255,255,255,.14);
background: rgba(15,15,15,.92);
backdrop-filter: blur(10px);
border-radius:16px;
box-shadow: 0 18px 50px rgba(0,0,0,.55);
padding:8px;
}
.tg-online-item{ display:block; padding:10px 10px; border-radius:12px; text-decoration:none; color: rgba(255,255,255,.90); font-weight:800; }
.tg-online-item:hover{ background: rgba(255,255,255,.06); }
.tg-online-empty{ padding:10px; color: rgba(255,255,255,.65); font-size:13px; }
.tg-wallet-pill{
display:inline-flex;
align-items:center;
gap:8px;
padding:6px 8px;
border-radius:999px;
border:1px solid rgba(255,255,255,.14);
background: rgba(0,0,0,.22);
color: rgba(255,255,255,.92);
font-weight:1000;
letter-spacing:.2px;
font-size:12px;
}
.tg-wallet-pill .w-sep{ opacity:.35; }
.tg-wallet-pill .w-item{ display:inline-flex; align-items:center; gap:6px; }
@media (max-width: 720px){
.tg-header-meta{ gap:8px; }
.tg-wallet-pill{ padding:7px 9px; }
.tg-online-pill{ padding:7px 9px; }
.tg-online-pill .tg-brtime{ display:none; }
}
/* ===== Rodapé (no final da página) ===== */
.tg-footer{
position:static;
padding:10px 14px;
background:var(--panel2);
backdrop-filter: blur(12px);
border-top:1px solid var(--border);
}
.tg-footer-inner{
max-width:1200px;
margin:0 auto;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
}
.tg-footer-brand{
display:flex;
align-items:center;
gap:10px;
}
.tg-footer-logo{
width:28px;
height:28px;
object-fit:contain;
}
.tg-footer-title{
font-weight:900;
letter-spacing:.2px;
}
.tg-footer-links{
display:flex;
align-items:center;
gap:14px;
flex-wrap:wrap;
font-size:12px;
color:var(--muted);
}
.tg-footer-links a{ text-decoration:none; }
.tg-footer-links a:hover{ text-decoration:underline; }
.tg-footer-copy{
font-size:12px;
color:var(--muted);
white-space:nowrap;
}
@media (max-width: 720px){
.tg-footer-inner{ flex-wrap:wrap; justify-content:center; }
.tg-footer-copy{ width:100%; text-align:center; }
}
/* ===== Header: search + correio ===== */
.user-search{ position:relative; }
.user-search input{
width:240px;
padding:9px 10px;
border-radius:999px;
border:1px solid var(--border);
background:rgba(0,0,0,.22);
color:#fff;
outline:none;
}
.user-search input:focus{ border-color:rgba(255,215,0,.45); }
.user-search-results{
position:absolute;
top:42px;
left:0;
width:280px;
border:1px solid var(--border);
background:var(--panel2);
backdrop-filter: blur(10px);
border-radius:14px;
overflow:hidden;
box-shadow:0 14px 40px rgba(0,0,0,.55);
z-index:50;
}
.user-search-item{
display:block;
padding:10px 12px;
border-bottom:1px solid var(--border);
}
.user-search-item:hover{ background:rgba(255,255,255,.06); text-decoration:none; }
.user-search-empty{ padding:10px 12px; color:rgba(255,255,255,.6); }
.pill-mail .ico{ font-size:14px; line-height:1; }
.pill-mail .tg-mail-ico{ filter: drop-shadow(0 1px 2px rgba(0,0,0,.65)); }
.pill-mail .badge{
margin-left:2px;
min-width:18px;
height:18px;
padding:0 6px;
border-radius:999px;
display:inline-flex;
align-items:center;
justify-content:center;
font-weight:900;
font-size:12px;
color:#111;
background:linear-gradient(135deg, rgba(255,215,0,.95), rgba(255,120,80,.95));
}
/* ===== Seção ativa no menu ===== */
.pill.is-active{
border-color: color-mix(in srgb, var(--section-color) 55%, var(--border));
background: color-mix(in srgb, var(--section-color) 14%, var(--panel));
color: var(--text);
}
.pill.is-active:hover{ text-decoration:none; }
html[data-theme="light"] .pill.is-active{
background: color-mix(in srgb, var(--section-color) 10%, var(--panel));
}
/* ===== Toggle tema ===== */
.tg-theme-toggle{
display:inline-flex; align-items:center; gap:8px;
padding:8px 10px; border-radius:999px;
border:1px solid var(--border);
background:var(--panel);
cursor:pointer;
user-select:none;
}
.tg-theme-toggle .ico{ font-size:14px; line-height:1; }
.tg-theme-toggle .lbl{ font-size:13px; color:var(--muted); font-weight:700; }
.tg-theme-toggle:hover{ filter:brightness(1.06); }
.pill{
display:inline-flex; align-items:center; gap:8px;
padding:8px 10px; border-radius:999px;
border:1px solid var(--border);
background:var(--panel);
}
.pill.accent{
border-color:rgba(255,215,0,.35);
background:rgba(255,215,0,.10);
}
/* Notificação no header */
.pill-notif .ico{ font-size:14px; line-height:1; }
.pill-notif .badge{
margin-left:2px;
min-width:18px;
height:18px;
padding:0 6px;
border-radius:999px;
display:inline-flex;
align-items:center;
justify-content:center;
font-weight:900;
font-size:12px;
color:#111;
background:linear-gradient(135deg,var(--accent), rgba(155,123,255,.95));
}
.btn{
border:none;
border-radius:12px;
padding:10px 12px;
cursor:pointer;
font-weight:bold;
}
.btn.secondary{
background:var(--panel);
color:#fff;
border:1px solid var(--border);
}
.btn.primary{
background:linear-gradient(135deg,var(--accent), rgba(155,123,255,.95));
color:#111;
}
.card{
border:1px solid var(--border);
background:var(--panel);
border-radius:14px;
padding:14px;
}
.form{ max-width:520px; margin:0 auto; }
label{ display:block; font-size:12px; color:var(--muted); margin:10px 0 6px; }
input[type="text"], input[type="password"]{
width:100%;
padding:11px 12px;
border-radius:12px;
border:1px solid var(--border);
background:rgba(0,0,0,.22);
color:#fff;
outline:none;
}
input[type="text"]:focus, input[type="password"]:focus{ border-color:rgba(255,215,0,.45); }
.help{ margin-top:10px; font-size:12px; color:var(--muted); line-height:1.4; }
.error{
margin:12px 0;
padding:10px 12px;
border-radius:12px;
border:1px solid rgba(255,110,110,.35);
background:rgba(255,110,110,.10);
color:rgba(255,235,235,.95);
font-size:13px;
}
/* ===== Eliminado: cinza ===== */
.player-chip.eliminated{
opacity:.6;
}
/* aplica cinza no que estiver dentro do avatar */
.player-chip.eliminated .avatar-thumb,
.player-chip.eliminated .avatar-thumb canvas,
.player-chip.eliminated .avatar-thumb img{
filter: grayscale(1) brightness(.7);
}
/* ===== Status badges (cores) ===== */
.status-badge{
padding:3px 8px;
border-radius:999px;
font-size:11px;
font-weight:bold;
border:1px solid var(--border);
}
/* SALVO */
.status-badge.safe{
background:rgba(0,200,120,.18);
color:#3cffb0;
border-color:rgba(0,200,120,.45);
}
/* NOM */
.status-badge.nom{
background:rgba(255,80,80,.18);
color:#ff6b6b;
border-color:rgba(255,80,80,.45);
}
/* ELIM */
.status-badge.elim{
background:rgba(180,180,180,.18);
color:#ccc;
border-color:rgba(180,180,180,.45);
}
/* LIDER */
.status-badge.leader{
background:rgba(255,215,0,.20);
color:#ffd700;
border-color:rgba(255,215,0,.55);
}
/* mensagem do sistema (quando o body começa com [SISTEMA]) */
.chat-msg.system {
background: rgba(255, 221, 87, .18);
border: 1px solid rgba(255, 221, 87, .35);
}
.chat-msg.system .chat-body {
font-weight: 600;
}
.header-mail {
position: relative;
font-size: 20px;
}
.mail-badge {
position: absolute;
top: -6px;
right: -8px;
background: #e53935;
color: #fff;
font-size: 11px;
font-weight: 800;
border-radius: 999px;
padding: 2px 6px;
}
.mail-badge.hidden {
display: none;
}
.vote-list{
display:flex;
flex-direction:column;
gap:8px;
margin-top:10px;
}
.vote-row{
display:flex;
align-items:center;
gap:10px;
padding:10px 12px;
border-radius:14px;
border:1px solid var(--border);
background:rgba(0,0,0,.25);
color:#fff;
cursor:pointer;
text-align:left;
}
.vote-row:hover{
background:var(--panel);
}
.vote-row.selected{
outline:2px solid #fff;
background:rgba(255,255,255,.18);
}
.vote-avatar{
width:42px;
height:42px;
border-radius:50%;
object-fit:cover;
}
.vote-name{
font-weight:800;
font-size:15px;
}
/* ===== Notificações (tabs + listas) ===== */
.tg-tabs{ display:flex; gap:8px; flex-wrap:wrap; }
.tg-tab{ border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.06); color:inherit; padding:8px 10px; border-radius:12px; cursor:pointer; font-weight:800; }
.tg-tab.is-active{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.26); }
.tg-row{ display:flex; gap:12px; justify-content:space-between; align-items:center; padding:10px 12px; border:1px solid rgba(255,255,255,.12); border-radius:14px; background:rgba(255,255,255,.04); margin-bottom:10px; }
.tg-row-title{ font-weight:900; }
.tg-row-sub{ opacity:.75; font-size:12px; margin-top:2px; }
.tg-row-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.tg-log{ border:1px solid rgba(255,255,255,.12); border-radius:14px; overflow:hidden; }
.tg-log-it{ display:grid; grid-template-columns: 180px 1fr 90px; gap:10px; padding:10px 12px; border-top:1px solid rgba(255,255,255,.08); }
.tg-log-it:first-child{ border-top:0; }
.tg-log-date{ opacity:.75; font-size:12px; }
.tg-log-reason{ font-size:13px; }
.tg-log-amt{ text-align:right; font-weight:900; }
.tg-log-amt.pos{ }
.tg-log-amt.neg{ }
@media (max-width: 720px){
.tg-log-it{ grid-template-columns: 1fr; }
.tg-log-amt{ text-align:left; }
}
/* ===== Moeda T$ (visual consistente) ===== */
.tg-ts{
display:inline-flex;
align-items:center;
gap:6px;
font-weight:900;
letter-spacing:.2px;
}
.tg-ts__coin{
width:18px;
height:18px;
border-radius:999px;
display:inline-block;
position:relative;
background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.25), rgba(255,255,255,0) 40%),
radial-gradient(circle at 50% 60%, rgba(0,0,0,.25), rgba(0,0,0,0) 50%),
linear-gradient(180deg, rgba(255,215,0,.95), rgba(255,165,0,.88));
border:1px solid rgba(0,0,0,.35);
box-shadow: inset 0 1px 0 rgba(255,255,255,.20), 0 6px 14px rgba(0,0,0,.22);
}
.tg-ts__coin:after{
content:"T$";
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:center;
font-size:10px;
font-weight:1000;
letter-spacing:-.3px;
color:rgba(20,10,0,.92);
text-shadow: 0 1px 0 rgba(255,255,255,.18);
}
.tg-ts__text{
white-space:nowrap;
}
/* ===== Moeda BIT$ (visual exclusivo) ===== */
.tg-bit{
display:inline-flex;
align-items:center;
gap:6px;
font-weight:900;
letter-spacing:.2px;
}
.tg-bit__coin{
width:18px;
height:18px;
border-radius:999px;
display:inline-block;
position:relative;
background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.22), rgba(255,255,255,0) 42%),
radial-gradient(circle at 55% 65%, rgba(0,0,0,.28), rgba(0,0,0,0) 55%),
linear-gradient(180deg, rgba(0,240,255,.95), rgba(70,140,255,.88));
border:1px solid rgba(0,0,0,.35);
box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 6px 14px rgba(0,0,0,.24);
}
.tg-bit__coin:after{
content:"BIT$";
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:center;
font-size:7px;
font-weight:1000;
letter-spacing:-.6px;
color:rgba(0,12,22,.92);
text-shadow: 0 1px 0 rgba(255,255,255,.16);
}
.tg-bit__text{ white-space:nowrap; }
/* ===== Footer (normal, no fim da página) ===== */
.tg-site-footer{
margin-top: 40px;
padding: 22px 0;
border-top: 1px solid rgba(255,255,255,.12);
background: rgba(0,0,0,.25);
}
.tg-site-footer-inner{
max-width: 1100px;
margin: 0 auto;
padding: 0 16px;
display: flex;
gap: 18px;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
.tg-site-footer-brand{display:flex; align-items:center; gap:12px;}
.tg-site-footer-logo{width:38px; height:38px; image-rendering: pixelated;}
.tg-site-footer-title{font-weight:800; letter-spacing:.2px;}
.tg-site-footer-meta{font-size:12px; color: rgba(255,255,255,.65); margin-top:2px;}
.tg-site-footer-links{display:flex; gap:14px; flex-wrap:wrap; font-size:13px;}
.tg-site-footer-links a{color: rgba(255,255,255,.75); text-decoration:none;}
.tg-site-footer-links a:hover{color: rgba(255,255,255,.95); text-decoration:underline;}
.tg-site-footer-copy{font-size:12px; color: rgba(255,255,255,.55);}
.games-pager{display:flex;gap:10px;align-items:center;justify-content:center;margin-top:12px}
/* ADMIN BADGE */
.admin-badge {
display: inline-block;
margin-left: 6px;
padding: 2px 6px;
font-size: 10px;
font-weight: 700;
letter-spacing: .5px;
color: #fff;
background: linear-gradient(135deg, #ff004c, #ff7a00);
border-radius: 6px;
box-shadow: 0 0 6px rgba(255,0,76,.6);
animation: adminPulse 1.8s infinite, adminShimmer 3s infinite;
vertical-align: middle;
}
/* VIP BADGE */
.vip-badge{
display:inline-block;
margin-left:6px;
padding:2px 7px;
font-size:10px;
font-weight:900;
letter-spacing:.6px;
color:#2a1a00;
background: radial-gradient(circle at 30% 30%, #ffe9a8, #ffcf5e 55%, #c88a1e 100%);
border-radius: 7px;
box-shadow: 0 0 8px rgba(255,215,120,.45);
vertical-align: middle;
}
@keyframes adminPulse {
0% { box-shadow: 0 0 6px rgba(255,0,76,.4); }
50% { box-shadow: 0 0 14px rgba(255,122,0,.9); }
100% { box-shadow: 0 0 6px rgba(255,0,76,.4); }
}
@keyframes adminShimmer {
0% { filter: brightness(1); }
50% { filter: brightness(1.25); }
100% { filter: brightness(1); }
}