/* ===================================================================================================
 * pko_responsive.css — Responsividade do EGEND (fase 1: Black Market, Item Mall, DNA Abissal + nav).
 * Abordagem adaptativa: mantém o desktop intacto; abaixo de 900px torna os containers fluidos,
 * empilha a sidebar, e o menu do topo vira hambúrguer→gaveta (pko_responsive.js). O resto do site
 * (home, etc.) fica para uma fase posterior.
 * =================================================================================================== */

/* hambúrguer e toggle de filtros só aparecem no mobile (default escondidos) */
.pkonav-burger{display:none;}
.pko-filtoggle{display:none;}
.pkonav-drawer{position:fixed;top:0;left:0;bottom:0;width:270px;max-width:82vw;background:#161617;border-right:1px solid #3a3a3b;box-shadow:6px 0 24px rgba(0,0,0,.5);z-index:10000;transform:translateX(-100%);transition:transform .22s ease;display:flex;flex-direction:column;padding:14px 0;overflow-y:auto;}
.pkonav-drawer.on{transform:translateX(0);}
.pkonav-scrim{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:9999;opacity:0;pointer-events:none;transition:opacity .22s ease;}
.pkonav-scrim.on{opacity:1;pointer-events:auto;}
.pkonav-drawer a{display:block;padding:13px 20px;color:#fedda9;font:700 15px Verdana,Arial;text-decoration:none;border-bottom:1px solid #262627;letter-spacing:.5px;}
.pkonav-drawer a:hover{background:#20201f;text-decoration:none;}
.pkonav-drawer .pkonav-hd{display:flex;align-items:center;justify-content:space-between;padding:2px 16px 12px;color:#fff;font:700 16px Verdana,Arial;border-bottom:1px solid #333;margin-bottom:6px;}
.pkonav-drawer .pkonav-x{background:none;border:0;color:#cfcfcf;font-size:22px;line-height:1;cursor:pointer;}

@media (max-width: 900px){
	/* --- moldura fluida (neutraliza larguras fixas dos 2 layouts) --- */
	html, body{min-width:0 !important;}
	body{background-size:cover;}
	div.container, div#container, div.cbody{width:100% !important;max-width:100% !important;min-width:0 !important;box-sizing:border-box;padding-left:8px;padding-right:8px;}
	div.spacebw{display:none !important;}

	/* --- topo: esconde as abas desktop, mostra o hambúrguer --- */
	.navbar{position:relative;width:auto !important;max-width:100% !important;min-height:52px;display:flex;align-items:center;background:#1b1b1d;border-radius:10px;margin:6px 0;padding:0 8px;box-sizing:border-box;}
	/* rodapé fixo 990px -> fluido; ícones sociais decorativos escondidos no mobile */
	div.footer{width:100% !important;box-sizing:border-box;height:auto !important;background-size:cover !important;padding:12px 8px;overflow:hidden;}
	div.footer .social{display:none !important;}
	.navbar .navtab, .navbar .registerbig{display:none !important;}
	.pkonav-burger{display:inline-flex;align-items:center;gap:9px;background:none;border:0;color:#fedda9;font:700 15px Verdana,Arial;cursor:pointer;padding:8px 6px;}
	.pkonav-burger .bars{display:inline-block;width:22px;height:16px;position:relative;}
	.pkonav-burger .bars i{position:absolute;left:0;width:100%;height:2.5px;background:#fedda9;border-radius:2px;}
	.pkonav-burger .bars i:nth-child(1){top:0;} .pkonav-burger .bars i:nth-child(2){top:6.5px;} .pkonav-burger .bars i:nth-child(3){top:13px;}

	/* --- sidebars: empilha a esquerda, esconde a direita (decorativa) --- */
	div#left, div#right{position:static !important;width:100% !important;top:auto !important;left:auto !important;right:auto !important;margin:0 auto 10px;}
	div#right{display:none !important;}
	div#left div.leftBox{width:100% !important;box-sizing:border-box;}
	/* sidebar real das páginas modernas = .cbody > .lsb2 (float:left, 218px) */
	div.cbody{float:none !important;}
	div.lsb, div.lsb2, div.rsb{float:none !important;width:100% !important;margin:0 auto 10px !important;}
	div.rsb{display:none !important;}
	div.lsb2 .login, div.lsb2 .leftBox{width:100% !important;box-sizing:border-box;}

	/* --- conteúdo (roots) fluido --- */
	div.mid_wide{width:100% !important;float:none !important;margin:0 !important;}
	#bmRoot, #mlRoot, #dnaRoot{width:100% !important;}
	/* molduras internas (box_wide___*.png) são 768px fixas -> fluidas */
	div.mid_widetop{width:100% !important;background-size:100% 100% !important;height:auto !important;min-height:76px;padding:8px 0;}
	div.mid_widemid{width:100% !important;background-size:100% auto !important;}
	div.mid_widebottom{width:100% !important;background-size:100% 100% !important;height:34px !important;}

	/* --- Black Market --- */
	#bmRoot .mid_widetop .bm-herotr{position:static !important;transform:none !important;justify-content:flex-start;margin-top:10px;flex-wrap:wrap;}
	#bmRoot .bm-sub{max-width:100% !important;}
	#bmRoot .bm-body{flex-direction:column !important;}
	#bmRoot .bm-side{width:100% !important;flex:0 0 auto !important;}
	#bmRoot .bm-grid{grid-template-columns:repeat(2,1fr) !important;}   /* 2 por linha no mobile */
	/* filtros recolhíveis no mobile (toggle via JS: adiciona .pkocollapsed) */
	#bmRoot .bm-side.pkocollapsed .bm-acc, #bmRoot .bm-side.pkocollapsed .bm-reset{display:none;}
	.pko-filtoggle{display:none;}

	/* --- Item Mall (mesmos filtros do BM) --- */
	#mlRoot .ml-toolbar{gap:7px;}
	#mlRoot .ml-body{flex-direction:column !important;}
	#mlRoot .ml-side{width:100% !important;flex:0 0 auto !important;}
	#mlRoot .ml-side.pkocollapsed .bm-acc, #mlRoot .ml-side.pkocollapsed .bm-reset{display:none;}
	#mlRoot .ml-grid{grid-template-columns:repeat(2,1fr) !important;}

	/* --- DNA Abissal --- */
	#dnaRoot .dna-card{grid-template-columns:1fr !important;}
	#dnaRoot .dna-sub{max-width:100% !important;}
	#dnaRoot .dna-stats{grid-template-columns:repeat(3,1fr) !important;}
	#dnaRoot .dna-specialrow{grid-template-columns:1fr !important;gap:4px;}
	#dnaRoot .dna-mini-stats{grid-template-columns:repeat(2,1fr) !important;}

	/* --- Fase 2: home + CMS antigo (.mid/.lsb/.rsb) --- */
	div.lsb, div.mid, div.rsb{float:none !important;width:100% !important;max-width:100% !important;margin:0 auto 10px !important;}
	div.mid, div.midtop, div.midmid, div.midbottom{width:100% !important;background-size:100% 100% !important;height:auto !important;}
	div.midtop, div.midmid{min-height:60px;}
	div.scon, div.dcon, div.dcon2, div.dcon3, div.annoucementbg, div.bitembg{width:100% !important;max-width:100% !important;background-size:100% auto !important;}
	div.mid img{max-width:100%;height:auto;}
	div.mid .it11{width:48% !important;box-sizing:border-box;}
	/* SexySlider (560px fixo) e painéis decorativos da home */
	[class^="sexyslider"], [class*=" sexyslider"], .sexyslider{max-width:100% !important;width:100% !important;box-sizing:border-box;}
	div.mid .fpt1, div.mid .fpt2, div.mid .fpt3, div.mid .fpt4{max-width:100% !important;background-size:contain !important;background-repeat:no-repeat;}
	div.midtop, div.midmid, div.midbottom{overflow:hidden;}
	/* tabelas de conteúdo roláveis no mobile (rankings/wallet) */
	.mid_widemid table, div.mid table, .innerContent table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}
	/* banner antigo do topo */
	div.nav{width:100% !important;background-size:contain !important;}
	div.footer{float:none !important;}
}

/* botão "Filtros" só no mobile */
@media (max-width: 900px){
	.pko-filtoggle{display:flex !important;align-items:center;justify-content:center;gap:8px;width:100%;margin-bottom:10px;background:linear-gradient(135deg,#55545b,#3a3940);color:#fff;border:1px solid #5f5f63;border-radius:9px;padding:10px 0;font:700 13px Verdana,Arial;cursor:pointer;}
}

@media (max-width: 520px){
	#bmRoot .bm-grid{grid-template-columns:1fr !important;}
	#dnaRoot .dna-stats{grid-template-columns:repeat(2,1fr) !important;}
	#bmRoot .bm-toolbar{padding:10px;}
	#bmRoot .bm-body{padding:10px;}
	.navbar{margin:4px 0;}
}