@import url('https://fonts.googleapis.com/css2?family=Laila:wght@300;400;500;600;700&display=swap');
.ImgPesquisarPersonagembarrinha {
  background: url(/images/lupa.gif) no-repeat;
  border: 0;
  margin-left: 173px;
  margin-top: -38px;
  position: absolute;
  z-index: 1081;
}
.inputbk {
  margin-top: -35px;
  width: 201px;
  height: 24px;
  z-index: 1080;
  position: absolute;
  border-radius: 7px;
  border: 1px solid rgb(255 255 255);
  background-image: linear-gradient(to right, #1d2c3e, #1d2c3e); /* azul claro */
  color: #fff;
  text-align: center;
  box-shadow: 0 0 3px #1d75bc;
  outline: 0;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 11px;
}


.ImgPesquisarPersonagem {
  background: url(/images/imgbuscapersonagem/procurar.png) no-repeat;
  width: 94px;
  height: 30px;
  border: 0;
  margin-left: 200px;
  margin-top: -38px;
  position: absolute;
  z-index: 10;
}
.SmallMenuBox {
  z-index: 100;
}
#LeftArtwork #TibiaLogoArtworkTop {
  position: absolute;
  top: 0px;
  left: -25px;
  height: 145px;
  width: auto;
  z-index: 101;
  cursor: pointer;
  border: 0;
}
.SubmenuitemLabel {
    margin: 0;
    border-top: 0;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 23px;
    border-bottom: 1px solid #446280;
	background-color: #1d2c3e; /* azul escuro */
    overflow: hidden;
    font-family: 'Laila', serif;
}

#BannerModal .modal-open .modal {
    z-index: 2060;
    --bs-backdrop-zindex: 2060;
}

/* Popup promocional da pagina inicial. */
.PromoPopup {
    --promo-popup-layer: 100000;
    position: fixed;
    inset: 0;
    z-index: var(--promo-popup-layer);
    isolation: isolate;
    display: grid;
    place-items: center;
    box-sizing: border-box;
    padding: 16px;
}

.PromoPopup[hidden] {
    display: none !important;
}

.PromoPopup__backdrop {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: rgba(7, 12, 18, 0.88);
    cursor: default;
}

.PromoPopup__dialog {
    position: relative;
    z-index: 1;
    display: flex;
    width: min(1039px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    box-sizing: border-box;
    flex-direction: column;
    align-items: center;
}

.PromoPopup__imageLink {
    display: block;
    min-height: 0;
}

.PromoPopup__image {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: calc(100vh - 112px);
    object-fit: contain;
    filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.6));
}

.PromoPopup__closeIcon {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 2;
    width: 34px;
    height: 34px;
    border: 1px solid #d7ae63;
    border-radius: 4px;
    background: #30251f;
    color: #f7e4bd;
    font: bold 25px/30px Verdana, Arial, sans-serif;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
}

.PromoPopup__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 8px;
    padding: 8px 10px;
    border: 2px solid #55636c;
    border-radius: 3px;
    background: #d4c0a1;
    color: #5a2800;
    box-shadow: 3px 3px 2px #875f3e;
    font: bold 12px Verdana, Arial, sans-serif;
}

.PromoPopup__reminder {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
}

.PromoPopup__reminder input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: #5f4d41;
}

.PromoPopup__closeButton {
    min-width: 86px;
    padding: 6px 12px;
    border: 1px solid #2f251f;
    border-radius: 3px;
    background: #5f4d41;
    color: #fff;
    font: bold 12px Verdana, Arial, sans-serif;
    cursor: pointer;
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.18);
}

.PromoPopup__closeIcon:hover,
.PromoPopup__closeIcon:focus-visible,
.PromoPopup__closeButton:hover,
.PromoPopup__closeButton:focus-visible {
    background: #49382f;
    outline: 2px solid #f1e0c6;
    outline-offset: 2px;
}

body.PromoPopupOpen {
    overflow: hidden;
}

@media (max-width: 600px) {
    .PromoPopup {
        padding: 10px;
    }

    .PromoPopup__dialog {
        width: calc(100vw - 20px);
        max-height: calc(100vh - 20px);
    }

    .PromoPopup__image {
        max-height: calc(100vh - 116px);
    }

    .PromoPopup__controls {
        width: calc(100% - 20px);
        box-sizing: border-box;
        flex-wrap: wrap;
        gap: 8px 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .PromoPopup *,
    .PromoPopup *::before,
    .PromoPopup *::after {
        scroll-behavior: auto !important;
        transition: none !important;
    }
}

/* Modal da imagem do Featured Article (mesmo visual do popup promocional). */
.FeaturedModal {
    --featured-modal-layer: 100000;
    position: fixed;
    inset: 0;
    z-index: var(--featured-modal-layer);
    isolation: isolate;
    display: grid;
    place-items: center;
    box-sizing: border-box;
    padding: 16px;
}

.FeaturedModal[hidden] {
    display: none !important;
}

.FeaturedModal__backdrop {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: rgba(7, 12, 18, 0.88);
    cursor: default;
}

.FeaturedModal__dialog {
    position: relative;
    z-index: 1;
    display: flex;
    width: min(1039px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    box-sizing: border-box;
    flex-direction: column;
    align-items: center;
}

.FeaturedModal__image {
    display: block;
    width: 100%;
    height: auto;
    max-height: calc(100vh - 112px);
    object-fit: contain;
    filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.6));
}

.FeaturedModal__closeButton {
    min-width: 86px;
    margin-top: 10px;
    padding: 6px 12px;
    border: 1px solid #2f251f;
    border-radius: 3px;
    background: #5f4d41;
    color: #fff;
    font: bold 12px Verdana, Arial, sans-serif;
    cursor: pointer;
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.18);
}

.FeaturedModal__closeButton:hover,
.FeaturedModal__closeButton:focus-visible {
    background: #49382f;
    outline: 2px solid #f1e0c6;
    outline-offset: 2px;
}

body.FeaturedModalOpen {
    overflow: hidden;
}

@media (max-width: 600px) {
    .FeaturedModal {
        padding: 10px;
    }

    .FeaturedModal__dialog {
        width: calc(100vw - 20px);
        max-height: calc(100vh - 20px);
    }

    .FeaturedModal__image {
        max-height: calc(100vh - 116px);
    }
}

.MobileTibiaLogo {
    position: relative;
    top: 0px;
    width: 90px;
    height: 110px;
    margin-left: auto;
    margin-right: auto;
    background-size: contain;
    background-image: url(../zinx-logo-artwork-top.png);
    background-position: center;
    background-repeat: no-repeat;
    z-index: 999;
}
.main-site-container {
    margin: 35px auto;
}

/* Destaque temporário da nova central de sistemas no submenu Library. */
#submenu_systems .SubmenuitemLabel {
    display: inline-flex;
    align-items: center;
    text-shadow: 0 0 4px rgba(125, 255, 214, 0.75);
}

#submenu_systems .SubmenuitemLabel::after {
    content: "";
    display: inline-block;
    width: 21px;
    height: 9px;
    margin-left: 4px;
    background: url('../images/global/menu/system-new.gif') center / 21px 9px no-repeat;
    filter: drop-shadow(0 0 3px rgba(119, 255, 213, 0.95));
    animation: systems-new-glow 1.6s ease-in-out infinite alternate;
}

@keyframes systems-new-glow {
    from { opacity: 0.72; }
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    #submenu_systems .SubmenuitemLabel::after {
        animation: none;
    }
}

.systems-back-link {
    display: inline-block;
    min-width: 148px;
    padding: 7px 13px;
    color: #fff !important;
    background: #5a3d5c;
    border: 1px solid #2f1e31;
    border-radius: 3px;
    font-weight: bold;
    text-align: center;
    text-decoration: none !important;
}

.systems-back-link:hover,
.systems-back-link:focus {
    background: #744f77;
}

/* Oculta somente o botão legado de retorno, substituído por link acessível. */
.Content .BigButton:has(input[name="Back_Wiki"]) {
    display: none;
}

/* Link da Wiki no submenu Library: sem o selo NEW legado quebrado. */
#submenu_systems .SubmenuitemLabel {
    display: block;
    color: #ffd84a;
    text-shadow: 1px 1px 1px #111;
}

#library_Submenu a[href*="systems"],
#library .Level2Entry[href*="systems"] {
    color: #ffd84a !important;
    text-shadow: 1px 1px 1px #111;
}

#submenu_systems .SubmenuitemLabel::after {
    content: none;
    display: none;
}

/* Páginas de eventos: informação agrupada, sem blocos soltos. */
.event-wiki-page {
    margin: 8px auto 14px;
    padding: 16px;
    color: #633400;
    background: rgba(250, 240, 215, 0.82);
    border: 1px solid #6d4b2d;
}

.event-wiki-intro {
    margin: 0 0 14px;
    padding: 12px 16px;
    text-align: center;
    background: #ead7b5;
    border: 1px solid #a3774a;
}

.event-wiki-intro h2,
.event-wiki-map h3,
.event-wiki-subtitle {
    margin: 0 0 6px;
    color: #603300;
    text-align: center;
}

.event-wiki-intro p {
    margin: 0;
}

.event-wiki-details,
.event-wiki-rewards,
.event-daily .table-offers {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    border: 1px solid #8d6742;
}

.event-wiki-details th,
.event-wiki-details td,
.event-wiki-rewards th,
.event-wiki-rewards td,
.event-daily .table-offers th,
.event-daily .table-offers td {
    padding: 10px 12px;
    vertical-align: middle;
    border: 1px solid #b99870;
    line-height: 1.3;
}

.event-wiki-details th {
    width: 23%;
    color: #fff;
    text-align: left;
    background: #5f4d41;
}

.event-wiki-details tr:nth-child(odd) td,
.event-wiki-rewards tbody tr:nth-child(odd),
.event-daily .table-offers tbody tr:nth-child(odd) {
    background: #f1e0c6 !important;
}

.event-wiki-details tr:nth-child(even) td,
.event-wiki-rewards tbody tr:nth-child(even),
.event-daily .table-offers tbody tr:nth-child(even) {
    background: #d4c0a1 !important;
}

.event-wiki-rewards {
    margin: 8px 0 16px;
    text-align: center;
}

.event-wiki-rewards th,
.event-daily .table-offers thead th,
.event-daily .table-offers tbody tr:first-child td {
    color: #fff;
    font-weight: bold;
    text-align: center;
    background: #5f4d41 !important;
}

.event-daily .table-offers td {
    text-align: center;
}

.event-daily .table-offers img {
    display: block;
    margin: 0 auto 4px;
    max-width: 32px;
    max-height: 32px;
}

.event-wiki-map {
    margin-top: 16px;
    padding: 12px;
    text-align: center;
    background: #ead7b5;
    border: 1px solid #a3774a;
}

.event-wiki-map img {
    display: block;
    width: 100%;
    max-width: 860px;
    height: auto;
    margin: 10px auto 0;
    border: 1px solid #60401f;
}

@media (max-width: 700px) {
    .event-wiki-page { padding: 8px; }
    .event-wiki-details,
    .event-wiki-rewards,
    .event-daily .table-offers { table-layout: auto; }
    .event-wiki-details th,
    .event-wiki-details td,
    .event-wiki-rewards th,
    .event-wiki-rewards td,
    .event-daily .table-offers th,
    .event-daily .table-offers td { padding: 7px; }
}

/* Grade de recompensas da Roleta: mantém os itens alinhados como uma tabela. */
.wiki-roulette-drops .loot_items {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    padding: 8px;
}

.wiki-roulette-head {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    padding: 7px 12px;
    color: #fff;
    font-weight: bold;
    text-align: center;
    background: #5f4d41;
}

.wiki-roulette-drops .loot_item {
    display: grid !important;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px;
    min-height: 42px;
    margin: 0 !important;
    padding: 5px 8px;
    border: 1px solid #b99870;
    background: #f1e0c6;
}

.wiki-roulette-drops .loot_item:nth-child(even) {
    background: #d4c0a1;
}

.wiki-roulette-drops .loot_item::before {
    content: attr(data-title);
    min-width: 0;
    overflow: hidden;
    color: #5a2800;
    font-weight: bold;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wiki-roulette-drops .loot_item img {
    grid-column: 1;
    grid-row: 1;
    justify-self: center;
    max-width: 32px;
    max-height: 32px;
}

.wiki-roulette-drops .loot_item span {
    grid-column: 3;
    grid-row: 1;
    color: #5a2800;
    font-weight: bold;
}

@media (max-width: 700px) {
    .wiki-roulette-drops .loot_items { grid-template-columns: 1fr; }
}

/* O tema limita #TeaserText a 100px com overflow hidden (news.css), o que recorta
   a imagem do Featured Article. Prefixo com "body" para vencer news.css, que carrega depois. */
body .Content #FeaturedArticle #TeaserText {
    height: auto;
    overflow: visible;
}

/* Featured Article ocupando o box inteiro: o padding vem de ".Content .BoxContent" no
   basic_part_1.css. O ID #FeaturedArticle ja garante especificidade maior, e o escopo
   mantem o padding dos demais boxes do site intacto. */
.Content #FeaturedArticle .BoxContent {
    padding: 0;
}

/* Destaque do VIP na pagina de personagem. */
.GoldenVip {
    display: inline-block;
    font-weight: bold;
    color: #8a5a00;
    background: linear-gradient(90deg, #b8860b 0%, #ffd700 25%, #fff6c2 50%, #ffd700 75%, #b8860b 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: GoldenVipShine 3s linear infinite;
    text-shadow: 0 0 1px rgba(138, 90, 0, 0.25);
}

@keyframes GoldenVipShine {
    to { background-position: 200% center; }
}

.StandardVip {
    font-weight: bold;
    color: #1d75bc;
}

.NoVip {
    color: #8a7a63;
}

/* Navegadores sem suporte a background-clip:text ainda leem o texto em dourado solido. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
    .GoldenVip {
        color: #b8860b;
        background: none;
        -webkit-text-fill-color: currentColor;
        animation: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .GoldenVip { animation: none; }
}

/* --------------------------------------------------------------------------
   Rank (highscores) da sidebar
   -------------------------------------------------------------------------- */

/* O container #RightArtwork e absoluto com z-index:1000 e se estende ~92px por
   cima do link do top 1, roubando o clique numa area onde nada dele aparece.
   As imagens (Creature/Boss/Pedestal) ficam bem acima e seguem clicaveis. */
#RightArtwork {
    pointer-events: none;
}
#RightArtwork a,
#RightArtwork img {
    pointer-events: auto;
}

/* Aumenta a area do link: a ancora passa a ocupar a linha inteira do nome. */
.rank_name_line a {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Efeito ao passar o mouse sobre o personagem. */
.rank_player {
    cursor: pointer;
    transition: background-color .18s ease, box-shadow .18s ease;
}
.rank_player:hover {
    background-color: rgba(255, 215, 0, 0.16);
    box-shadow: inset 0 0 0 1px rgba(255, 215, 0, 0.45), 0 0 8px rgba(255, 215, 0, 0.20);
}
.rank_player .rank_outfit {
    transition: transform .18s ease, filter .18s ease;
}
.rank_player:hover .rank_outfit {
    transform: translateY(-50%) scale(1.12);
    filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.75));
}
.rank_player:hover .rank_text a,
.rank_player:hover .rank_text small {
    color: #ffdf6e;
}
.rank_player:hover .rank_text a {
    text-shadow: 0 0 6px rgba(255, 215, 0, 0.55);
}

@media (prefers-reduced-motion: reduce) {
    .rank_player,
    .rank_player .rank_outfit {
        transition: none;
    }
    .rank_player:hover .rank_outfit {
        transform: translateY(-50%);
    }
}

/* A coroa e a faixa inferior sao puramente decorativas (background-image) e ficam
   em z-index 1000 sobre a primeira linha, roubando o clique. */
.rank_crown,
.rank_crown_botton {
    pointer-events: none;
}

/* ==========================================================================
   Criacao de personagem
   A moldura (TableContainer + CaptionContainer + Table3 + LabelH) e a nativa do
   tema; aqui so ficam o campo de nome, o seletor de sexo e os cards de vocacao.
   Paleta: conteudo #d4c0a1, linhas #f1e0c6, texto #5a2800, borda #55636c,
   sombra #875f3e, barra #5f4d41 — as mesmas das outras boxes do site.
   ========================================================================== */

.CreateChar {
    --cc-bg-light: #f1e0c6;
    --cc-text: #5a2800;
    --cc-border: #55636c;
    --cc-shadow: #875f3e;
    --cc-bar: #5f4d41;
    --cc-accent: #8a5a12;
    --cc-inner: #faf0d7;
}


/* ---------- Campo do nome ---------- */
.CreateChar .CharNameField {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 340px;
}
.CreateChar .CharNameField .CreateAccountFormInput {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
    box-sizing: border-box;
    margin: 0;
    padding: 6px 8px;
    border: 1px solid var(--cc-border);
    border-radius: 3px;
    background: #fffaf0;
    color: var(--cc-text);
    font: bold 12px Verdana, Arial, sans-serif;
    outline: none;
    box-shadow: inset 1px 1px 2px rgba(135, 95, 62, .35);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.CreateChar .CharNameField .CreateAccountFormInput::placeholder {
    color: #9a8a6d;
    font-weight: normal;
}
.CreateChar .CharNameField .CreateAccountFormInput:focus {
    border-color: var(--cc-accent);
    box-shadow: inset 1px 1px 2px rgba(135, 95, 62, .35), 0 0 4px rgba(138, 90, 18, .55);
}
.CreateChar .CharNameField .InputIndicator {
    position: static;
    float: none;
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    margin: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px 14px;
}
.CreateChar .CharNameField .InputIndicator.is-checking {
    box-sizing: border-box;
    border: 2px solid rgba(85, 99, 108, .3);
    border-top-color: var(--cc-accent);
    border-radius: 50%;
    animation: CharNameSpin .7s linear infinite;
}
@keyframes CharNameSpin { to { transform: rotate(360deg); } }

.CreateChar .CharNameMsg {
    max-width: 340px;
    margin: 5px 0 0 0;
    font-size: 11px;
    font-weight: bold;
    line-height: 1.4;
}
.CreateChar .CharNameMsg--ok       { color: #1f7a1f; }
.CreateChar .CharNameMsg--nok      { color: #a02020; }
.CreateChar .CharNameMsg--checking { color: #6b5330; }

.CreateChar__suggest {
    display: inline-block;
    margin-top: 7px;
    padding: 3px 10px;
    border: 1px solid var(--cc-border);
    border-radius: 3px;
    background: linear-gradient(180deg, #fff6e2 0%, #e3d0ad 100%);
    color: var(--cc-text) !important;
    font-size: 11px;
    font-weight: bold;
    text-decoration: none !important;
    cursor: pointer;
    box-shadow: 1px 1px 1px rgba(135, 95, 62, .6);
}
.CreateChar__suggest:hover {
    background: linear-gradient(180deg, #fffdf5 0%, #efe0c2 100%);
    border-color: var(--cc-accent);
}

/* ---------- Segmentado (sexo / cidade) ---------- */
.CreateChar__segmented {
    display: inline-flex;
    gap: 3px;
    padding: 3px;
    border: 1px solid var(--cc-border);
    border-radius: 4px;
    background: rgba(135, 95, 62, .16);
    box-shadow: inset 1px 1px 2px rgba(135, 95, 62, .3);
}
.CreateChar .SexOption {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 96px;
    margin: 0;
    padding: 5px 13px;
    border: 1px solid transparent;
    border-radius: 3px;
    color: var(--cc-text);
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.CreateChar .SexOption input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
.CreateChar .SexOption:hover { background: rgba(255, 246, 226, .75); }
.CreateChar .SexOption.is-selected {
    background: linear-gradient(180deg, #6d5949 0%, #4f3f33 100%);
    border-color: #3a2d24;
    color: #fff;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .5);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}
.CreateChar .SexOption input:focus-visible + span {
    outline: 2px solid var(--cc-accent);
    outline-offset: 3px;
}

/* ---------- Cards de vocacao ---------- */
.CreateChar .VocationCell {
    padding: 6px;
    vertical-align: top;
}
.CreateChar .VocationCard {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    box-sizing: border-box;
    padding: 9px 7px 8px 7px;
    border: 1px solid var(--cc-border);
    border-radius: 5px;
    background: linear-gradient(180deg, #fbf3e2 0%, #e6d5b4 100%);
    box-shadow: 1px 1px 2px rgba(135, 95, 62, .55), inset 0 0 0 1px var(--cc-inner);
    cursor: pointer;
    text-align: center;
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.CreateChar .VocationCard input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
.CreateChar .VocationCard:hover {
    background: linear-gradient(180deg, #fffdf5 0%, #f0e2c6 100%);
    transform: translateY(-2px);
    box-shadow: 2px 3px 4px rgba(135, 95, 62, .6), inset 0 0 0 1px var(--cc-inner);
}
.CreateChar .VocationCard.is-selected {
    border-color: var(--cc-accent);
    background: linear-gradient(180deg, #fff6df 0%, #e9d2a4 100%);
    box-shadow:
        2px 3px 4px rgba(135, 95, 62, .6),
        inset 0 0 0 1px var(--cc-inner),
        inset 0 0 12px rgba(138, 90, 18, .28);
}
.CreateChar .VocationCard input:focus-visible ~ .VocationCard__art {
    outline: 2px solid var(--cc-accent);
    outline-offset: 3px;
}

.VocationCard__art {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 76px;
    margin-bottom: 5px;
}
.VocationCard__art img {
    max-width: 100%;
    transition: transform .15s ease, filter .15s ease;
    filter: drop-shadow(0 2px 2px rgba(90, 62, 30, .45));
}
.CreateChar .VocationCard.is-selected .VocationCard__art img {
    transform: scale(1.06);
    filter: drop-shadow(0 2px 4px rgba(138, 90, 18, .7));
}

.VocationCard__name {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding-top: 4px;
    border-top: 1px solid rgba(85, 99, 108, .28);
    width: 100%;
    box-sizing: border-box;
    font-size: 11px;
    font-weight: bold;
    color: var(--cc-text);
    line-height: 1.25;
}
.VocationCard__icon { width: 12px; height: 12px; object-fit: contain; }

.VocationCard__desc {
    margin-top: 3px;
    font-size: 10px;
    line-height: 1.35;
    color: #6b5330;
}

.VocationCard__check {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 16px;
    height: 16px;
    line-height: 15px;
    border: 1px solid #3a2d24;
    border-radius: 50%;
    background: linear-gradient(180deg, #6d5949 0%, #4f3f33 100%);
    color: #fff;
    font-size: 9px;
    font-weight: bold;
    opacity: 0;
    transform: scale(.7);
    transition: opacity .15s ease, transform .15s ease;
}
.CreateChar .VocationCard.is-selected .VocationCard__check {
    opacity: 1;
    transform: scale(1);
}

/* ---------- Botoes ---------- */
.CreateChar__actions {
    display: flex;
    justify-content: center;
    gap: 18px;
    margin-top: 14px;
}
.CreateChar__actions .BigButton { margin: 0; }

/* ---------- Responsivo ---------- */

@media (prefers-reduced-motion: reduce) {
    .CreateChar .VocationCard,
    .CreateChar .VocationCard__art img,
    .CreateChar .SexOption,
    .CreateChar .VocationCard__check { transition: none; }
    .CreateChar .VocationCard:hover { transform: none; }
    .CreateChar .CharNameField .InputIndicator.is-checking { animation: none; }
}

/* --------------------------------------------------------------------------
   Ajustes: altura uniforme dos cards + bloco de introducao
   -------------------------------------------------------------------------- */

/* Dentro de <td> o height:100% do card nao resolve sem altura definida na
   celula. O height:1px faz a porcentagem se referir a altura da linha, entao
   todos os cards esticam ate a altura do mais alto. */
.CreateChar .VocationCell {
    height: 1px;
}
/* Reserva 2 linhas para a descricao, para o card nao encolher quando o texto
   for curto (Sorcerer e Druid ficavam menores que Paladin e Knight). */
.VocationCard__desc {
    min-height: 27px;
}
.CreateChar .VocationCard__art {
    margin-top: auto;
}
.CreateChar .VocationCard__name {
    margin-top: auto;
}

/* ---------- Bloco de introducao ---------- */
.CreateChar__intro {
    margin-bottom: 14px;
    padding: 12px 14px;
    border: 1px solid #55636c;
    border-radius: 4px;
    background: linear-gradient(180deg, #fbf3e2 0%, #efe0c2 100%);
    box-shadow: 1px 1px 2px rgba(135, 95, 62, .5), inset 0 0 0 1px #faf0d7;
    color: #5a2800;
    font-size: 11px;
    line-height: 1.6;
}
.CreateChar__intro p { margin: 0; }

.CreateChar__dropcap {
    float: left;
    width: 19px;
    height: 18px;
    margin: 1px 1px 0 0;
}

.CreateChar__separator {
    display: block;
    max-width: 281px;
    width: 60%;
    height: auto;
    margin: 9px auto;
    opacity: .85;
}

.CreateChar__note {
    color: #6b5330;
}

.CreateChar__alert {
    margin-top: 10px !important;
    padding: 7px 9px;
    border: 1px solid #a02020;
    border-radius: 3px;
    background: #f7dcdc;
    color: #8a1c1c;
    font-weight: bold;
}

/* --------------------------------------------------------------------------
   Mobile: as boxes do tema sao tabelas, entao as celulas precisam virar blocos
   para empilhar. Nome e Sexo sao duas colunas da mesma tabela — no celular o
   cabecalho LabelH some e cada celula ganha seu proprio rotulo via data-label.
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {

    .CreateChar .TableContent,
    .CreateChar .TableContent > tbody,
    .CreateChar .TableContent > tbody > tr,
    .CreateChar .TableContent > tbody > tr > td {
        display: block;
        width: auto !important;
        box-sizing: border-box;
    }

    /* Cabecalho de duas colunas nao faz sentido empilhado */
    .CreateChar .CreateChar__nameSex > tbody > tr.LabelH {
        display: none;
    }

    /* Rotulo por celula, no mesmo visual da faixa LabelH */
    .CreateChar .TableContent > tbody > tr > td[data-label]::before {
        content: attr(data-label);
        display: block;
        margin: 0 -4px 7px -4px;
        padding: 4px 8px;
        background: #d5c0a1;
        border-bottom: 1px solid rgba(85, 99, 108, .45);
        font-weight: bold;
        font-size: 12px;
        color: #5a2800;
    }
    .CreateChar .TableContent > tbody > tr > td[data-label] + td[data-label] {
        margin-top: 10px;
    }

    /* Campo de nome ocupa a largura toda */
    .CreateChar .CharNameField,
    .CreateChar .CharNameMsg {
        max-width: none;
    }

    /* Sexo e cidade ocupam a largura toda */
    .CreateChar__segmented {
        display: flex;
        width: 100%;
        box-sizing: border-box;
    }
    .CreateChar .SexOption {
        flex: 1 1 0;
        min-width: 0;
    }

    /* Cards de vocacao empilhados, sem estourar a largura */
    .CreateChar .VocationCell {
        height: auto;
        padding: 5px 0;
    }
    .CreateChar .VocationCell + .VocationCell {
        padding-top: 0;
    }
    .CreateChar .VocationCard {
        height: auto;
        flex-direction: row;
        align-items: center;
        gap: 12px;
        text-align: left;
        padding: 8px 10px;
    }
    .CreateChar .VocationCard__art {
        flex: 0 0 64px;
        height: auto;
        margin: 0;
    }
    .CreateChar .VocationCard__name {
        justify-content: flex-start;
        border-top: 0;
        padding-top: 0;
        width: auto;
    }
    .CreateChar .VocationCard__desc {
        min-height: 0;
        margin-top: 2px;
    }
    .CreateChar .VocationCard__texto {
        flex: 1 1 auto;
        min-width: 0;
    }

    /* Botoes em coluna, largura total */
    .CreateChar__actions {
        flex-direction: column-reverse;
        align-items: center;
        gap: 10px;
    }
}

/* ==========================================================================
   Responsividade global (mobile)
   O tema ja tem o layout mobile em basic_part_2.css, mas o conteudo estourava
   a tela por tres motivos, medidos em 375px de largura:
     1. .main-site-container e grid; a coluna nao encolhe abaixo do conteudo,
        entao ficava com 736px dentro de um container de 375px
     2. .main-content e display:table, que cresce ate o conteudo e ignora o
        width:100%
     3. #ChangeLanguage e absoluto com right:-25px, saindo da tela
   Escopo restrito ao mesmo breakpoint do tema — desktop nao e afetado.
   ========================================================================== */
@media (max-width: 768.01px) {

    /* 1. deixa a coluna do grid encolher */
    .main-site-container {
        grid-template-columns: minmax(0, 1fr) !important;
    }
    .main-content,
    .main-header,
    .main-themboxes {
        min-width: 0 !important;
    }

    /* 2. tira o comportamento de tabela do container de conteudo */
    .main-content {
        display: block !important;
    }

    /* 3. traz o seletor de idioma para dentro da tela */
    #ChangeLanguage {
        right: 0 !important;
    }

    /* Conteudo largo rola dentro da propria box, em vez de empurrar a pagina */
    .Content .InnerTableContainer,
    .Content .BoxContent {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Imagens nunca ultrapassam a largura disponivel */
    .Content img {
        max-width: 100%;
        height: auto;
    }
}

/* --------------------------------------------------------------------------
   Box de Equipamentos (migrada do siteold)
   -------------------------------------------------------------------------- */
#characters .EquipGrid {
    border-spacing: 2px;
    margin: 0 auto;
}
#characters .EquipSlot {
    width: 42px;
    height: 42px;
    text-align: center;
    vertical-align: middle;
    background: #d4c0a1;
    border: 1px solid rgba(85, 99, 108, .45);
    box-shadow: inset 1px 1px 2px rgba(135, 95, 62, .45);
    cursor: help;
}
#characters .EquipSlot img {
    display: block;
    margin: 0 auto;
    transition: transform .15s ease;
}
#characters .EquipSlot:hover img {
    transform: scale(1.2);
}
#characters .EquipSlot--empty {
    cursor: default;
}
#characters .EquipSlot--empty img {
    opacity: .45;
}
#characters .EquipSlot--empty:hover img {
    transform: none;
}

#characters .EquipInfo {
    text-align: center;
    vertical-align: middle;
    padding: 3px 5px;
    background: #d4c0a1;
    border: 1px solid rgba(85, 99, 108, .45);
    line-height: 1.25;
}
#characters .EquipInfo__label {
    display: block;
    font-size: 10px;
    font-weight: bold;
    color: #6b4a1e;
}
#characters .EquipInfo__value {
    display: block;
    font-size: 12px;
    font-weight: bold;
    color: #4a2f10;
}
#characters .EquipInfo--boss .EquipInfo__label,
#characters .EquipInfo--boss .EquipInfo__value {
    color: #8a2be2;
}

/* ==========================================================================
   Pagina de personagem — refino visual
   Escopo: #characters (envolve as boxes da pagina, nao afeta o resto do site)
   ========================================================================== */

#characters {
    --ch-gold: #b8860b;
    --ch-gold-soft: rgba(184, 134, 11, .35);
    --ch-ink: #4a2f10;
    --ch-label: #6b4a1e;
}

/* ---------- Boxes ---------- */
#characters .TableContainer {
    margin-bottom: 12px;
}
#characters .TableContent {
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}

/* ---------- Titulo das secoes ---------- */
#characters .CaptionInnerContainer .Text {
    letter-spacing: .6px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .45);
}

/* ---------- Linhas de informacao ---------- */
#characters .TableContent tr {
    transition: background-color .14s ease;
}
#characters .TableContent tr:hover td {
    background-color: rgba(184, 134, 11, .14);
}
#characters .LabelV175 {
    color: var(--ch-label);
    font-weight: bold;
    white-space: nowrap;
    border-right: 1px solid rgba(184, 134, 11, .18);
}
#characters .LabelV175 + td {
    color: var(--ch-ink);
    font-weight: bold;
}

/* ---------- Character Quests em duas colunas ---------- */
#characters .CharacterQuestGrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid #faf0d7;
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}
#characters .CharacterQuestItem {
    display: flex;
    align-items: center;
    min-width: 0;
    min-height: 21px;
    box-sizing: border-box;
    background-color: #f1e0c6;
    color: var(--ch-label);
    font-weight: bold;
}
#characters .CharacterQuestItem:nth-child(4n + 3),
#characters .CharacterQuestItem:nth-child(4n + 4) {
    background-color: #d4c0a1;
}
#characters .CharacterQuestItem:nth-child(odd) {
    border-right: 1px solid #faf0d7;
}
#characters .CharacterQuestItem:nth-child(n + 3) {
    border-top: 1px solid #faf0d7;
}
#characters .CharacterQuestItem:hover {
    background-color: #e4c888;
}
#characters .CharacterQuestName {
    flex: 1 1 auto;
    min-width: 0;
    padding: 2px 7px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#characters .CharacterQuestState {
    display: flex;
    flex: 0 0 34px;
    align-self: stretch;
    align-items: center;
    justify-content: center;
    border-left: 1px solid rgba(184, 134, 11, .22);
}
#characters .CharacterQuestState img {
    display: block;
}

/* ---------- Sprites ---------- */
#characters img[src*="animoutfit"],
#characters img[src*="outfit"] {
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35));
}
#characters .TableContent img[src*="/items/"],
#characters .TableInventory img {
    transition: transform .15s ease;
}
#characters .TableContent img[src*="/items/"]:hover,
#characters .TableInventory img:hover {
    transform: scale(1.25);
}

/* --------------------------------------------------------------------------
   Barra de progresso no titulo da box (estilo Kaldrox):
   "Character Quests  [=========]  73% (40/55)" — tudo na mesma linha.
   O character-polish.js remonta o conteudo do .Text nesses tres pedacos.
   -------------------------------------------------------------------------- */
#characters .CaptionInnerContainer .Text.ChHasBar {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    padding-right: 26px; /* espaco para o botao +/- no canto */
}
#characters .ChTitle {
    flex: 0 0 auto;
    white-space: nowrap;
}
#characters .ChProgress {
    position: relative;
    flex: 1 1 auto;
    min-width: 90px;
    height: 13px;
    margin: 0 10px;
    overflow: hidden;
    box-sizing: border-box;
    border: 1px solid #151718;
    border-radius: 2px;
    background: linear-gradient(180deg, #777a7b 0%, #555859 48%, #36393a 100%);
    box-shadow:
        0 0 0 1px rgba(171, 127, 45, .58),
        inset 0 1px 0 rgba(255, 255, 255, .28),
        inset 0 -1px 0 rgba(0, 0, 0, .72);
}
#characters .ChProgress::before,
#characters .ChProgress::after {
    display: none;
}
#characters .ChProgress__meter {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    border-radius: inherit;
    background: linear-gradient(180deg, #777a7b 0%, #5d6061 38%, #484b4c 58%, #373a3b 100%);
    box-shadow: inset 0 1px rgba(255, 255, 255, .3), inset 0 -1px rgba(20, 22, 23, .72);
}
#characters .ChProgress__fill {
    display: block;
    height: 100%;
    border-radius: 1px 0 0 1px;
    background: linear-gradient(180deg, #a9e79d 0%, #60bd5e 30%, #2f8a37 66%, #1d5f27 100%);
    box-shadow:
        inset 0 1px rgba(235, 255, 224, .58),
        inset 0 -1px rgba(17, 69, 25, .72),
        1px 0 0 rgba(12, 48, 18, .7);
    animation: ChProgressGrow .55s cubic-bezier(.16, 1, .3, 1);
}
#characters .ChProgress__fill[style*="width: 100%"] {
    border-radius: 1px;
}
#characters .ChProgress.is-complete .ChProgress__fill {
    background: linear-gradient(180deg, #fff2a8 0%, #e2b843 38%, #a96a18 100%);
    box-shadow: inset 0 1px rgba(255, 255, 226, .72), 0 0 5px rgba(230, 180, 58, .72);
}
@keyframes ChProgressGrow { from { width: 0; } }
#characters .ChProgress__pct {
    flex: 0 0 auto;
    white-space: nowrap;
    font-weight: bold;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .72);
}

/* ---------- Links e status ---------- */
#characters a {
    transition: color .14s ease, text-shadow .14s ease;
}
#characters a:hover {
    text-shadow: 0 0 5px rgba(184, 134, 11, .5);
}
#characters img[src*="on.gif"] {
    filter: drop-shadow(0 0 4px rgba(70, 200, 70, .9));
}

@media (max-width: 700px) {
    #characters .CharacterQuestGrid {
        grid-template-columns: 1fr;
    }
    #characters .CharacterQuestItem,
    #characters .CharacterQuestItem:nth-child(4n + 3),
    #characters .CharacterQuestItem:nth-child(4n + 4) {
        background-color: #f1e0c6;
        border-right: 0;
    }
    #characters .CharacterQuestItem:nth-child(even) {
        background-color: #d4c0a1;
    }
    #characters .CharacterQuestItem:nth-child(n + 2) {
        border-top: 1px solid #faf0d7;
    }
    #characters .CaptionInnerContainer .Text.ChHasBar {
        gap: 6px;
        font-size: 11px;
    }
    #characters .ChProgress {
        min-width: 80px;
        margin-right: 10px;
        margin-left: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #characters .TableContent tr,
    #characters .TableInventory img,
    #characters a {
        transition: none;
    }
    #characters .ChProgress__fill {
        animation: none;
    }
}

/* O CaptionContainer/InnerContainer do tema tem largura 0 (as bordas sao spans
   absolutos). Sem largura a barra nao cresce, entao damos largura apenas nas
   boxes que receberam barra — marcadas pelo character-polish.js. */
#characters .CaptionContainer.ChBarHost,
#characters .CaptionInnerContainer.ChBarHost {
    width: 100%;
    box-sizing: border-box;
}

/* Em telas pequenas o titulo e o "(40/55)" comem a largura da barra. */
@media (max-width: 700px) {
    #characters .ChProgress__detail {
        display: none;
    }
    #characters .ChTitle {
        flex: 0 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    #characters .ChProgress {
        min-width: 80px;
    }
}

/* ==========================================================================
   CONTADOR REGRESSIVO DA HOME
   --------------------------------------------------------------------------
   Referencias medidas (nao chutar):
     - painel .............. 500 x 190 px
     - arte da moldura ..... 500 x 153 px  (background-coutdown.png)
       => tudo abaixo de y=153 aparece FORA da moldura
     - faixa interna limpa . ate y=136 (abaixo disso comeca a borda ornamentada)
     - digitos ............. y 58..121
     - data ................ y 122..135
     - botao ............... y 137..174 (apoiado sobre a borda)

   >>> PARA AJUSTAR O BRILHO, MEXA SO NAS 4 VARIAVEIS ABAIXO <<<
   ========================================================================== */

.CountdownPanel {
    /* -------- controles do brilho -------- */
    --cd-halo: .40;          /* forca do halo dourado central   (0 a 1)     */
    --cd-halo-min: .70;      /* opacidade no ponto fraco do pulso (0 a 1)   */
    --cd-reflexo: .26;       /* forca do reflexo que desliza    (0 a 1)     */
    --cd-velocidade: 4s;     /* duracao do pulso                            */

    /* Recuos do halo dentro do painel (menor = halo maior daquele lado).
       Limites medidos no PNG:
         y  4..39  = faixa vermelha do titulo (opaca)
         y 40..142 = area cinza interna
         x  6      = borda esquerda | x 491..494 = borda direita
       Ou seja: topo abaixo de 40 comeca a iluminar a faixa do titulo. */
    --cd-topo: 30px;         /* menor = halo sobe mais                     */
    --cd-direita: 47px;      /* maior = halo estreita pela direita          */
    --cd-base: 44px;         /* minimo seguro: 190 - 153 + folga            */
    --cd-esquerda: 47px;     /* maior = halo estreita pela esquerda         */

    /* -------- limites da moldura (nao mexer sem remedir o PNG) -------- */
    --cd-arte: 153px;        /* altura da arte dentro do painel de 190px    */

    position: absolute;
    overflow: hidden;        /* impede o brilho de escapar do painel        */
    border-radius: 12px;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .55));
}

/* ---------- Halo dourado pulsante ----------
   O recuo de 44px na base = 190 (painel) - 153 (arte) + 7 de folga.
   Se aumentar o halo, mantenha esse recuo ou ele vaza para fora da moldura. */
.CountdownPanel::before {
    content: "";
    position: absolute;
    inset: var(--cd-topo) var(--cd-direita) var(--cd-base) var(--cd-esquerda);
    border-radius: 14px;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(ellipse at center,
        rgba(255, 205, 100, var(--cd-halo)) 0%,
        rgba(255, 195, 80, calc(var(--cd-halo) * .4)) 45%,
        rgba(255, 200, 90, 0) 72%);
    animation: CountdownGlow var(--cd-velocidade) ease-in-out infinite;
}
@keyframes CountdownGlow {
    0%, 100% { opacity: var(--cd-halo-min); }
    50%      { opacity: 1; }
}

/* ---------- Reflexo que atravessa a moldura ----------
   Comeca em y=44 e tem 101px de altura, terminando em 145: dentro da arte. */
.CountdownPanel::after {
    content: "";
    position: absolute;
    top: 44px;
    height: 101px;
    left: -60%;
    width: 38%;
    z-index: 3;
    pointer-events: none;
    transform: skewX(-18deg);
    background: linear-gradient(100deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 245, 210, var(--cd-reflexo)) 50%,
        rgba(255, 255, 255, 0) 100%);
    animation: CountdownShine 6s ease-in-out infinite;
}
/* Bordas da moldura medidas no PNG: esquerda em x=6, direita em x=491-494,
   e 495-499 e transparente. O reflexo tem 38% (190px) de largura, entao para
   nunca tocar a borda direita ele para em left:58% (banda 290..480) e se apaga
   nas pontas, em vez de varrer ate 120% como antes. */
/* A faixa tem 38% (190px). Para NUNCA tocar as bordas (esq x=6, dir x=491),
   o percurso vai de left:1.4% (banda 7..197) ate left:60% (banda 300..490),
   com fade nas pontas — antes ela entrava em left:-40%, cobrindo a borda
   esquerda e a margem transparente justamente quando acendia. */
@keyframes CountdownShine {
    0%, 62% { left: 1.4%; opacity: 0; }
    72%     { opacity: .85; }
    88%     { opacity: .85; }
    100%    { left: 60%; opacity: 0; }
}

/* ---------- Titulo ---------- */
.CountdownPanel__title {
    z-index: 2;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .8));
}

/* ---------- Digitos ---------- */
.CountdownPanel .flip-clock-wrapper ul li a div div.inn {
    background: linear-gradient(180deg, #3a3a3a 0%, #1e1e1e 100%);
    color: #ffe9a8;
    text-shadow: 0 0 8px rgba(255, 190, 70, .55), 0 2px 3px rgba(0, 0, 0, .9);
}
.CountdownPanel .flip-clock-wrapper ul {
    border-radius: 7px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(255, 200, 90, .28);
}

/* ---------- Rotulos (Days / Hours / ...) ---------- */
.CountdownPanel .flip-clock-divider .flip-clock-label {
    color: #ffd97a;
    font: bold 12px Verdana, Arial, sans-serif;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .9);
}

/* Separadores entre os grupos */
.CountdownPanel .flip-clock-divider:not(.days)::after {
    content: "";
    position: absolute;
    top: 34px;
    left: 50%;
    width: 4px;
    height: 4px;
    margin-left: -2px;
    border-radius: 50%;
    background: rgba(255, 217, 122, .75);
    box-shadow: 0 14px 0 rgba(255, 217, 122, .75);
}

/* ---------- Data do lancamento ---------- */
.CountdownPanel__date {
    position: absolute;
    top: 122px;
    left: 0;
    right: 0;
    z-index: 2;
    text-align: center;
    font: bold 11px Verdana, Arial, sans-serif;
    letter-spacing: .8px;
    color: #ffd97a;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .95);
    pointer-events: none;
}

/* ---------- Botao Create Account ----------
   O wrapper tem left:33% inline, que deixa o centro 10px a esquerda; o
   margin-left compensa. O top o apoia sobre a borda inferior da moldura. */
.CountdownPanel > div[style*="top: 68%"] {
    top: 137px !important;
}
.CountdownPanel .MediumButtonForm {
    margin-left: 10px;
    transition: transform .18s ease, filter .18s ease;
}
.CountdownPanel .MediumButtonForm:hover {
    transform: translateY(-2px);
    filter: drop-shadow(0 4px 8px rgba(255, 200, 90, .45));
}

/* ---------- Responsivo ---------- */
@media (max-width: 768.01px) {
    /* o painel tem transform inline, por isso o !important */
    .CountdownPanel {
        transform: translate(-50%, -118%) scale(.66) !important;
        transform-origin: center center;
    }
}
@media (max-width: 420px) {
    .CountdownPanel {
        transform: translate(-50%, -125%) scale(.52) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .CountdownPanel::before { animation: none; opacity: 1; }
    .CountdownPanel::after  { animation: none; opacity: 0; }
    .CountdownPanel .MediumButtonForm { transition: none; }
    .CountdownPanel .MediumButtonForm:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   Tooltip global (HelperDiv)
   O ornamento do rodape tem 220px de largura, mas a area util do balao e de
   205px (225 - 20 de padding). Por ser maior que o espaco, ele escapava pela
   direita — o <center> nao consegue centralizar o que nao cabe.
   -------------------------------------------------------------------------- */
#HelperDivContainer .Ornament {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 2px auto 0;
    opacity: .85;
}

/* Cantos e profundidade, mantendo o pergaminho e a borda do tema. */
#HelperDivContainer {
    /* Raio menor: a seta encosta na borda esquerda logo abaixo da quina
       (top:10px, definido no generic.js), entao um arredondamento suave nao
       deixa folga entre ela e o balao. */
    border-radius: 7px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .45), 0 2px 4px rgba(0, 0, 0, .3);
}

#HelperDivHeadline {
    padding-bottom: 5px;
    margin-bottom: 6px;
    border-bottom: 1px solid rgba(90, 40, 0, .22);
}

/* A seta encosta na borda; sem isto o arredondamento a corta. */
#HelperDivContainer .HelperDivArrow {
    z-index: 2;
}

/* --------------------------------------------------------------------------
   Consentimento de cookies
   Completa a estrutura ja prevista pelo tema e usa a arte do SuperOT sem
   distorcer a proporcao original.
   -------------------------------------------------------------------------- */
#cookiedialogbox.CookieConsentWindow,
#cookiedetailsbox.CookieConsentWindow {
    position: fixed;
    left: 30px;
    bottom: 30px;
    width: 625px;
    max-width: calc(100vw - 60px);
    z-index: 1100;
    filter: drop-shadow(0 7px 7px rgba(0, 0, 0, .58));
}

#cookiedetailsbox.CookieConsentWindow {
    z-index: 1101;
}

#cookiedialogbox .CookieHeaderText::before {
    content: none;
}

.CookieConsentFrame {
    position: relative;
    isolation: isolate;
    overflow: visible;
    border: 1px solid #0d0b09;
    outline: 1px solid #cfb994;
    background: #f1e0c6 url('../images/global/content/scroll.gif') repeat;
    box-shadow: inset 0 0 0 2px #665246, 0 2px 6px rgba(0, 0, 0, .52);
}

.CookieMagicProgress {
    position: absolute;
    right: 4px;
    bottom: 4px;
    left: 4px;
    z-index: 20;
    height: 5px;
    overflow: hidden;
    border: 1px solid #24180f;
    background: #201c24;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .78), 0 0 4px rgba(54, 180, 255, .42);
    opacity: 0;
    pointer-events: none;
}

.CookieMagicProgress span {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #2d6eb7 0%, #35d8ff 48%, #f6d362 82%, #fff3b0 100%);
    box-shadow: 0 0 7px #54dcff, 0 0 3px #fff1a1;
    transform: scaleX(0);
    transform-origin: left center;
}

.CookieConsentWindow--charging .CookieMagicProgress {
    opacity: 1;
}

.CookieConsentWindow--charging .CookieMagicProgress span {
    animation: CookieMagicCharge 420ms cubic-bezier(.16, 1, .3, 1) forwards;
}

.CookieConsentWindow--magic-busy .CookieConsentButton {
    cursor: wait;
    filter: saturate(.72);
    pointer-events: none;
}

.CookieConsentFrame::before,
.CookieConsentFrame::after {
    position: absolute;
    z-index: 18;
    content: '';
    opacity: 0;
    pointer-events: none;
}

.CookieConsentFrame::before {
    inset: -5px;
    background: radial-gradient(circle at center, rgba(255, 244, 166, .92) 0%, rgba(53, 205, 255, .62) 24%, rgba(53, 111, 255, .2) 52%, transparent 72%);
}

.CookieConsentFrame::after {
    top: 50%;
    left: 50%;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #fff4a5;
    box-shadow: -210px -55px #50d7ff, -148px 42px #ffe16b, -76px -74px #8eecff, 82px 66px #ffd45c, 150px -62px #5ddfff, 218px 30px #fff0a0, -238px 18px #ffd45c, 238px -18px #62ddff;
}

.CookieConsentWindow--vanishing .CookieConsentFrame {
    will-change: transform, opacity, filter;
    animation: CookieMagicVanish 280ms cubic-bezier(.55, 0, 1, .45) forwards;
}

.CookieConsentWindow--vanishing .CookieConsentFrame::before {
    animation: CookieMagicFlash 280ms ease-out forwards;
}

.CookieConsentWindow--vanishing .CookieConsentFrame::after {
    animation: CookieMagicSparks 280ms ease-out forwards;
}

.CookieConsentWindow--appearing .CookieConsentFrame {
    animation: CookieMagicReveal 260ms cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes CookieMagicCharge {
    0% { transform: scaleX(0); filter: brightness(.9); }
    72% { transform: scaleX(.82); filter: brightness(1.15); }
    100% { transform: scaleX(1); filter: brightness(1.35); }
}

@keyframes CookieMagicVanish {
    0% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0) brightness(1); }
    45% { opacity: .96; transform: translateY(-2px) scale(1.015); filter: blur(0) brightness(1.55); }
    100% { opacity: 0; transform: translateY(-9px) scale(.92); filter: blur(5px) brightness(1.8) saturate(1.35); }
}

@keyframes CookieMagicFlash {
    0% { opacity: 0; transform: scale(.72); }
    38% { opacity: .92; }
    100% { opacity: 0; transform: scale(1.18); }
}

@keyframes CookieMagicSparks {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(.45) rotate(0); }
    30% { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.45) rotate(28deg); }
}

@keyframes CookieMagicReveal {
    0% { opacity: 0; transform: translateY(5px) scale(.96); filter: blur(3px) brightness(1.45); }
    100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0) brightness(1); }
}

.CookieConsentHeader {
    position: relative;
    z-index: 1;
    min-height: 28px;
    box-sizing: border-box;
    padding: 5px 12px 6px;
    border-top: 1px solid #9c897b;
    border-bottom: 1px solid #211914;
    background: #5f4d41;
    color: #fff;
    font: bold 13px Verdana, Arial, sans-serif;
    text-align: center;
    text-shadow: 1px 1px 0 #1c1511;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 -1px 0 rgba(0, 0, 0, .38);
}

#cookiedialogbox .CookieConsentHeader {
    padding-left: 190px;
}

.CookieConsentBody {
    position: relative;
    min-height: 165px;
    background: rgba(255, 249, 232, .18);
    box-shadow: inset 0 0 0 2px rgba(104, 79, 57, .25);
}

#cookiedialogbox .CookieConsentVisual {
    position: absolute;
    z-index: 3;
    left: -27px;
    bottom: -2px;
    width: 235px;
    height: 197px;
    overflow: visible;
    pointer-events: none;
    filter: drop-shadow(2px 2px 1px rgba(30, 18, 11, .72));
}

#cookiedialogbox #cookiedialogimage {
    position: static;
    display: block;
    float: none;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: left bottom;
}

#cookiedialogbox #cookiedialogcontent {
    display: flex;
    flex-direction: column;
    min-height: 165px;
    max-width: none;
    margin: 0 0 0 190px;
    padding: 14px 18px 12px;
    box-sizing: border-box;
    color: #5a2800;
    font: 11px/1.35 Verdana, Arial, sans-serif;
    text-align: left;
}

#cookiedialogcontent p,
.CookieDetailsContent p {
    margin: 0 0 10px;
}

.CookieConsentActions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 14px;
}

#cookiedialogbox .CookieConsentActions {
    margin-top: auto;
}

#cookiedialogbox .CookieConsentActions--primary {
    gap: 6px;
}

#cookiedialogbox .CookieConsentActions--primary .CookieConsentButton {
    width: 128px;
    min-width: 128px;
    padding-right: 4px;
    padding-left: 4px;
    background-size: 128px 31px;
    font-size: 11px;
}

.CookieConsentButton {
    position: relative;
    width: 142px;
    min-width: 142px;
    height: 34px;
    padding: 0 8px 2px;
    border: 0;
    background: transparent url('../images/global/buttons/button.png') center / 142px 34px no-repeat;
    color: #ffd18c;
    cursor: pointer;
    font: 12px Verdana, Arial, sans-serif;
    text-align: center;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    transition: filter 160ms ease-out, transform 160ms ease-out;
}

.CookieConsentButton:hover {
    background-image: url('../images/global/buttons/button_hover.png');
    filter: brightness(1.08);
}

.CookieConsentButton--accept {
    background-image: url('../images/global/buttons/button_green.png');
}

.CookieConsentButton--accept:hover {
    background-image: url('../images/global/buttons/button_green_hover.png');
}

.CookieConsentButton:active {
    transform: translateY(1px);
    filter: brightness(.94);
}

.CookieConsentButton:focus-visible {
    outline: 2px solid #ffdc73;
    outline-offset: 2px;
}

.CookieDetailsContent {
    padding: 14px 16px 15px;
    color: #5a2800;
    font: 11px/1.35 Verdana, Arial, sans-serif;
    background: rgba(255, 249, 232, .16);
    box-shadow: inset 0 0 0 2px rgba(104, 79, 57, .25);
}

.CookiePreferenceRow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 43px;
    box-sizing: border-box;
    padding: 8px 9px;
    border-top: 1px solid rgba(90, 40, 0, .24);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32);
}

.CookiePreferenceRow strong,
.CookiePreferenceRow small {
    display: block;
}

.CookiePreferenceRow strong {
    margin-bottom: 2px;
    font-size: 11px;
}

.CookiePreferenceRow small {
    color: #704522;
    font-size: 10px;
}

#cookiedetailsbox .switch {
    flex: 0 0 auto;
    width: 42px;
    height: 22px;
}

#cookiedetailsbox .slider {
    box-sizing: border-box;
    border: 1px solid #3c2b21;
    background: #827064;
    box-shadow: inset 0 2px 3px rgba(0, 0, 0, .42), 0 1px 0 rgba(255, 255, 255, .62);
}

#cookiedetailsbox .slider::before {
    bottom: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border: 1px solid #79613e;
    background: #f4dfaf;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .55), inset 0 1px 0 #fff8df;
}

#cookiedetailsbox input:checked + .slider {
    background: #3d7a24;
}

#cookiedetailsbox input:checked + .slider::before {
    transform: translateX(19px);
}

#cookiedetailsbox input:checked:disabled + .slider {
    background: #527f35;
    opacity: .82;
}

#cookiedetailsbox input:focus-visible + .slider {
    outline: 2px solid #e8b943;
    outline-offset: 2px;
}

.CookieConsentActions--details {
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
}

@media (max-width: 680px) {
    #cookiedialogbox.CookieConsentWindow,
    #cookiedetailsbox.CookieConsentWindow {
        left: 10px;
        bottom: 10px;
        width: calc(100vw - 20px);
        max-width: none;
    }

    .CookieConsentHeader {
        padding-left: 12px;
    }

    #cookiedialogbox .CookieConsentHeader {
        padding-left: 150px;
    }

    #cookiedialogbox .CookieConsentVisual {
        left: -15px;
        bottom: -1px;
        width: 180px;
        height: 151px;
    }

    #cookiedialogbox #cookiedialogcontent {
        margin-left: 145px;
        padding-right: 12px;
        padding-left: 12px;
    }

    .CookieConsentActions--details {
        flex-wrap: wrap;
    }
}

@media (max-width: 500px) {
    #cookiedialogbox .CookieConsentHeader {
        padding-left: 12px;
    }

    .CookieConsentBody {
        padding-top: 112px;
    }

    #cookiedialogbox .CookieConsentVisual {
        top: -12px;
        right: auto;
        bottom: auto;
        left: 50%;
        width: 150px;
        height: 126px;
        transform: translateX(-50%);
    }

    #cookiedialogbox #cookiedialogimage {
        object-position: center bottom;
    }

    #cookiedialogbox #cookiedialogcontent {
        margin-left: 0;
        padding: 11px 12px 12px;
    }

    .CookieConsentActions {
        flex-wrap: wrap;
        justify-content: center;
        gap: 5px;
        margin-top: 10px;
    }

    .CookieConsentActions--details .CookieConsentButton {
        width: 134px;
        min-width: 134px;
        background-size: 134px 32px;
    }

    .CookieConsentButton {
        min-height: 44px;
    }

    .CookiePreferenceRow {
        gap: 10px;
        padding-right: 4px;
        padding-left: 4px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .CookieConsentButton {
        transition: none;
    }

    .CookieConsentButton:active {
        transform: none;
    }

    .CookieConsentWindow--charging .CookieMagicProgress span {
        animation: CookieMagicCharge 80ms linear forwards;
    }

    .CookieConsentWindow--vanishing .CookieConsentFrame {
        animation: CookieMagicReducedVanish 100ms linear forwards;
    }

    .CookieConsentWindow--vanishing .CookieConsentFrame::before,
    .CookieConsentWindow--vanishing .CookieConsentFrame::after {
        display: none;
    }

    .CookieConsentWindow--appearing .CookieConsentFrame {
        animation: CookieMagicReducedReveal 120ms linear both;
    }
}

@media (max-width: 768.01px) {
    #index_login,
    #index_login .TableContentContainer,
    #index_login .TableContentAndRightShadow {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    #index_login .TableContent {
        width: 100% !important;
        table-layout: fixed;
    }

    #index_login .TableContent td {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    #index_login input[type="text"],
    #index_login input[type="password"] {
        max-width: 100%;
        box-sizing: border-box;
    }
}

@keyframes CookieMagicReducedVanish {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes CookieMagicReducedReveal {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ========================================================================== */
/* Cadastro de conta                                                          */
/* ========================================================================== */

.CreateAccountIntro {
    position: relative;
    margin: 0 0 14px;
    padding: 13px 16px 13px 54px;
    border: 1px solid #55636c;
    border-radius: 4px;
    background: linear-gradient(180deg, #fff8e9 0%, #ead8b8 100%);
    box-shadow: inset 0 0 0 1px #faf0d7, 1px 1px 2px rgba(72, 52, 35, .38);
    color: #5a2800;
    font-size: 11px;
    line-height: 1.55;
}

.CreateAccountIntro::before {
    content: "✓";
    position: absolute;
    top: 15px;
    left: 15px;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border: 1px solid #315f2c;
    border-radius: 50%;
    background: linear-gradient(#66a84f, #39742f);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35);
    color: #fff;
    font: bold 16px/1 Verdana, Arial, sans-serif;
    text-shadow: 0 1px #244c20;
}

.CreateAccountIntro p { margin: 4px 0 0; }
.CreateAccountIntro__title {
    color: #4a2100;
    font: bold 14px Georgia, "Times New Roman", serif;
}
.CreateAccountIntro__security { color: #553819; }
.CreateAccountIntro__note {
    color: #6b5330;
    font-style: italic;
}

.CreateAccount__frame { margin-top: 0; }
.CreateAccount__body {
    padding: 11px;
    border-right: 2px solid #5f4d41;
    border-bottom: 2px solid #5f4d41;
    border-left: 2px solid #5f4d41;
    background: #d4c0a1;
    box-shadow: inset 0 0 0 1px #f1e0c6;
}

.CreateAccount__section {
    overflow: hidden;
    margin: 0 0 10px;
    border: 1px solid #875f3e;
    border-radius: 4px;
    background: linear-gradient(180deg, #f6e8cf 0%, #e7d3b1 100%);
    box-shadow: inset 0 0 0 1px #fff3dc, 1px 1px 2px rgba(74, 47, 25, .25);
}

.CreateAccount__section:last-child { margin-bottom: 0; }

.CreateAccount__sectionTitle {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 38px;
    padding: 6px 12px;
    border-bottom: 1px solid #41352d;
    background: linear-gradient(180deg, #716052 0%, #4e4035 100%);
    color: #fff5d9;
    text-shadow: 0 1px 1px #211a15;
}

.CreateAccount__sectionTitle > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.CreateAccount__sectionTitle strong {
    font: bold 13px Georgia, "Times New Roman", serif;
    letter-spacing: .2px;
}

.CreateAccount__sectionTitle small {
    color: #e7d9bf;
    font: 10px Verdana, Arial, sans-serif;
    text-shadow: none;
}

.CreateAccount__step {
    display: grid;
    place-items: center;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    border: 1px solid #d8b661;
    border-radius: 50%;
    background: #2b221c;
    color: #ffd77e;
    font: bold 12px Verdana, Arial, sans-serif;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
}

.CreateAccount__fields,
.CreateAccount__characterTop {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 18px;
    padding: 14px;
}

.CreateAccount__field {
    min-width: 0;
}

.CreateAccount__field > label,
.CreateAccount__label,
.CreateAccount__subheading {
    display: block;
    margin: 0 0 5px;
    color: #5a2800;
    font: bold 11px Verdana, Arial, sans-serif;
}

.CreateAccount__control {
    position: relative;
    display: flex;
    align-items: center;
    gap: 7px;
}

.CreateAccount__control input,
.CreateAccount__control select {
    width: 100%;
    min-width: 0;
    height: 31px;
    box-sizing: border-box;
    margin: 0;
    padding: 6px 31px 6px 8px;
    border: 1px solid #55636c;
    border-radius: 3px;
    background: #fffaf0;
    color: #4e2b12;
    font: 12px Verdana, Arial, sans-serif;
    box-shadow: inset 1px 1px 2px rgba(135, 95, 62, .25);
    transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}

.CreateAccount__control select { padding-right: 8px; }
.CreateAccount__control input::placeholder { color: #9a8a73; }

.CreateAccount__control input:focus,
.CreateAccount__control select:focus {
    border-color: #8a5a12;
    outline: none;
    background: #fffdf7;
    box-shadow: inset 1px 1px 2px rgba(135, 95, 62, .25), 0 0 0 2px rgba(190, 137, 43, .25);
}

.CreateAccount__indicator,
.CreateAccount__flag,
.CreateAccount__characterIndicator {
    position: absolute;
    right: 8px;
    z-index: 1;
    width: 12px;
    height: 12px;
    object-fit: contain;
}

.CreateAccount__characterIndicator { background-position: center; }

.CreateAccount .FormFieldError {
    display: block;
    min-height: 13px;
    margin-top: 4px;
    color: #9c2020;
    font-size: 10px;
    font-weight: bold;
    line-height: 1.3;
}

.CreateAccount .FormFieldError.is-ok { color: #286522; }
.CreateAccount .FormFieldError.is-nok { color: #9c2020; }
.CreateAccount .FormFieldError.is-checking { color: #765b38; }

.CreateAccount__indicator.is-checking { opacity: .35; }

.CreateAccount #character_error {
    display: block;
    min-height: 13px;
}

.CreateAccount .CreateChar__suggest {
    display: table;
    width: max-content;
    margin-top: 7px;
}

.CreateAccount__vocations,
.CreateAccount__towns {
    padding: 0 14px 14px;
}

.CreateAccount__vocationGrid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
}

.CreateAccount .VocationCard { min-height: 156px; }
.CreateAccount .VocationCard__texto {
    display: flex;
    flex: 1;
    flex-direction: column;
    width: 100%;
}

.CreateAccount__confirmation .CreateAccount__sectionTitle { border-bottom-color: #41352d; }

.CreateAccount__confirmBody {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 14px 14px;
}

.CreateAccount__rules {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: min(100%, 430px);
    box-sizing: border-box;
    margin: 0;
    padding: 9px 12px;
    border: 1px solid #b59a75;
    border-radius: 3px;
    background: rgba(255, 250, 240, .48);
    color: #4e2b12;
    font: 11px/1.45 Verdana, Arial, sans-serif;
    cursor: pointer;
}

.CreateAccount__rules input {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: #39742f;
}

.CreateAccount__rules a { font-weight: bold; }

.CreateAccount__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 54px;
    margin-top: 14px;
}

.CreateAccount__actions .BigButton { margin: 0; }
.CreateAccount__actions input:disabled { cursor: wait; filter: grayscale(.35); }
/* Aviso de "criando conta". Antes era texto #fff4cf de 10px sobre o fundo
   creme -- invisivel, e a pagina parecia travada. Agora e uma pilula com
   spinner, que so aparece enquanto o envio esta em andamento. */
.CreateAccount__submitStatus {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: fit-content;
    max-width: 100%;
    box-sizing: border-box;
    margin: 12px auto 0;
    padding: 9px 18px 9px 14px;
    color: #fff6e2;
    font-size: 13px;
    font-weight: bold;
    line-height: 1.3;
    text-align: center;
    background: #5a3d5c;
    border: 1px solid #3a2640;
    border-radius: 20px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}

.CreateAccount__submitStatus.is-active { display: flex; }

.CreateAccount__submitStatus.is-active::before {
    content: "";
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    box-sizing: border-box;
    border: 2px solid rgba(255, 246, 226, .3);
    border-top-color: #f0c419;
    border-radius: 50%;
    animation: superotGiro .8s linear infinite;
}

@keyframes superotGiro { to { transform: rotate(360deg); } }

/* sem movimento: o spinner para, e a mensagem que avanca de etapa
   continua mostrando que a pagina esta viva */
@media (prefers-reduced-motion: reduce) {
    .CreateAccount__submitStatus.is-active::before {
        animation: none;
        border-color: #f0c419;
    }
}

/* Verificação embutida nos formulários de conta e personagem */
.InlineCaptcha {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: min(100%, 430px);
    box-sizing: border-box;
    margin: 10px auto 0;
    padding: 12px;
    border: 1px solid #9d825f;
    border-radius: 4px;
    background: rgba(255, 250, 240, .58);
    color: #5a2800;
    text-align: center;
    transition: border-color .18s ease, background-color .18s ease;
}

.InlineCaptcha--character {
    margin: 10px auto 0;
    border-color: #55636c;
    background: linear-gradient(180deg, #f6e8cf 0%, #e7d3b1 100%);
    box-shadow: inset 0 0 0 1px #fff3dc, 1px 1px 2px rgba(74, 47, 25, .25);
}

.InlineCaptcha--login {
    margin: 12px auto 4px;
    transform: translateX(74px);
    border-color: #aa8c63;
    background: rgba(255, 248, 232, .7);
}

.InlineCaptcha--login:focus {
    outline: 2px solid #8b6b35;
    outline-offset: 2px;
}

@media (max-width: 600px) {
    .InlineCaptcha--login { transform: none; }
}

.InlineCaptcha__copy {
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: 100%;
    min-width: 0;
    font: 10px/1.4 Verdana, Arial, sans-serif;
}

.InlineCaptcha__copy strong {
    color: #4a2100;
    font-size: 11px;
}

.InlineCaptcha__copy span { color: #6b5330; }

.InlineCaptcha__widget {
    display: flex;
    justify-content: center;
    width: 304px;
    max-width: 100%;
    min-height: 78px;
}

.InlineCaptcha__message {
    width: 100%;
    min-height: 13px;
    color: #6b5330;
    font: bold 10px/1.3 Verdana, Arial, sans-serif;
    text-align: center;
}

.InlineCaptcha.is-error {
    border-color: #a02020;
    background-color: #f6dddd;
}

.InlineCaptcha.is-error .InlineCaptcha__message { color: #8f1919; }

.InlineCaptcha.is-complete {
    border-color: #39742f;
    background-color: #e4f0dc;
}

.InlineCaptcha.is-complete .InlineCaptcha__message { color: #286522; }

/* Modal do reCAPTCHA */
#ReCaptchaPositionContainer {
    position: fixed;
    inset: 0;
    z-index: 10020;
    width: auto;
    height: auto;
    pointer-events: none;
}

#ReCaptchaContainer {
    position: absolute;
    top: 50%;
    left: 50%;
    display: none;
    width: 370px;
    height: auto;
    box-sizing: border-box;
    margin: 0;
    padding: 14px 16px 12px;
    transform: translate(-50%, -50%);
    border: 2px solid #55636c;
    border-radius: 5px;
    background: #ead8b8 url('../images/global/content/scroll.gif') repeat;
    box-shadow: 0 4px 8px rgba(0, 0, 0, .55), inset 0 0 0 1px #fff0d1;
    color: #5a2800;
    pointer-events: auto;
}

#ReCaptchaContainer.is-visible { display: block; }

.ReCaptchaDialog__header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: -14px -16px 14px;
    padding: 10px 42px 10px 12px;
    border-bottom: 1px solid #33271e;
    background: linear-gradient(180deg, #716052, #4e4035);
    color: #fff4cf;
}

.ReCaptchaDialog__header > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ReCaptchaDialog__header strong {
    font: bold 13px Georgia, "Times New Roman", serif;
    text-shadow: 0 1px #211a15;
}

#ReCaptchaStatus {
    color: #e8d8bd;
    font: 10px/1.35 Verdana, Arial, sans-serif;
}

.ReCaptchaDialog__shield {
    display: grid;
    place-items: center;
    flex: 0 0 25px;
    width: 25px;
    height: 25px;
    border: 1px solid #d8b661;
    border-radius: 50%;
    background: #315f2c;
    color: #fff;
    font-weight: bold;
}

#ReCaptcha {
    position: static;
    display: flex;
    justify-content: center;
    width: auto;
    height: auto;
    margin: 0;
}

.ReCaptchaDialog__help {
    margin: 10px 0 0;
    color: #6b5330;
    font: italic 10px/1.4 Verdana, Arial, sans-serif;
    text-align: center;
}

#LightBoxCloseContainer {
    position: absolute;
    top: -11px;
    right: -11px;
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

#LightBoxCloseContainer:focus-visible {
    outline: 2px solid #ffd77e;
    outline-offset: 2px;
}

/* Confirmação do cadastro */
.CreateAccountSuccess {
    padding: 24px 26px;
    border: 2px solid #55636c;
    border-radius: 5px;
    background: linear-gradient(180deg, #fff8e9 0%, #ead8b8 100%);
    box-shadow: inset 0 0 0 1px #fff3dc, 2px 2px 3px rgba(72, 52, 35, .4);
    color: #5a2800;
    text-align: center;
}

.CreateAccountSuccess__crest {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin: 0 auto 10px;
    border: 2px solid #315f2c;
    border-radius: 50%;
    background: linear-gradient(#6bae55, #39742f);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .3), 0 2px 3px rgba(42, 70, 34, .35);
    color: #fff;
    font: bold 28px/1 Verdana, Arial, sans-serif;
    text-shadow: 0 1px #244c20;
}

.CreateAccountSuccess__eyebrow {
    color: #7c5d2a;
    font-size: 9px;
    font-weight: bold;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.CreateAccountSuccess h2 {
    margin: 4px 0 8px;
    color: #4b2200;
    font: bold 21px Georgia, "Times New Roman", serif;
}

.CreateAccountSuccess__lead {
    max-width: 560px;
    margin: 0 auto 15px;
    font: 11px/1.55 Verdana, Arial, sans-serif;
}

.CreateAccountSuccess__summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 560px;
    margin: 0 auto 13px;
    border: 1px solid #875f3e;
    background: rgba(255, 250, 240, .6);
}

.CreateAccountSuccess__summary > div {
    padding: 10px 12px;
}

.CreateAccountSuccess__summary > div:only-child { grid-column: 1 / -1; }

.CreateAccountSuccess__summary > div + div { border-left: 1px solid #bda27d; }
.CreateAccountSuccess__summary span,
.CreateAccountSuccess__summary strong { display: block; }
.CreateAccountSuccess__summary span {
    margin-bottom: 3px;
    color: #765b38;
    font-size: 9px;
    text-transform: uppercase;
}
.CreateAccountSuccess__summary strong { font-size: 12px; }

.CreateAccountSuccess__warning {
    max-width: 540px;
    margin: 0 auto;
    padding: 8px 10px;
    border: 1px solid #ad812d;
    background: #fff0bf;
    font: 10px/1.4 Verdana, Arial, sans-serif;
}

.CreateAccountSuccess__actions {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-top: 17px;
}

.CreateAccountSuccess__actions .BigButton { margin: 0; }

@media (max-width: 760px) {
    .CreateAccount__fields,
    .CreateAccount__characterTop { grid-template-columns: 1fr; }
    .CreateAccount__vocationGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 500px) {
    .CreateAccountIntro { padding-left: 14px; }
    .CreateAccountIntro::before { display: none; }
    .CreateAccount__body { padding: 7px; }
    .CreateAccount__fields,
    .CreateAccount__characterTop { padding: 11px; }
    .CreateAccount__sectionTitle { padding-right: 8px; padding-left: 8px; }
    .CreateAccount__sectionTitle small { display: none; }
    .CreateAccount__vocationGrid { grid-template-columns: 1fr; }
    .CreateAccount .VocationCard {
        flex-direction: row;
        min-height: 96px;
        text-align: left;
    }
    .CreateAccount .VocationCard__art {
        flex: 0 0 82px;
        height: 72px;
        margin: 0 10px 0 0;
    }
    .CreateAccount .VocationCard__name { justify-content: flex-start; }
    .CreateAccount .VocationCard__desc { min-height: 0; }
    .CreateChar__segmented { display: flex; width: 100%; box-sizing: border-box; }
    .CreateChar .SexOption { flex: 1; min-width: 0; }
    #ReCaptchaContainer { width: calc(100vw - 24px); padding-right: 10px; padding-left: 10px; }
    .ReCaptchaDialog__header { margin-right: -10px; margin-left: -10px; }
    #ReCaptcha { overflow-x: auto; justify-content: flex-start; }
    .CreateAccountSuccess { padding: 20px 12px; }
    .CreateAccountSuccess__summary { grid-template-columns: 1fr; }
    .CreateAccountSuccess__summary > div + div { border-top: 1px solid #bda27d; border-left: 0; }
    .CreateAccountSuccess__actions { flex-direction: column; align-items: center; }

    .InlineCaptcha {
        justify-content: center;
        padding-right: 7px;
        padding-left: 7px;
    }
    .CreateAccount__confirmBody { padding-right: 8px; padding-left: 8px; }
    .CreateAccount__rules { align-items: flex-start; justify-content: flex-start; }
    .InlineCaptcha__copy { text-align: center; }
    .InlineCaptcha__widget {
        max-width: 100%;
        overflow-x: auto;
    }
    .InlineCaptcha__message { text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
    .CreateAccount__control input,
    .CreateAccount__control select,
    .InlineCaptcha { transition: none; }
}


/* =========================================================================
   ==== correcoes de layout no celular (setembro/2026) ====
   -------------------------------------------------------------------------
   1) O bloco mobile mais acima da folha da overflow-x:auto no .BoxContent.
      Isso faz dele um contexto de formatacao proprio, e um bloco desses se
      afasta de floats anteriores em vez de passar por baixo. O link de
      "players online" da .InfoBar e float:right e nunca foi limpo, entao a
      coluna de conteudo perdia 112px de largura em TODAS as paginas. Com o
      clear ela volta a ocupar a tela inteira.
   2) A altura minima de 367px vem do desenho de desktop e deixava um vazio
      enorme embaixo das caixas curtas (era o caso do ?characters).
   3) Grades legadas montadas com <table> nao encolhem abaixo da largura do
      proprio conteudo, entao estouravam a tela e ficavam cortadas. A classe
      .sot-colunas empilha as celulas, uma por linha.
   ========================================================================= */
@media (max-width: 768.01px) {
    .Content .Box .BoxContent {
        clear: both;
        min-height: 0;
    }

    .Content .BoxContent table.sot-colunas,
    .Content .BoxContent table.sot-colunas > tbody,
    .Content .BoxContent table.sot-colunas > tbody > tr {
        display: block;
        width: 100%;
    }

    .Content .BoxContent table.sot-colunas > tbody > tr > td {
        display: block;
        width: 100% !important;
        max-width: 100%;
        box-sizing: border-box;
    }

    .Content .BoxContent table.sot-colunas img {
        max-width: 100%;
        height: auto;
    }

    /* Busca do ?characters: o rotulo (137px) e o botao (159px) consumiam a
       linha inteira e sobravam 31px para o campo, que virava inutilizavel.
       Empilhado, o campo ocupa a largura toda. O desktop nao muda. */
    #characters .BoxContent td.LabelV150,
    #characters .BoxContent td.GreedyCell,
    #characters .BoxContent td.GreedyCell + td {
        display: block;
        width: auto;
    }

    #characters .BoxContent td.LabelV150 { padding-bottom: 4px; }

    #characters .BoxContent td.GreedyCell input {
        width: 100%;
        box-sizing: border-box;
    }

    #characters .BoxContent td.GreedyCell + td > div {
        display: flex;
        justify-content: center;
        margin-top: 8px;
        margin-left: 0 !important;
    }
}

/* -------------------------------------------------------------------------
   Grade de icones da wiki (?subtopic=systems).
   Era uma <table> de 5 colunas com o icone e o rotulo em <tr> separados, o
   que impedia qualquer quebra de linha no celular. Agora e um grid de cards:
   5 colunas no desktop, 3 no tablet e 2 no celular.
   ------------------------------------------------------------------------- */
.wiki-grade {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px 4px;
    padding: 8px 4px;
}

.wiki-grade__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 6px 3px;
    font-size: 10pt;
    line-height: 1.25;
    text-align: center;
    border-radius: 4px;
}

.wiki-grade__item:hover {
    background-color: rgba(90, 40, 0, .07);
}

.wiki-grade__arte {
    display: flex;
    /* altura fixa e icones apoiados na base: assim os rotulos de todos os
       cards ficam na mesma linha, mesmo com artes de 32px a 73px */
    align-items: flex-end;
    justify-content: center;
    height: 76px;
}

.wiki-grade__arte img {
    max-width: 100%;
    height: auto;
}

@media (max-width: 768.01px) {
    .wiki-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
    .wiki-grade {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px 6px;
    }
}