/*
    Layout de celular do retro (skin dark).

    Tudo aqui fica atras de html.is-phone, classe que o script inline do header.inc.php
    so liga em celular (menor lado da tela < 600px + toque). Desktop e tablet nunca
    recebem a classe, entao o visual deles nao muda.

    Estrutura gerada pelo header/footer:
      body > center > #container > img(banner) + table > tr > td(menu) | td(conteudo) | td(status)
    No celular a tabela vira blocos: o td do menu vira gaveta lateral (mobile.js abre/fecha),
    o conteudo ocupa a largura toda e o td de status desce para o rodape.
*/

html.is-phone {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}
html.is-phone body {
	margin: 0;
	padding: 0;
	/* fixed no iOS repinta/borra a cada scroll */
	background-attachment: scroll;
	overflow-x: hidden;
}
html.nav-open body {
	overflow: hidden;
}

/* ---------- Barra superior (criada pelo mobile.js) ---------- */
#m-bar, #m-overlay, #m-classic {
	display: none;
}
html.is-phone #m-bar {
	display: flex;
	align-items: center;
	position: sticky;
	position: -webkit-sticky;
	top: 0;
	z-index: 900;
	height: 46px;
	padding: 0 6px 0 0;
	background: #1b1b1b linear-gradient(#3a3a3a, #141414);
	border-bottom: 1px solid #000;
	box-shadow: 0 1px 0 #555, 0 2px 6px rgba(0, 0, 0, .6);
}
html.is-phone #m-bar button {
	flex: 0 0 46px;
	height: 46px;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-right: 1px solid #000;
	box-shadow: 1px 0 0 #444;
	color: #FFCC00;
	font-size: 24px;
	line-height: 46px;
	cursor: pointer;
}
html.is-phone #m-bar .m-title {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0 10px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font: normal 17px "Georgia", serif;
	color: #FFCC00;
	text-shadow: 1px 1px 0 #000;
}
html.is-phone #m-bar .m-acc {
	flex: 0 0 auto;
	padding: 6px 10px;
	border: 1px solid #000;
	box-shadow: inset 0 1px 0 #555;
	background: #2a2a2a;
	color: #CCCCCC;
	font: bold 12px Verdana, Arial, sans-serif;
	text-decoration: none;
	border-radius: 3px;
}
html.is-phone #m-bar .m-acc:active {
	color: #FFCC00;
}

/* ---------- Banner ---------- */
html.is-phone #container {
	width: 100%;
}
html.is-phone #container > img {
	display: block;
	width: 100%;
	height: auto;
}

/* ---------- Tabela de layout -> blocos ---------- */
html.is-phone #container > table,
html.is-phone #container > table > tbody,
html.is-phone #container > table > tbody > tr,
html.is-phone #container > table > tbody > tr > td {
	display: block;
	width: auto !important;
}
html.is-phone #container > table > tbody > tr > td {
	padding: 0;
}

/* Menu (1a coluna) = gaveta lateral */
html.is-phone #container > table > tbody > tr > td:first-child {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	z-index: 1000;
	width: 200px !important;
	padding: 12px 0 30px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	background: #000 url(skins/dark/tlo.jpg) repeat;
	border-right: 1px solid #000;
	box-shadow: 2px 0 12px rgba(0, 0, 0, .8);
	transform: translateX(-110%);
	transition: transform .22s ease-out;
	visibility: hidden;
}
html.nav-open #container > table > tbody > tr > td:first-child {
	transform: none;
	visibility: visible;
}
html.is-phone #container > table > tbody > tr > td:first-child #panel {
	width: 174px;
	margin: 0 auto;
}
/* Itens do menu com area de toque maior (mesma arte list-item.gif) */
html.is-phone #navigation li {
	height: auto;
	min-height: 23px;
	background-position: 0 50%;
	background-size: 174px 100%;
}
html.is-phone #navigation li a {
	display: block;
	padding: 6px 0;
}

html.is-phone #m-overlay {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 999;
	background: rgba(0, 0, 0, .65);
}
html.nav-open #m-overlay {
	display: block;
}

/* Conteudo (2a coluna) */
html.is-phone #container > table > tbody > tr > td:nth-child(2) {
	padding: 6px 6px 0;
}

/* Status / links (3a coluna) = rodape */
html.is-phone #container > table > tbody > tr > td:nth-child(3) {
	padding: 10px 0 20px;
	text-align: center;
}
html.is-phone #container > table > tbody > tr > td:nth-child(3) #panel {
	width: 174px;
	margin: 0 auto;
}

/* ---------- Caixas de conteudo: mesma arte, esticada na largura ---------- */
html.is-phone #content {
	width: auto;
	margin: 0 0 8px;
	text-align: left;
}
html.is-phone #content .top {
	width: auto;
	background-size: 100% 100%;
}
html.is-phone #content .mid {
	width: auto;
	min-height: 0;
	padding: 10px 12px;
	background-size: 100% 30px;
	overflow-x: auto;
}
html.is-phone #content .bot {
	width: auto;
	background-size: 100% 100%;
}

/* fieldset tem min-width: min-content por padrao e estoura a caixa */
html.is-phone #content fieldset {
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
}

/* Imagens e midia nunca passam da caixa */
html.is-phone #content img,
html.is-phone #content iframe,
html.is-phone #content video {
	max-width: 100%;
}
html.is-phone #content img {
	height: auto;
}
html.is-phone .eqLook img {
	max-width: none;
}
html.is-phone .ifce {
	width: 100%;
}

/* Tabelas largas ganham scroll lateral proprio (wrapper criado pelo mobile.js) */
html.is-phone .m-scroll {
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin-bottom: 4px;
}
html.is-phone .m-scroll > table {
	margin: 0;
}

/* Tabela de colunas lado a lado (layout) que empilha no celular */
html.is-phone table.m-stack,
html.is-phone table.m-stack > tbody,
html.is-phone table.m-stack > tbody > tr,
html.is-phone table.m-stack > tbody > tr > td {
	display: block;
	width: auto !important;
}
html.is-phone table.m-stack > tbody > tr > td {
	text-align: center;
	margin-bottom: 10px;
}
html.is-phone table.m-stack > tbody > tr > td > table {
	margin: 0 auto;
	text-align: left;
}

/* Colunas marcadas como secundarias somem no celular */
html.is-phone .m-hide {
	display: none !important;
}

/* ---------- Formularios ---------- */
/* 16px evita o zoom automatico do iOS ao focar */
html.is-phone input[type="text"],
html.is-phone input[type="password"],
html.is-phone input[type="email"],
html.is-phone input[type="number"],
html.is-phone input:not([type]),
html.is-phone select,
html.is-phone textarea {
	font-size: 16px;
	max-width: 100%;
	box-sizing: border-box;
}
html.is-phone input[type="submit"],
html.is-phone input[type="button"],
html.is-phone button {
	min-height: 32px;
}

/* Caixa de formulario (iobox, class/iobox.php): vira modal fixo, sem posicao de cookie */
html.is-phone #form #iobox {
	display: block;
	left: 8px !important;
	right: 8px;
	top: 56px !important;
	width: auto;
	max-height: calc(100vh - 72px);
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	cursor: default;
	box-shadow: 0 4px 20px rgba(0, 0, 0, .9);
}
html.is-phone #iobox,
html.is-phone #iobox fieldset {
	max-width: 100%;
	box-sizing: border-box;
}
html.is-phone #iobox img {
	max-width: 100%;
	height: auto;
}
html.is-phone #iobox input[type="submit"],
html.is-phone #iobox input[type="button"] {
	height: 38px !important;
	min-width: 96px;
	margin: 4px 0;
}

/* ---------- Pecas soltas com posicao fixa de desktop ---------- */
html.is-phone #error {
	position: relative;
	margin: 10px auto;
	max-width: 100%;
	box-sizing: border-box;
	background-size: contain;
}
html.is-phone .ddmenu {
	left: 8px;
	right: 8px;
	width: auto;
}
html.is-phone #account-image {
	display: none;
}
html.is-phone #choose-skill {
	float: none;
	margin: 0 0 10px;
}

/* ---------- Link "versao classica / versao mobile" ---------- */
html.is-phone #m-classic,
html.m-classic #m-classic {
	display: block;
	padding: 10px 0 16px;
	text-align: center;
	font: 12px Verdana, Arial, sans-serif;
}
html.is-phone #m-classic a,
html.m-classic #m-classic a {
	color: #999;
}
html.m-classic #m-classic {
	font-size: 40px;
	padding: 20px 0;
	background: #222;
}

/* ---------- items.php (biblioteca de itens): peso sai da busca, grade em 2 colunas ---------- */
html.is-phone .ilTable th:last-child,
html.is-phone .ilTable .ilWeight { display: none; }
html.is-phone .ilGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html.is-phone .ilSearch .skSelect { font-size: 16px; }