/* Responsive adjustments preserving the original desktop look */

#mobile-menu-toggle { display: none; }

@media (max-width: 1100px) {
  body {
    min-width: 0 !important;
  }

  .wrapper,
  #block-toolbar,
  #block-header,
  #block-main,
  #block-footer {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  #block-main {
    margin: 0 !important;
  }

  #block-main > div > div {
    padding: 20px 0 40px !important;
  }

  #block-header {
    max-height: none !important;
    padding-bottom: 0 !important;
  }

  #headerbar {
    height: auto;
  }

  #menubar {
    height: auto;
    padding-top: 6px;
  }

  #toolbar .float-left,
  #toolbar .float-right,
  #headerbar .left,
  #headerbar .right {
    float: none !important;
    width: 100%;
    text-align: center;
  }

  #sidebar-a,
  #sidebar-b,
  #maininner,
  .l2-top-left,
  .l2-top-right,
  .l2-castle-info,
  .l2-fortress-info {
    width: 100% !important;
    float: none !important;
  }

  #l2-logo,
  #l2-vote,
  .l2-castle-pic,
  .l2-fortress-pic {
    width: 100% !important;
    float: none !important;
    margin: 0 0 10px 0 !important;
  }

  ul#l2-vote-menu {
    width: 100%;
    margin: 8px 0 0 0;
  }

  #search {
    float: none !important;
    width: 100%;
    margin-top: 10px;
  }

  #searchbox {
    max-width: 100%;
  }

  #searchbox input[type="text"] {
    width: 70%;
    max-width: 320px;
  }

  #menu .dropdown,
  #menu .columns2,
  #menu .columns3,
  #menu .columns4 {
    width: 100% !important;
  }

  #menu ul.menu-dropdown,
  #menu ul.menu-dropdown li,
  #menu ul.menu-dropdown li a,
  #menu ul.menu-dropdown li span.separator {
    width: 100%;
    float: none !important;
    text-align: left;
  }

  #menu ul.menu-dropdown li a,
  #menu ul.menu-dropdown li span.separator {
    padding-left: 10px;
    box-sizing: border-box;
  }

  #logol2null img,
  .l2-img,
  #content img {
    max-width: 100%;
    height: auto;
  }

  #content iframe {
    max-width: 100%;
  }

  #content table {
    display: block;
    width: 100% !important;
    overflow-x: auto;
    white-space: nowrap;
  }

  #content table td,
  #content table th {
    white-space: normal;
  }

  #content form input[type="text"],
  #content form input[type="email"],
  #content form input[type="password"],
  #content form select,
  #content form textarea {
    max-width: 100%;
    box-sizing: border-box;
  }

  .l2-castle,
  .l2-fortress,
  .l2-territory {
    height: auto;
  }

  .l2-castle .l2-castle-info,
  .l2-castle .l2-fortress-info {
    display: block !important;
  }

  /* FIX: impede scrollbar horizontal por qualquer overflow residual */
  body {
    overflow-x: hidden;
  }

  /* FIX: decoração do menu com position:absolute fixa (top:92px) flutua incorretamente ao zoom */
  #menubar div.fancy {
    display: none;
  }

  /* FIX: .l2-castle-pic/.l2-fortress-pic tem width:100% no responsive mas height:99px
     persiste do custom.css → imagem distorcida/cortada */
  .l2-castle-pic,
  .l2-fortress-pic {
    height: auto !important;
    max-width: 149px;
  }
}

/* ============================================================
   BREAKPOINT 992px — Zoom ~140% em 1366px / ~200% em tablet
   ============================================================ */
@media (max-width: 992px) {
	#menubar { padding: 7px 12px 10px; box-sizing: border-box; }
	#mobile-menu-toggle {
		display: flex;
		width: 100%;
		min-height: 42px;
		align-items: center;
		justify-content: center;
		gap: 8px;
		color: #d6b17b;
		background: linear-gradient(rgba(57,48,43,.95), rgba(21,18,17,.95));
		border: 1px solid rgba(194,126,53,.45);
		border-radius: 3px;
		font: inherit;
		text-transform: uppercase;
		cursor: pointer;
	}
	#menubar #menu { display: none; margin-top: 7px; }
	#menubar.menu-open #menu { display: block; }
	#menubar.menu-open { height: auto !important; }
	#menu .dropdown { position: static !important; visibility: visible !important; opacity: 1 !important; }
	#menu .dropdown-bg { margin: 0 !important; }
	#menu ul.menu-dropdown li.parent > .dropdown { display: none; }
	#menu ul.menu-dropdown li.parent.mobile-submenu-open > .dropdown { display: block !important; }
	#menu ul.menu-dropdown li.parent > span.separator { cursor: pointer; }

  /* Área de voto: sem margin-left extra quando os botões já wrappeiam */
  ul#l2-vote-menu {
    margin-left: 0;
    text-align: center;
  }

  /* Logo no header fica centralizado quando stacked */
  #l2-logo {
    float: none !important;
    margin: 0 auto 6px !important;
    display: block;
    text-align: center;
  }

  /* Ícones sociais: centraliza quando stacked */
  .social-icons-special {
    justify-content: center;
  }

  /* Breadcrumbs: não força quebra de linha desnecessária */
  #breadcrumbs .breadcrumbs {
    word-break: break-word;
  }

  /* Search: caixa mais compacta */
  #searchbox input[type="text"] {
    width: 65%;
    max-width: 300px;
  }
}

/* ============================================================
   BREAKPOINT 768px — Zoom ~175% em 1366px / tablet portrait
   ============================================================ */
@media (max-width: 768px) {
  /* Toolbar: fonte menor, evita duas linhas muito apertadas */
  #toolbar {
    font-size: 10px;
    line-height: 20px;
  }

  /* Botões de voto: quebra vertical para não vazar em viewports estreitos */
  ul#l2-vote-menu li {
    float: none;
    display: block;
    text-align: center;
  }

  ul#l2-vote-menu li a {
    float: none;
    display: inline-block;
    margin: 0 auto 3px;
  }

  /* Sidebar login: garante campos full-width */
  #sidebar-a .module input[type="text"],
  #sidebar-a .module input[type="password"],
  #sidebar-b .module input[type="text"],
  #sidebar-b .module input[type="password"] {
    width: 100%;
    box-sizing: border-box;
  }

  /* Espaçamento do conteúdo mais compacto */
  #content > div {
    padding: 18px;
  }

  /* Tabelas com fonte menor em tablets */
  #content table {
    font-size: 12px;
  }
}

@media (max-width: 640px) {
  #toolbar {
    line-height: 18px;
    font-size: 10px;
  }

  #content > div {
    padding: 14px;
  }

  #footer {
    text-align: center;
  }

  #searchbox input[type="text"] {
    width: 62%;
  }

  .box,
  .box-note,
  .box-info,
  .box-warning {
    padding-left: 10px;
    padding-right: 10px;
  }

  ul#l2-vote-menu li {
    float: none;
  }

  ul#l2-vote-menu li a {
    float: none;
    display: block;
    margin: 0 auto 4px auto;
  }

  #content table {
    font-size: 12px;
  }

  #content table td,
  #content table th {
    padding: 6px 8px;
  }
}

/* ============================================================
   BREAKPOINT 576px — Zoom ~235% em 1366px / celular
   ============================================================ */
@media (max-width: 576px) {
  /* Esconde botões de voto em celulares — viewports < 595px causam overflow */
  #l2-vote {
    display: none;
  }

  /* Padding mínimo no conteúdo */
  #content > div {
    padding: 12px;
  }

  /* Toolbar ainda mais compacto */
  #toolbar {
    font-size: 9px;
    line-height: 16px;
  }

  /* Search mais compacto */
  #searchbox input[type="text"] {
    width: 60%;
    max-width: 200px;
  }

  /* Box warnings/info: sem padding horizontal excessivo */
  .box,
  .box-note,
  .box-info,
  .box-warning,
  .box-hint,
  .box-download {
    padding-left: 8px;
    padding-right: 8px;
  }

  /* Tabelas: fonte mínima legível */
  #content table {
    font-size: 11px;
  }

  #content table td,
  #content table th {
    padding: 5px 6px;
  }

  /* Footer centralizado */
  #footer {
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}