/* Canary Plus: celular e tablet (o Canary original tem largura fixa de 1000px) */
.bw-menubtn{display:none}
@media (max-width:900px){
  html,body{height:auto !important;min-height:100%;overflow-x:clip;overflow-y:auto !important}
  #ArtworkHelper{height:auto !important;min-height:100vh}
  #ArtworkHelper{min-width:0 !important;width:100%}
  #Bodycontainer{height:auto !important;min-width:0 !important;max-width:100%;display:block;width:100%}
  #ContentRow{position:relative !important;top:0;left:0;width:100%;height:auto !important;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:flex-start;padding:0 0 24px}
  #MenuColumn{display:contents}
  #LeftArtwork{position:relative !important;order:0;flex:0 0 100%;height:150px;left:0;top:0;margin:0}
  #LeftArtwork #TibiaLogoArtworkTop{position:absolute;left:50%;top:6px;margin-left:-98px}
  #Loginbox{order:1;position:relative;flex:0 0 176px;width:176px;margin:0 4px 30px;left:0}
  #DownloadBox{order:2;position:relative;flex:0 0 176px;width:176px;margin:0 4px 30px;left:0}
  #ContentColumn{order:3;flex:0 0 calc(100% - 12px);margin:0 6px !important;width:calc(100% - 12px);max-width:760px}
  #ThemeboxesColumn{order:4;flex:0 0 calc(100% - 12px);position:static !important;width:auto !important;margin:14px 6px 0 !important}
  #Themeboxes{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
  #Menu{order:5;display:none;width:100%}
  body.bw-menu-open #Menu{display:block;position:fixed;left:0;right:0;top:54px;bottom:0;z-index:60;overflow:auto;padding:12px 0 40px;background:rgba(var(--t-06080d),.97);text-align:center}
  body.bw-menu-open #Menu>*{margin-left:auto;margin-right:auto}
  .BoxContent{overflow-x:auto}
  .BoxContent input[type=text],.BoxContent input[type=password],.BoxContent input[type=email],.BoxContent input[type=number],.BoxContent select{min-width:90px;width:90px;max-width:100%;box-sizing:border-box;font-size:16px}
  body.bw-dark .BoxContent,body.bw-dark .BoxContent td{font-size:15px}
  .Content .BoxContent{padding:8px !important}
  #Footer{margin:10px 8px 0 !important;width:auto !important;max-width:calc(100% - 16px);box-sizing:border-box}
  .bw-menubtn{display:flex;align-items:center;gap:8px;position:fixed;right:10px;top:10px;z-index:70;padding:9px 16px;border-radius:6px;border:1px solid var(--k-b98a2e);background:linear-gradient(var(--k-2b3140),var(--k-10131a));color:var(--k-f0cd7a);font:600 15px 'BW Barlow',Verdana,sans-serif;box-shadow:0 3px 12px rgba(0,0,0,.6);cursor:pointer}
  .bw-menubtn i{display:block;width:16px;height:2px;background:var(--k-f0cd7a);box-shadow:0 5px 0 var(--k-f0cd7a),0 -5px 0 var(--k-f0cd7a)}
  body.bw-menu-open .bw-menubtn{background:var(--k-b98a2e);color:var(--k-1a1100)}
  body.bw-menu-open .bw-menubtn i{background:var(--k-1a1100);box-shadow:0 5px 0 var(--k-1a1100),0 -5px 0 var(--k-1a1100)}
  .bw-podium{grid-template-columns:1fr}
  body.bw-clean.bw-menu-open #Menu{width:auto;box-sizing:border-box;margin:0;padding:10px 16px 40px;border-radius:0;border-width:1px 0 0}
  body.bw-clean #Menu .menuitem,body.bw-clean #Menu .Submenu,body.bw-clean #Menu .MenuButton{width:100% !important;max-width:520px;margin-left:auto;margin-right:auto}
  body.bw-clean #Menu .SubmenuitemLabel{padding:11px 14px !important;font-size:16px !important}
  body.bw-clean .InfoBar .InfoBarSmallElement{display:none !important}
  body.bw-clean .InfoBar>span[style*="float"] .InfoBarSmallElement{display:inline-flex !important;font-size:12px !important}
  body.bw-clean .InfoBar{justify-content:space-between;gap:0;padding:10px 14px}
  body.bw-clean .InfoBar>img+.InfoBarNumbers{margin-right:0}
  body.bw-clean .InfoBar .InfoBarLinks>img{margin:0 !important;height:22px;width:22px}
  body.bw-clean .InfoBar .InfoBarNumbers{margin:0 !important}
  body.bw-clean .InfoBar a[data-bs-toggle]{display:none}
  body.bw-clean .InfoBar>span[style*="float"]{margin:0 !important}
  body.bw-clean .bw-pagetitle{font-size:22px}
}
@media (max-width:560px){
  .bw-hero{font-size:14px}
  .bw-banner{min-height:470px}
  .bw-scene{top:auto;bottom:70px;height:300px}
  .bw-hero-text{padding:30px 16px 330px}
  .bw-banner h2{font-size:38px}
  .bw-hero-text{width:auto}
  .bw-castle-tag{display:none}
  .bw-dock{flex-direction:column;align-items:flex-start;gap:8px}
  .bw-nums{width:100%;justify-content:space-between;gap:6px}
  .bw-ip{width:100%;margin:0;justify-content:space-between}
  .bw-duo{grid-template-columns:1fr}
  .bw-next{flex-direction:column;align-items:flex-start}
}

/* v3.1: menu proprio no celular (fundo opaco, texto a esquerda, alvos maiores) */
@media (max-width:900px){
  body.bw-clean.bw-menu-open #Menu{background:var(--k-0b0d12) !important;text-align:left}
  body.bw-clean.bw-menu-open #Menu .bw-nav{max-width:520px;margin:0 auto}
  body.bw-clean #Menu .bw-h{padding:14px 12px;font-size:14px}
  body.bw-clean #Menu .bw-l a{padding:12px 14px;font-size:16px;text-align:left}
}
/* v4.3: Detalhes do Personagem no celular: inventario e atributos empilhados (antes o painel da direita saia da tela) */
@media (max-width:700px){
  body.bw-clean #News table.Table3>tbody>tr{display:flex;flex-direction:column;gap:10px}
  body.bw-clean #News table.Table3>tbody>tr>td{display:block;width:100% !important;box-sizing:border-box}
  body.bw-clean #News table.Table3 .TableContent td{padding:5px 3px !important;font-size:12px !important}
  body.bw-clean #News table.Table3 .TableContent td img{max-width:26px;height:auto}
  body.bw-clean #News table.Table3 .TableContent td b{font-size:12px !important}
}
/* v4.3: formulario de login no celular: campos em cima, botoes Entrar / Conta perdida embaixo (antes os botoes saiam da tela) */
@media (max-width:700px){
  body.bw-clean #News tr:has(>#LoginFormButtonCell){display:flex;flex-direction:column}
  body.bw-clean #News tr:has(>#LoginFormButtonCell)>td{display:block;width:100% !important;box-sizing:border-box}
  body.bw-clean #LoginFormButtonCell>div[style*="float"]{float:none !important;display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:8px 0}
  body.bw-clean #LoginFormButtonCell>div[style*="float"]>div[style*="2px"]{display:none}
}
/* v4.3: botoes medios nas listas (Ver, etc.) cabem na tela do celular */
@media (max-width:700px){
  body.bw-clean #News .MediumButton,body.bw-clean #News .MediumButton>div,body.bw-clean #News input.MediumButtonText{width:96px !important;max-width:100%}
  body.bw-clean #News table.Table3 .TableContent td{word-break:normal}
}
@media (max-width:700px){
  body.bw-clean #News table.Table3 .BigButton,body.bw-clean #News table.Table3 .BigButton>div,body.bw-clean #News table.Table3 input.BigButtonText{width:96px !important}
  body.bw-clean #News table.Table5 table[style*="width:100%"]{table-layout:fixed}
}
@media (max-width:700px){
  body.bw-clean #News tr:has(>td.LabelV150):has(input[type=submit]){display:flex;flex-wrap:wrap;align-items:center;gap:8px}
  body.bw-clean #News tr:has(>td.LabelV150):has(input[type=submit])>td{display:block;width:auto !important}
  body.bw-clean #News table.Table1 table{width:100% !important}
}
@media (max-width:700px){
  body.bw-clean #News iframe{max-width:100% !important;height:auto !important;aspect-ratio:420/345}
  body.bw-clean #News table:has(>tbody>tr>td>iframe){width:100% !important}
}
/* v4.3: escolha de vocacao/sexo no cadastro: 2 por linha, sem cortar */
@media (max-width:700px){
  body.bw-clean #News td:has(>.OptionContainer){display:flex !important;flex-wrap:wrap;gap:8px 4px;text-align:left !important}
  body.bw-clean #News td:has(>.OptionContainer)>.OptionContainer{flex:0 0 calc(50% - 4px);margin:0 !important;white-space:nowrap}
}

/* v4.4: bandeiras de idioma no celular */
@media (max-width:700px){
  body.bw-clean .InfoBar{flex-wrap:wrap !important;row-gap:6px}
  body.bw-clean .InfoBar .bw-lang{order:-1;width:100%;justify-content:flex-end;margin:0 0 2px}
  body.bw-clean .InfoBar .bw-lang+span[style*="float"]{margin-left:0 !important}
}

/* v4.6: pagina da conta no celular (status, beneficios, aviso de registro e lista de personagens sem corte lateral) */
@media (max-width:700px){
  body.bw-clean table.TableContent:has(.AccountStatusImage)>tbody>tr{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:10px}
  body.bw-clean table.TableContent:has(.AccountStatusImage)>tbody>tr>td{display:block;width:auto !important;padding:0 !important}
  body.bw-clean table.TableContent:has(.AccountStatusImage)>tbody>tr>td[width]{flex:1 1 0;min-width:0}
  body.bw-clean table.TableContent:has(.AccountStatusImage)>tbody>tr>td:last-child{flex:1 1 100%;display:flex;gap:8px;align-items:stretch}
  body.bw-clean table.TableContent:has(.AccountStatusImage)>tbody>tr>td:last-child>a,body.bw-clean table.TableContent:has(.AccountStatusImage)>tbody>tr>td:last-child>form{flex:1;min-width:0;margin:0}
  body.bw-clean table.TableContent:has(.AccountStatusImage)>tbody>tr>td:last-child>div[style*="font-size:1px"]{display:none}
  body.bw-clean table.TableContent:has(.AccountStatusImage) .BigButton{width:100% !important;box-sizing:border-box}
  body.bw-clean table.TableContent:has(.AccountStatusImage) .BigButton input.BigButtonText{width:100%;box-sizing:border-box;white-space:normal;padding:0 6px}
  body.bw-clean td.premiumbenefits{display:flex !important;flex-direction:column;gap:10px;padding:12px !important}
  body.bw-clean td.premiumbenefits>div{display:flex;align-items:center;justify-content:flex-start !important;gap:10px;text-align:left}
  body.bw-clean td.premiumbenefits>div>div{flex:1;min-width:0}
  body.bw-clean tr:has(>td.LabelV+td>form[action*="account/register"]){display:flex;flex-wrap:wrap;align-items:center;gap:10px}
  body.bw-clean tr:has(>td.LabelV+td>form[action*="account/register"])>td{display:block;width:auto !important}
  body.bw-clean tr:has(>td.LabelV+td>form[action*="account/register"])>td.LabelV{flex:1 1 100%}
  body.bw-clean tr:has(>td.LabelV+td>form[action*="account/register"])>td[style*="width:100%"]{flex:1 1 100%}
  body.bw-clean tr:has(>td.LabelV+td>form[action*="account/register"]) form{margin:0}
  body.bw-clean table.TableContent tr.LabelH>td[style*="width: 100px"],body.bw-clean table.TableContent td:has(>span[id^="CharacterOptionsOf_"]){width:auto !important}
  body.bw-clean table.TableContent td>span[style*="nowrap"]{white-space:normal !important}
  body.bw-clean span[id^="CharacterOptionsOf_"]{display:flex;flex-direction:column;gap:2px;font-size:12px}
  body.bw-clean span[id^="CharacterOptionsOf_"]>br{display:none}
}
@media (max-width:700px){
  body.bw-clean table.TableContent td>span[style*="nowrap"]{line-height:1.35 !important}
  body.bw-clean table.TableContent td>span[style*="nowrap"] small{display:block;margin-top:2px}
}

/* v4.6: caixa Buscar ocupa a largura toda no celular */
@media (max-width:768px){
  body.bw-clean .searchchar,
  body.bw-clean .searchchar_content{width:100% !important;max-width:100% !important;box-sizing:border-box}
  body.bw-clean .searchchar_input{width:100% !important;box-sizing:border-box}
}