/* 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}
}

/* v4.67: correcoes visuais no celular (paginas antigas em tabela deixavam o conteudo cortado/rolando para o lado) */
@media (max-width:900px){
  .BoxContent{overflow-x:visible}
  .BoxContent table:has(> tbody > tr > td > .TableContainer),
  .BoxContent table:has(> tbody > tr > td > .TableContainer) > tbody,
  .BoxContent table:has(> tbody > tr > td > .TableContainer) > tbody > tr,
  .BoxContent table:has(> tbody > tr > td > .TableContainer) > tbody > tr > td{display:block;width:100% !important;box-sizing:border-box}
  .BoxContent table:has(> tbody > tr > td > .TableContainer) > tbody > tr > td{margin-bottom:12px}
  .TableContainer,.InnerTableContainer{max-width:100%;box-sizing:border-box}
  .InnerTableContainer{overflow-x:auto}
  .InnerTableContainer form > table[width="100%"] > tbody > tr,
  .InnerTableContainer form > table[width="100%"] > tbody > tr > td{display:block;width:100% !important;box-sizing:border-box}
  .InnerTableContainer form > table[width="100%"] > tbody > tr > td{padding:6px 4px}
  .InnerTableContainer form > table[width="100%"] label{display:inline-block;padding:3px 0;line-height:1.35}
  /* Magias: as duas colunas (instantaneas e conjuracao) uma embaixo da outra */
  .BoxContent > table > tbody > tr:has(> td > center > table),
  .BoxContent > table > tbody > tr:has(> td > center > table) > td{display:block;width:100% !important;box-sizing:border-box}
  .BoxContent > table > tbody > tr:has(> td > center > table) > td{margin-bottom:14px}
  .BoxContent table[width="250"]{width:100% !important;max-width:340px}
  /* Guilds: logo + nome em linha, botao embaixo */
  table.TableContent > tbody > tr:has(> td[width="64"]){display:grid;grid-template-columns:64px 1fr;align-items:center;gap:6px 12px;padding:8px 0}
  table.TableContent > tbody > tr:has(> td[width="64"] > b){display:none}
  table.TableContent > tbody > tr:has(> td[width="64"]) > td:last-child{grid-column:1/-1}
  /* Loja: icone + texto, botao Adquirir embaixo */
  table:has(> tbody > tr > td[width="140"]) > tbody > tr{display:grid;grid-template-columns:44px 1fr;gap:6px 10px;align-items:start;padding:10px 6px}
  table:has(> tbody > tr > td[width="140"]) > tbody > tr > td{display:block;width:auto !important;padding:0}
  table:has(> tbody > tr > td[width="140"]) > tbody > tr > td[width="140"]{grid-column:2;text-align:left !important}
  /* Pagina de conta */
  .BoxContent td.LabelV,.BoxContent td.LabelV150{white-space:normal;width:auto !important;word-break:break-word}
  .BigButton{max-width:100%}
  .BoxContent td b,.BoxContent th b{font-size:max(12.5px,1em)}
  /* Downloads */
  html body .dl-btn{display:flex;flex-direction:column;justify-content:center;align-items:center;min-width:0;width:100%;box-sizing:border-box;height:auto !important;line-height:1.25;text-align:center;padding:12px 16px}
  .dl-btn-main{white-space:normal}
  /* Highscores: pododio 1,2,3 em coluna */
  .bw-podium .bw-pod1{order:1}.bw-podium .bw-pod2{order:2}.bw-podium .bw-pod3{order:3}
  /* Calendario do Liroth: semana em lista */
  html body .lr-week{grid-template-columns:1fr;gap:6px}
  html body .lr-day{flex-direction:row;align-items:center;justify-content:space-between;min-height:0;padding:9px 14px;text-align:left}
  html body .lr-day>i{min-width:96px;margin:0}
  html body .lr-kpis>.lr-kpi:last-child:nth-child(odd){grid-column:1/-1}
  html body .lr-steps>li{padding-left:56px}
  .InnerTableContainer form[action$="/houses"] > table > tbody > tr:nth-child(2){display:none}
}
@media (max-width:900px){
  html body a.dl-btn{display:flex !important;flex-direction:column !important;justify-content:center;align-items:center}
  html body .dl-btn .dl-btn-main,html body .dl-btn .dl-btn-meta{display:block;width:100%;text-align:center}
  table.InnerTableButtonRow,table.InnerTableButtonRow > tbody,table.InnerTableButtonRow > tbody > tr{display:flex;flex-wrap:wrap;gap:8px;width:100%}
  table.InnerTableButtonRow td{display:block}
  html body .bw-banner{min-height:545px !important}
}
@media (max-width:560px){
  html body .bw-hero .bw-banner{min-height:545px !important}
}
@media (max-width:900px){
  html body .lr-tbl td:first-child{white-space:normal}
  html body .lr-tbl{table-layout:auto}
  html body .lr-tbl th,html body .lr-tbl td{padding:9px 10px;word-break:break-word}
  html body .bw-status,html body .bw-status *{font-size:max(11.5px,1em)}
  html body .bw-status small,html body .bw-sstop small,html body [class*=bw-ss] small{font-size:11.5px}
  html body .NewsHeadlineText{max-width:100%;white-space:normal;word-break:break-word}
  html body .BoxContent td.LabelV{white-space:normal;word-break:break-word}
  html body .BoxContent table[width="100%"] td.white{max-width:100vw}
}
@media (max-width:900px){
  html body .InfoBarLinks,html body .InfoBarNumbers{font-size:11.5px !important}
  html body .serversave_text small{font-size:11.5px !important}
}
@media (max-width:900px){
  html body .BoxContent table:has(> tbody > tr > td > table > tbody > tr > td + td):not(.TableContent) table td{padding:3px 4px;font-size:12px}
  html body .BoxContent table:has(> tbody > tr > td > table > tbody > tr > td + td):not(.TableContent) > tbody > tr > td{padding:0 2px;width:33%}
}
@media (max-width:900px){
  html body .NewsHeadlineBackground{display:flex;flex-wrap:wrap;gap:2px 8px;align-items:baseline;height:auto !important;padding:8px 10px}
  html body .NewsHeadlineText,html body .NewsHeadlineDate{position:static !important;float:none !important;margin:0 !important;width:auto !important;left:auto !important;max-width:100%}
}
@media (max-width:900px){
  html body .NewsHeadlineIcon{position:static !important;width:24px;height:24px;flex:0 0 auto;margin:0 !important;align-self:center}
  html body .NewsHeadlineText{flex:1 1 100%}
}
@media (max-width:900px){
  html body.bw-clean .BoxContent td[class^=LabelV]{white-space:normal !important;word-break:break-word}
}
/* v4.70: formularios de conta (senha, e-mail, personagem): rotulo em cima, campo embaixo, em vez de coluna estreita quebrando letra por letra */
@media (max-width:900px){
  html body.bw-clean .BoxContent tr:has(> td[class^=LabelV] + td :is(input:not([type=hidden]),select,textarea)){display:block;padding:8px 0}
  html body.bw-clean .BoxContent tr:has(> td[class^=LabelV] + td :is(input:not([type=hidden]),select,textarea)) > td{display:block;width:100% !important;max-width:100%;padding:2px 0 !important;box-sizing:border-box;white-space:normal !important}
  html body.bw-clean .BoxContent tr:has(> td[class^=LabelV] + td :is(input:not([type=hidden]),select,textarea)) > td[class^=LabelV]{padding-bottom:4px !important}
  html body.bw-clean .BoxContent tr:has(> td[class^=LabelV] + td :is(input:not([type=hidden]),select,textarea)) input:is([type=text],[type=password],[type=email],[type=number]),
  html body.bw-clean .BoxContent tr:has(> td[class^=LabelV] + td :is(input:not([type=hidden]),select,textarea)) select{width:100% !important;max-width:100%;box-sizing:border-box}
  html body.bw-clean .BoxContent .InnerTableContainer>table{width:100% !important}
}
/* v4.70: criar personagem no celular (cabecalho Nome/Sexo e vocacao empilhados) */
@media (max-width:900px){
  html body.bw-clean .BoxContent table.TableContent:has(> tbody > tr.LabelH + tr) > tbody{display:grid;grid-template-columns:1fr}
  html body.bw-clean .BoxContent table.TableContent:has(> tbody > tr.LabelH + tr) > tbody > tr{display:contents}
  html body.bw-clean .BoxContent table.TableContent:has(> tbody > tr.LabelH + tr) > tbody > tr > td{display:block;width:auto !important;padding:6px 12px !important;box-sizing:border-box}
  html body.bw-clean .BoxContent table.TableContent:has(> tbody > tr.LabelH + tr) > tbody > tr.LabelH > td:nth-child(1){order:1;padding-bottom:0 !important}
  html body.bw-clean .BoxContent table.TableContent:has(> tbody > tr.LabelH + tr) > tbody > tr.LabelH + tr > td:nth-child(1){order:2}
  html body.bw-clean .BoxContent table.TableContent:has(> tbody > tr.LabelH + tr) > tbody > tr.LabelH > td:nth-child(2){order:3;padding-bottom:0 !important}
  html body.bw-clean .BoxContent table.TableContent:has(> tbody > tr.LabelH + tr) > tbody > tr.LabelH + tr > td:nth-child(2){order:4}
  html body.bw-clean .BoxContent tr[valign=top] > td[width="160"]{display:block;width:100% !important;padding-bottom:0 !important}
  html body.bw-clean .BoxContent tr[valign=top] > td[width="160"] br{display:none}
  html body.bw-clean .BoxContent tr[valign=top] > td[width="160"] + td{display:block;width:100% !important}
  html body.bw-clean .BoxContent #character_name,html body.bw-clean .BoxContent input[name=name]{width:calc(100% - 28px);max-width:100%;box-sizing:border-box}
}

/* v4.70 – quebra de palavras em tabelas pequenas (online / vantagens) */
@media (max-width:768px){
  html body td.LabelV150{white-space:nowrap !important;word-break:keep-all !important;overflow-wrap:normal !important;font-size:11.5px;padding-left:4px;padding-right:4px}
  html body .lr-tbl th,html body .lr-tbl td{word-break:keep-all;overflow-wrap:normal;hyphens:none}
  html body .lr-tbl th:last-child,html body .lr-tbl td:last-child{white-space:nowrap}
}
@media (max-width:768px){
  html body tr:has(> td + td > .TableContentContainer td.LabelV150){display:grid;grid-template-columns:1fr 1fr;gap:8px}
  html body tr:has(> td + td > .TableContentContainer td.LabelV150) > td{display:block;width:auto !important}
}
/* liroth-icone-play: o Jogar no navegador nao aparece na barra do celular */
@media (max-width:900px){.InfoBar img[src*='icon-play16'],.InfoBar img[src*='icon-play16']+span{display:none !important}}
/* liroth-sem-jogar-celular: no celular nao se oferece o jogo no navegador */
@media (max-width:900px){
a[href$='/jogar/'],a[href$='/jogar'],a[href*='/jogar/?'],.lr-play,.InfoBar img[src*='icon-play16'],.InfoBar img[src*='icon-play16']+span{display:none !important}
li:has(> a[href$='/jogar/']),li:has(> a[href$='/jogar']){display:none !important}
}