/*
 * Herdeiro dos Deuses — identidade 2026
 * Camada visual isolada: não altera IDs, formulários, endpoints ou regras do jogo.
 */

*,
*:before,
*:after {
  box-sizing: border-box;
}

html,
body {
  background-color: #080305 !important;
  background-image:
    radial-gradient(circle at 50% 340px, rgba(175, 27, 20, .24), transparent 46%),
    linear-gradient(180deg, rgba(7, 2, 3, .08) 0, #100507 820px, #070305 100%) !important;
  color: #eadfd4;
  font-family: Georgia, "Times New Roman", serif;
  scroll-behavior: smooth;
}

body {
  padding-top: 86px;
  overflow-x: hidden;
}

body:before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -5;
  background:
    linear-gradient(90deg, rgba(2, 1, 2, .88), rgba(14, 4, 6, .18) 48%, rgba(2, 1, 2, .45)),
    linear-gradient(180deg, rgba(3, 1, 2, .14), rgba(8, 3, 5, .84) 780px),
    url("/ClientRes/Images/LokyTheme/top-fon.jpg") center top / auto 917px no-repeat,
    #080305;
  pointer-events: none;
}

::selection {
  background: #b8281f;
  color: #fff7dc;
}

a,
button,
input,
select {
  -webkit-tap-highlight-color: transparent;
}

a:focus,
button:focus,
input:focus,
select:focus {
  outline: 2px solid #f6bd4b;
  outline-offset: 3px;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.site {
  background:
    radial-gradient(circle at 22% 480px, rgba(218, 64, 28, .10), transparent 26%),
    radial-gradient(circle at 78% 640px, rgba(136, 11, 31, .12), transparent 30%);
}

/* Navegação */
.topbar {
  height: 86px;
  padding: 0 max(24px, calc((100% - 1240px) / 2));
  background: linear-gradient(180deg, rgba(14, 6, 8, .97), rgba(7, 3, 5, .94));
  border-bottom: 1px solid rgba(235, 157, 54, .30);
  box-shadow: 0 12px 42px rgba(0, 0, 0, .58), inset 0 -1px rgba(255, 215, 120, .06);
  backdrop-filter: blur(14px);
}

.topbar:after {
  height: 2px;
  background: linear-gradient(90deg, transparent 2%, #6f1415 24%, #f0a835 50%, #6f1415 76%, transparent 98%);
  box-shadow: 0 0 18px rgba(239, 141, 37, .40);
}

.brand {
  width: 205px;
  height: 82px;
  justify-content: flex-start;
}

.brand img {
  width: 190px;
  height: 78px;
  object-fit: contain;
  transform: none;
  filter: drop-shadow(0 7px 12px rgba(0, 0, 0, .86)) drop-shadow(0 0 8px rgba(223, 82, 22, .32));
}

.brand:hover img {
  transform: translateY(-2px) scale(1.02);
  filter: drop-shadow(0 9px 16px rgba(0, 0, 0, .9)) drop-shadow(0 0 13px rgba(245, 157, 42, .48));
}

.nav button,
.nav a {
  min-height: 86px;
  padding: 0 17px;
  color: #f2e5d3;
  font-size: 13px;
  letter-spacing: .08em;
}

.nav button:after,
.nav a:after {
  background: linear-gradient(90deg, #8c1818, #f3b445, #8c1818);
}

.nav button:hover,
.nav a:hover {
  color: #ffd881;
  background: rgba(107, 22, 18, .16);
}

.nav .gold,
.nav .download-link {
  min-width: 152px;
  min-height: 50px;
  border: 1px solid #edae3d;
  background: linear-gradient(180deg, #ad2a1e, #701010 56%, #33070a);
  color: #fff5d5;
  box-shadow: 0 10px 28px rgba(122, 13, 13, .42), inset 0 1px rgba(255, 225, 145, .28);
}

/* Hero */
.hero {
  width: 1240px !important;
  max-width: 96% !important;
  min-height: 1060px;
  padding: 650px 0 52px;
}

.hero:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 720px;
  height: 580px;
  background: radial-gradient(ellipse at 46% 48%, rgba(232, 51, 23, .20), rgba(236, 146, 36, .06) 38%, transparent 70%);
  filter: blur(4px);
  pointer-events: none;
}

.logo-wrap {
  top: 22px;
  left: -24px;
  width: 700px;
  height: 400px;
}

.logo-wrap:before {
  width: 650px;
  height: 330px;
  top: 38px;
  left: 8px;
  background: radial-gradient(ellipse, rgba(215, 37, 23, .24), rgba(236, 136, 33, .09) 42%, transparent 72%);
  filter: blur(9px);
}

.logo-wrap:after {
  width: 330px;
  height: 330px;
  top: 28px;
  left: 164px;
  border-color: rgba(255, 187, 71, .18);
  box-shadow: 0 0 32px rgba(199, 42, 20, .28), inset 0 0 28px rgba(255, 168, 47, .10);
}

.logo-wrap img {
  width: 690px;
  height: 388px;
  object-fit: contain;
  filter: drop-shadow(0 22px 32px rgba(0, 0, 0, .82)) drop-shadow(0 0 16px rgba(214, 55, 20, .32));
}

.hero-logo-sparks {
  top: 8px;
  left: -8px;
  width: 720px;
  height: 465px;
}

.hero-logo-sparks i {
  background: #ffd77b;
  box-shadow: 0 0 8px #ff8d32, 0 0 20px rgba(206, 31, 18, .78);
}

.hero-copy {
  position: absolute;
  top: 408px;
  left: 44px;
  z-index: 6;
  width: 570px;
  padding-left: 21px;
  border-left: 2px solid #d89937;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .96);
}

.hero-kicker,
.section-kicker {
  display: block;
  margin-bottom: 10px;
  color: #f4bd58;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .24em;
  text-transform: uppercase;
}

.hero-copy p {
  max-width: 540px;
  color: #f5e9da;
  font-size: 18px;
  line-height: 1.65;
}

.hero-status {
  margin-top: 15px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: #fff3ce;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.hero-status i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #70d98a;
  box-shadow: 0 0 0 4px rgba(112, 217, 138, .12), 0 0 14px #70d98a;
  animation: status-pulse 2s ease-in-out infinite;
}

.hero-status small {
  padding-left: 10px;
  border-left: 1px solid rgba(255, 255, 255, .24);
  color: #c9bcb0;
  font-size: 10px;
}

.hero-ctas {
  margin-top: 20px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.hero-primary,
.hero-secondary,
.world-actions a {
  min-height: 48px;
  padding: 0 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #d89b36;
  color: #fff5d6;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  transition: transform .2s ease, filter .2s ease, border-color .2s ease;
}

.hero-primary {
  background: linear-gradient(180deg, #bc3022, #721014 58%, #36070b);
  box-shadow: 0 12px 30px rgba(117, 11, 12, .48), inset 0 1px rgba(255, 226, 153, .25);
  cursor: pointer;
}

.hero-secondary {
  background: rgba(12, 5, 7, .72);
}

.hero-primary:hover,
.hero-secondary:hover,
.world-actions a:hover {
  transform: translateY(-2px);
  border-color: #ffd277;
  filter: brightness(1.12);
}

.hero-grid .panel {
  width: 390px;
  min-height: 365px;
}

@media (min-width: 1101px) {
  .hero {
    min-height: 800px;
    padding: 0 0 52px;
  }

  .hero-grid {
    width: 390px;
    position: absolute;
    top: 178px;
    right: 34px;
    z-index: 8;
  }
}

.panel,
.modal-card {
  border-color: rgba(226, 157, 54, .34);
  background: linear-gradient(180deg, rgba(27, 10, 12, .96), rgba(9, 4, 6, .97));
  box-shadow: 0 28px 72px rgba(0, 0, 0, .70), inset 0 1px rgba(255, 223, 143, .04);
}

.panel:before {
  border-color: rgba(255, 193, 85, .10);
}

.hero-grid .panel:hover {
  border-color: rgba(247, 185, 73, .62);
  box-shadow: 0 34px 78px rgba(0, 0, 0, .75), 0 0 34px rgba(162, 31, 20, .18);
}

.panel-hd,
.modal-head {
  background: linear-gradient(90deg, rgba(139, 23, 21, .90), rgba(49, 10, 13, .94));
  border-bottom-color: rgba(239, 175, 67, .34);
  color: #ffe1a0;
}

.field,
select.field,
.panel-select {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  display: block;
  border-color: #4f2926;
  background: #14090b;
  color: #fff1df;
}

.login-card {
  display: grid;
  gap: 12px;
}

.remember {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #c5b3a5;
  font: 12px Arial, Helvetica, sans-serif;
}

.login-card .btn.block {
  width: 100%;
  min-height: 46px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.small-links {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.small-links button,
.small-links a {
  padding: 4px 0;
  border: 0;
  background: transparent;
  font: 12px Arial, Helvetica, sans-serif;
  cursor: pointer;
}

.field:focus,
select.field:focus {
  border-color: #e3a241;
  box-shadow: 0 0 0 2px rgba(225, 145, 45, .14), inset 0 1px 5px rgba(0, 0, 0, .42);
}

.field::placeholder {
  color: #a99587;
}

.btn {
  border-color: #e4a23c;
  background: linear-gradient(180deg, #bd3324, #761116 58%, #37070b);
  color: #fff6dc;
  box-shadow: 0 10px 25px rgba(123, 13, 14, .38), inset 0 1px rgba(255, 226, 150, .25);
}

.small-links a,
.small-links button,
.user-line b,
.msg {
  color: #f5bd59;
}

.user-line {
  background: rgba(255, 255, 255, .02);
  border-bottom-color: rgba(241, 177, 67, .12);
  color: #d8c9bd;
}

.panel-actions button,
.panel-actions a {
  border-color: #51302c;
  background: #14090b;
  color: #f2c56f;
}

.panel-actions button:hover,
.panel-actions a:hover {
  border-color: #e5a33e;
  background: #2b0e11;
}

/* Conteúdo do portal */
.promo-stage.brasilmu-content {
  width: 100% !important;
  max-width: none !important;
  margin: 0;
  padding: 40px max(24px, calc((100% - 1240px) / 2)) 72px;
  background:
    radial-gradient(circle at 50% 0, rgba(141, 26, 20, .16), transparent 36%),
    linear-gradient(180deg, #100609, #080406 80%);
  border-top: 1px solid rgba(229, 160, 54, .24);
  border-bottom: 1px solid rgba(229, 160, 54, .18);
}

.r2-menu {
  border-color: rgba(222, 158, 57, .24);
  background: rgba(14, 6, 8, .78);
}

.r2-menu a,
.r2-menu button {
  color: #f4c568;
}

.r2-menu a:hover,
.r2-menu button:hover {
  color: #fff0c2;
}

.portal-body {
  max-width: 1240px;
  margin: 0 auto;
}

.portal-card {
  border-color: rgba(224, 158, 58, .22);
  background: linear-gradient(160deg, rgba(29, 13, 15, .96), rgba(10, 6, 8, .98));
  color: #dfd0c3;
  box-shadow: 0 25px 60px rgba(0, 0, 0, .44);
}

.portal-card:hover {
  background: linear-gradient(160deg, rgba(38, 15, 18, .98), rgba(12, 6, 8, .99));
  box-shadow: 0 30px 70px rgba(0, 0, 0, .54), 0 0 28px rgba(151, 28, 19, .12);
}

.portal-card-head,
.media-title {
  border-bottom-color: rgba(231, 168, 64, .20);
}

.portal-card-head:before,
.media-title:before {
  background: #3a1114;
}

.portal-card-head h2,
.media-title h2,
.portal-card-head button,
.portal-card-head a,
.media-title span,
.ranking-filter label,
.ranking-source,
.rank-value,
.portal-news-list em {
  color: #f2bd58;
}

.ranking-server-select {
  border-color: #5b3128;
  background: #160a0c;
  color: #f4e4d4;
}

.ranking-tab {
  border-color: #4e2a26;
  background: #16090b;
  color: #d7b787;
}

.ranking-tab.active,
.ranking-tab:hover {
  border-color: #d99a36;
  background: #4d1213;
  color: #ffe1a0;
}

.rank-row {
  border-bottom-color: rgba(233, 171, 70, .12);
  color: #d8cabf;
}

.rank-row:hover {
  background: rgba(130, 29, 21, .12);
}

.rank-heading {
  background: rgba(117, 25, 19, .18);
  color: #f0c87c;
}

.portal-news-list a {
  border-bottom-color: rgba(231, 170, 71, .12);
  color: #ddd0c4;
}

.portal-news-list a:hover {
  background: rgba(124, 29, 21, .12);
}

.portal-news-list b {
  color: #f4e3cf;
}

.portal-news-list small,
.rank-status,
.rank-name small {
  color: #a99384;
}

.portal-shortcuts .portal-shortcut {
  border-color: rgba(226, 158, 56, .30);
  background:
    linear-gradient(120deg, rgba(36, 11, 14, .94), rgba(98, 18, 17, .50)),
    url("/ClientRes/Images/LokyTheme/hero-bg.jpg") center / cover no-repeat;
}

.portal-shortcuts .portal-shortcut:hover {
  border-color: #e6a743;
  box-shadow: 0 16px 34px rgba(0, 0, 0, .38), 0 0 22px rgba(202, 58, 23, .18);
}

.season-banner {
  border-color: rgba(230, 165, 63, .30);
  background:
    linear-gradient(90deg, rgba(18, 5, 8, .96), rgba(54, 10, 13, .54), rgba(8, 3, 5, .18)),
    url("/ClientRes/Images/Slide/slide2.png") center / cover no-repeat;
  box-shadow: 0 28px 65px rgba(0, 0, 0, .50);
}

.season-copy span,
.season-copy h2 {
  color: #f3be5b;
}

.season-copy p {
  color: #eee1d5;
}

.season-copy button,
.season-copy .season-game-link {
  border-color: #e1a13c;
  background: linear-gradient(180deg, #b52d22, #6c0f14);
  color: #fff2cf;
}

.media-gallery {
  border-color: rgba(223, 158, 57, .20);
  background: rgba(19, 8, 11, .78);
}

.media-thumb {
  border-color: rgba(226, 161, 60, .24);
  background: #0b0507;
}

.media-thumb:hover {
  border-color: #e3a443;
  box-shadow: 0 0 24px rgba(205, 56, 22, .20);
}

.media-arrow {
  border-color: rgba(225, 160, 59, .30);
  background: rgba(40, 11, 14, .92);
  color: #ffd782;
}

.media-arrow:hover {
  background: #6f1718;
}

/* Sobre, transparência e confiança */
.world-section {
  width: 100%;
  padding: 92px max(24px, calc((100% - 1240px) / 2));
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 20%, rgba(176, 39, 22, .16), transparent 24%),
    radial-gradient(circle at 82% 72%, rgba(220, 136, 37, .08), transparent 25%),
    linear-gradient(180deg, #0a0406, #15070a 52%, #080305);
}

.world-section:before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(230, 166, 66, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(230, 166, 66, .035) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
  pointer-events: none;
}

.world-heading {
  max-width: 760px;
  margin: 0 auto 44px;
  position: relative;
  z-index: 1;
  text-align: center;
}

.world-heading h2 {
  margin-bottom: 16px;
  color: #ffe1a1;
  font-size: clamp(34px, 5vw, 58px);
  line-height: 1.08;
  text-transform: uppercase;
  text-shadow: 0 6px 24px rgba(0, 0, 0, .70), 0 0 24px rgba(194, 48, 20, .18);
}

.world-heading p {
  color: #cdbdb2;
  font-size: 17px;
  line-height: 1.75;
}

.world-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  position: relative;
  z-index: 1;
}

.world-card {
  min-height: 230px;
  padding: 30px;
  border: 1px solid rgba(225, 162, 62, .22);
  background: linear-gradient(145deg, rgba(36, 13, 16, .88), rgba(12, 6, 8, .92));
  box-shadow: 0 20px 50px rgba(0, 0, 0, .28);
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.world-card:hover {
  transform: translateY(-7px);
  border-color: rgba(239, 178, 74, .56);
  box-shadow: 0 28px 58px rgba(0, 0, 0, .38), 0 0 24px rgba(167, 33, 21, .15);
}

.world-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 22px;
  display: grid;
  place-items: center;
  border: 1px solid #c7842f;
  transform: rotate(45deg);
  background: #4d1113;
  color: #ffd578;
  font-size: 20px;
  box-shadow: 0 0 22px rgba(204, 48, 22, .24);
}

.world-icon::first-letter {
  transform: rotate(-45deg);
}

.world-card h3 {
  margin-bottom: 10px;
  color: #f5c66d;
  font-size: 20px;
  text-transform: uppercase;
}

.world-card p {
  color: #bfaea3;
  line-height: 1.65;
}

.trust-panel {
  margin-top: 22px;
  padding: 18px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  position: relative;
  z-index: 1;
  border: 1px solid rgba(224, 160, 60, .20);
  background: rgba(231, 167, 63, .10);
}

.trust-panel div {
  min-height: 92px;
  padding: 18px;
  background: rgba(11, 5, 7, .90);
}

.trust-panel b,
.trust-panel span {
  display: block;
}

.trust-panel b {
  margin-bottom: 7px;
  color: #f1bd5d;
  font-size: 14px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.trust-panel span {
  color: #a99588;
  font-size: 13px;
  line-height: 1.45;
}

.world-actions {
  margin-top: 26px;
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

.world-actions a {
  background: rgba(17, 7, 9, .86);
}

/* Rodapé */
.brasilmu-footer,
.site-footer {
  background:
    linear-gradient(90deg, rgba(17, 5, 8, .96), rgba(43, 10, 13, .88), rgba(15, 5, 7, .96)),
    url("/ClientRes/Images/LokyTheme/hero-bg.jpg") center / cover no-repeat;
  border-top-color: rgba(231, 168, 65, .26);
}

.footer-logo img {
  width: 180px;
  height: 95px;
  object-fit: contain;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .70));
}

.footer-logo span {
  color: #f5c96f;
}

.footer-note {
  color: #ad998c;
}

.footer-links button,
.footer-links a {
  border-color: #4f2926;
  background: #13080a;
  color: #e8bf71;
}

.footer-links button:hover,
.footer-links a:hover {
  border-color: #dda044;
  background: #321013;
  color: #fff0bd;
}

.footer-legal {
  max-width: 1240px;
  margin: 22px auto 0;
  padding-top: 18px;
  border-top: 1px solid rgba(226, 163, 64, .14);
  color: #8e7b70;
  font: 12px/1.6 Arial, Helvetica, sans-serif;
  text-align: center;
}

.footer-legal a {
  color: #d7aa5a;
}

/* Modais e avisos */
.modal {
  background: rgba(4, 1, 3, .88);
  backdrop-filter: blur(7px);
}

.modal-close {
  color: #ffd27b;
}

.wallet-box,
.pack,
.recharge-card,
.shop-card {
  border-color: #4f2b27;
  background: rgba(23, 9, 11, .90);
  color: #d9cabf;
}

.wallet-box b,
.pack b,
.recharge-card h3,
.shop-card h4 {
  color: #f1bd5b;
}

.pack.active,
.pack.promo {
  border-color: #e3a43f;
  background: linear-gradient(145deg, rgba(113, 27, 20, .42), rgba(41, 10, 13, .84));
}

.cookie-notice {
  position: fixed;
  right: 22px;
  bottom: 22px;
  left: 22px;
  z-index: 10050;
  max-width: 820px;
  margin: 0 auto;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border: 1px solid rgba(236, 174, 71, .54);
  background: rgba(16, 6, 8, .97);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .68), 0 0 26px rgba(160, 33, 22, .12);
  color: #d9cabe;
  font-family: Arial, Helvetica, sans-serif;
}

.cookie-notice.is-hidden {
  display: none;
}

.cookie-notice b {
  display: block;
  margin-bottom: 4px;
  color: #f3c66d;
}

.cookie-notice p {
  font-size: 13px;
  line-height: 1.5;
}

.cookie-notice a {
  color: #ffd98a;
  text-decoration: underline;
}

.cookie-notice button {
  min-width: 100px;
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid #e1a13d;
  background: linear-gradient(180deg, #a82820, #5d0e13);
  color: #fff2ce;
  font-weight: 800;
  cursor: pointer;
}

@keyframes status-pulse {
  0%, 100% { opacity: .72; transform: scale(.9); }
  50% { opacity: 1; transform: scale(1.12); }
}

@media (max-width: 1080px) {
  .nav button,
  .nav a {
    padding-right: 11px;
    padding-left: 11px;
    font-size: 11px;
  }

  .nav .gold,
  .nav .download-link {
    min-width: 132px;
  }

  .logo-wrap {
    left: -8px;
    width: 620px;
  }

  .logo-wrap img {
    width: 610px;
  }

  .hero-copy {
    left: 32px;
    width: 520px;
  }

  .hero-grid .panel {
    margin: 0 auto;
  }
}

@media (max-width: 900px) {
  body {
    padding-top: 0;
  }

  .topbar {
    position: relative;
    height: auto;
    padding: 10px 16px 14px;
    flex-wrap: wrap;
  }

  .brand {
    width: 100%;
    height: 78px;
    justify-content: center;
  }

  .brand img {
    width: 205px;
  }

  .nav {
    width: 100%;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .nav button,
  .nav a,
  .nav .gold,
  .nav .download-link {
    min-width: 0;
    min-height: 46px;
    margin: 0;
    padding: 0 8px;
    border: 0;
    background: transparent;
    box-shadow: none;
    font-size: 11px;
  }

  .nav .gold,
  .nav .download-link {
    border: 1px solid #b9782f;
    background: rgba(111, 20, 18, .45);
  }

  .hero {
    min-height: auto;
    padding-top: 620px;
  }

  .logo-wrap {
    top: 12px;
    left: 50%;
    width: min(660px, 96vw);
    height: 360px;
    transform: translateX(-50%);
    text-align: center;
  }

  .logo-wrap img {
    width: min(650px, 96vw);
    height: 350px;
  }

  .logo-wrap:before,
  .logo-wrap:after {
    left: 50%;
    transform: translateX(-50%);
  }

  .hero-logo-sparks {
    left: 50%;
    width: min(700px, 100vw);
    transform: translateX(-50%);
  }

  .hero-copy {
    top: 370px;
    right: 20px;
    left: 20px;
    width: auto;
    padding: 0;
    border: 0;
    text-align: center;
  }

  .hero-copy p {
    margin: 0 auto;
  }

  .hero-status,
  .hero-ctas {
    justify-content: center;
  }

  .hero-grid .panel {
    margin: 0 auto;
  }

  .world-grid {
    grid-template-columns: 1fr;
  }

  .trust-panel {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 620px) {
  .topbar {
    padding: 8px 10px 12px;
  }

  .brand {
    height: 70px;
  }

  .brand img {
    width: 180px;
    height: 68px;
  }

  .nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .nav button,
  .nav a,
  .nav .gold,
  .nav .download-link {
    min-height: 42px;
    font-size: 9px;
    letter-spacing: .04em;
  }

  .hero {
    max-width: calc(100% - 20px) !important;
    padding: 500px 0 28px;
  }

  .hero:before {
    width: 100%;
    height: 420px;
  }

  .logo-wrap {
    top: -10px;
    height: 280px;
  }

  .logo-wrap img {
    height: 275px;
  }

  .logo-wrap:before {
    width: 95vw;
    height: 250px;
    top: 10px;
  }

  .logo-wrap:after {
    width: 220px;
    height: 220px;
    top: 20px;
  }

  .hero-logo-sparks {
    height: 320px;
  }

  .hero-copy {
    top: 258px;
    right: 4px;
    left: 4px;
  }

  .hero-kicker {
    font-size: 10px;
    letter-spacing: .16em;
  }

  .hero-copy p {
    font-size: 15px;
    line-height: 1.55;
  }

  .hero-status {
    flex-wrap: wrap;
    font-size: 10px;
  }

  .hero-ctas {
    gap: 8px;
  }

  .hero-primary,
  .hero-secondary {
    min-height: 44px;
    padding: 0 13px;
    font-size: 10px;
  }

  .hero-grid .panel {
    width: 100%;
  }

  .rank-row.ranking-columns {
    min-width: 0;
    grid-template-columns: 34px minmax(0, 1fr) 88px;
    gap: 6px;
  }

  .rank-row.ranking-columns > :nth-child(3),
  .rank-row.ranking-columns > :nth-child(4) {
    display: none;
  }

  .rank-status {
    min-width: 0;
    white-space: normal;
  }

  .promo-stage.brasilmu-content,
  .world-section {
    padding-right: 12px;
    padding-left: 12px;
  }

  .world-section {
    padding-top: 62px;
    padding-bottom: 62px;
  }

  .world-heading h2 {
    font-size: 34px;
  }

  .world-heading p {
    font-size: 15px;
  }

  .world-card {
    min-height: 0;
    padding: 24px;
  }

  .trust-panel {
    grid-template-columns: 1fr;
  }

  .trust-panel div {
    min-height: 0;
  }

  .world-actions a {
    width: 100%;
  }

  .footer-logo img {
    width: 150px;
    height: 86px;
  }

  .cookie-notice {
    right: 10px;
    bottom: 10px;
    left: 10px;
    padding: 15px;
    display: block;
  }

  .cookie-notice button {
    width: 100%;
    margin-top: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html,
  body {
    scroll-behavior: auto;
  }

  .hero-status i,
  .logo-wrap img,
  .logo-wrap:before,
  .logo-wrap:after,
  .hero-logo-sparks i {
    animation: none !important;
  }
}

/* Portal da Dinastia — direção visual oriental 2026 */
.bg-video { opacity: .16; }

.bg-mask {
  background:
    linear-gradient(180deg, rgba(4, 1, 2, .10), rgba(8, 2, 4, .48) 720px, #080305 1050px),
    radial-gradient(circle at 52% 210px, rgba(197, 65, 24, .15), transparent 38%);
}

.site:before { display: none; }

.topbar {
  width: 100% !important;
  max-width: 1920px !important;
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 100;
  transform: translateX(-50%);
}

.topbar:before {
  content: "";
  position: absolute;
  right: 0;
  bottom: -14px;
  left: 0;
  height: 14px;
  background: linear-gradient(135deg, transparent 9px, rgba(205, 126, 35, .45) 10px, transparent 11px) 0 0 / 34px 14px repeat-x;
  opacity: .56;
  pointer-events: none;
}

.hero {
  width: 100% !important;
  max-width: 1920px !important;
  min-height: 920px;
  margin: 0 auto;
  padding: 0;
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(5, 2, 3, .24), rgba(4, 1, 2, .02) 62%, rgba(4, 1, 2, .14)),
    url("../Images/Oriental2026/hero-dragon-warlord.png") center top / cover no-repeat;
  border-bottom: 1px solid rgba(239, 173, 65, .30);
  box-shadow: inset 0 -90px 90px #0b0406;
}

.hero:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  width: auto;
  height: auto;
  background:
    linear-gradient(180deg, rgba(2, 1, 2, .08), transparent 44%, rgba(7, 2, 4, .42) 70%, #0c0406 100%),
    radial-gradient(ellipse at 33% 30%, rgba(4, 1, 2, .06), rgba(4, 1, 2, .70) 75%);
  filter: none;
  pointer-events: none;
}

.hero:after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  height: 110px;
  background:
    linear-gradient(180deg, transparent, #0b0406 84%),
    linear-gradient(90deg, transparent, rgba(234, 156, 53, .42), transparent) bottom / 100% 1px no-repeat;
  pointer-events: none;
}

.logo-wrap {
  top: 34px;
  left: max(28px, calc(50% - 610px));
  z-index: 5;
  width: 620px;
  height: 355px;
  transform: none;
}

.logo-wrap:before {
  top: 30px;
  left: -15px;
  width: 650px;
  height: 310px;
}

.logo-wrap:after {
  top: 24px;
  left: 152px;
}

.logo-wrap img {
  width: 620px;
  height: 350px;
  animation: oriental-logo-float 5.6s ease-in-out infinite;
  filter: drop-shadow(0 24px 32px rgba(0, 0, 0, .88)) drop-shadow(0 0 12px rgba(239, 112, 26, .32));
}

.hero-logo-sparks {
  top: 25px;
  left: max(28px, calc(50% - 610px));
  z-index: 4;
  width: 640px;
  height: 430px;
}

.hero-logo-sparks i { animation-duration: 3.8s; }

.hero-copy {
  top: 358px;
  left: max(50px, calc(50% - 565px));
  z-index: 6;
  width: 520px;
  padding: 18px 22px 18px 25px;
  border: 0;
  background:
    linear-gradient(90deg, rgba(11, 4, 6, .80), rgba(11, 4, 6, .36) 78%, transparent),
    linear-gradient(90deg, #d59435, transparent) left bottom / 72% 1px no-repeat;
  box-shadow: inset 3px 0 #d59435;
}

.hero-copy:before,
.hero-copy:after {
  content: "";
  position: absolute;
  left: -7px;
  width: 15px;
  height: 15px;
  transform: rotate(45deg);
  border: 1px solid #e4a448;
  background: #5c1012;
  box-shadow: 0 0 15px rgba(225, 93, 26, .46);
}

.hero-copy:before { top: -7px; }
.hero-copy:after { bottom: -7px; }

.hero-grid {
  width: 390px;
  position: absolute;
  top: 284px;
  right: max(30px, calc(50% - 610px));
  z-index: 8;
}

.hero-grid .panel {
  width: 390px;
  min-height: 358px;
  border: 1px solid rgba(235, 171, 66, .55);
  background: linear-gradient(180deg, rgba(55, 13, 14, .80), rgba(13, 5, 7, .96) 24%), rgba(10, 4, 6, .94);
  box-shadow: 0 28px 70px rgba(0, 0, 0, .72), 0 0 0 5px rgba(10, 4, 5, .62), 0 0 0 6px rgba(217, 147, 49, .18), inset 0 0 38px rgba(143, 25, 19, .12);
}

.hero-grid .panel:after,
.portal-card:after {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(250, 201, 103, .09);
  pointer-events: none;
}

.panel-hd {
  height: 64px;
  justify-items: center;
  padding: 0 54px;
  position: relative;
  background:
    linear-gradient(90deg, transparent, rgba(149, 35, 23, .74) 18%, rgba(96, 18, 18, .92) 50%, rgba(149, 35, 23, .74) 82%, transparent),
    linear-gradient(180deg, rgba(240, 179, 70, .11), transparent);
  color: #f8cf7c;
  font-size: 17px;
  text-align: center;
  text-shadow: 0 2px 8px #000;
}

.panel-hd:before,
.panel-hd:after {
  content: "◆";
  position: absolute;
  top: 21px;
  color: #d89b3b;
  font-size: 14px;
  text-shadow: 0 0 10px rgba(241, 174, 61, .56);
}

.panel-hd:before { left: 28px; }
.panel-hd:after { right: 28px; }

.dynasty-portals {
  position: absolute;
  right: max(30px, calc(50% - 610px));
  bottom: 70px;
  left: max(30px, calc(50% - 610px));
  z-index: 8;
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr 1fr;
  gap: 10px;
}

.dynasty-portal {
  min-width: 0;
  min-height: 92px;
  padding: 13px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(217, 153, 54, .46);
  background: linear-gradient(120deg, rgba(50, 13, 15, .96), rgba(11, 5, 7, .94)), #120709;
  color: #f1d9b3;
  box-shadow: 0 16px 35px rgba(0, 0, 0, .52), inset 0 1px rgba(255, 222, 149, .07);
  cursor: pointer;
  text-align: left;
  transition: transform .24s ease, border-color .24s ease, filter .24s ease;
}

.dynasty-portal:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: linear-gradient(#6f1515, #f0b34e, #6f1515);
  box-shadow: 0 0 14px rgba(238, 162, 53, .45);
}

.dynasty-portal:after {
  content: "";
  position: absolute;
  top: -80%;
  left: -35%;
  width: 32%;
  height: 260%;
  transform: rotate(21deg);
  background: linear-gradient(90deg, transparent, rgba(255, 220, 144, .13), transparent);
  transition: left .65s ease;
}

.dynasty-portal:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 202, 98, .86);
  filter: brightness(1.12);
}

.dynasty-portal:hover:after { left: 125%; }

.dynasty-portal.download {
  border-color: rgba(246, 187, 75, .78);
  background: linear-gradient(120deg, rgba(153, 38, 23, .94), rgba(70, 11, 14, .98)), #4d1012;
}

.dynasty-glyph {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  display: grid;
  place-items: center;
  transform: rotate(45deg);
  border: 1px solid #d89b3c;
  background: rgba(10, 4, 6, .58);
  color: #f7cd78;
  font: 25px Georgia, serif;
  box-shadow: inset 0 0 15px rgba(226, 104, 27, .18), 0 0 15px rgba(0, 0, 0, .46);
}

.dynasty-portal b,
.dynasty-portal small { display: block; }

.dynasty-portal b {
  margin-bottom: 5px;
  color: #ffd98b;
  font: 800 13px/1.2 Arial, Helvetica, sans-serif;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.dynasty-portal small {
  color: #a99587;
  font: 11px/1.35 Arial, Helvetica, sans-serif;
}

.promo-stage.brasilmu-content,
.portal-body {
  position: relative;
  isolation: isolate;
}

.promo-stage.brasilmu-content:before,
.portal-body:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(180deg, rgba(9, 3, 5, .78), rgba(9, 3, 5, .92)),
    url("../Images/Oriental2026/dragon-fortress-banner.png") 70% top / cover no-repeat;
  opacity: .56;
  pointer-events: none;
}

.portal-body { padding: 42px 0 26px; }
.promo-stage.brasilmu-content .portal-body { padding: 0; }
.promo-stage.brasilmu-content .portal-body:before { display: none; }

.r2-menu {
  height: 72px;
  margin-bottom: 28px;
  border: 1px solid rgba(224, 157, 55, .29);
  background: linear-gradient(90deg, transparent, rgba(70, 13, 15, .56), transparent);
}

.portal-columns {
  grid-template-columns: minmax(340px, .82fr) minmax(0, 1.28fr);
  gap: 18px;
}

.portal-card {
  position: relative;
  border: 1px solid rgba(225, 159, 57, .34);
  background: linear-gradient(145deg, rgba(34, 11, 14, .96), rgba(8, 4, 6, .98)), #120709;
  box-shadow: 0 28px 65px rgba(0, 0, 0, .56), inset 0 1px rgba(255, 222, 150, .05);
}

.portal-card-head h2,
.media-title h2,
.season-copy h2,
.world-heading h2 {
  font-family: Georgia, "Times New Roman", serif;
  letter-spacing: .08em;
}

.season-banner {
  min-height: 320px;
  background:
    linear-gradient(90deg, rgba(10, 3, 5, .96), rgba(13, 4, 6, .74) 48%, rgba(9, 3, 5, .12)),
    url("../Images/Oriental2026/dragon-fortress-banner.png") center / cover no-repeat;
}

.season-banner:before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(242, 187, 83, .17);
  pointer-events: none;
}

.world-section {
  background:
    radial-gradient(circle at 15% 20%, rgba(184, 43, 24, .18), transparent 24%),
    linear-gradient(180deg, rgba(8, 3, 5, .96), rgba(18, 5, 8, .93)),
    url("../Images/Oriental2026/dragon-fortress-banner.png") center / cover fixed;
}

.world-card { position: relative; overflow: hidden; }

.world-card:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 44px;
  height: 44px;
  border-top: 1px solid #d59538;
  border-right: 1px solid #d59538;
  opacity: .56;
}

@keyframes oriental-logo-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

@media (max-width: 1100px) and (min-width: 901px) {
  .logo-wrap,
  .hero-logo-sparks { left: 28px; }
  .hero-copy { left: 48px; }
  .hero-grid { right: 28px; }
  .dynasty-portals { right: 28px; left: 28px; }
}

@media (max-width: 900px) {
  .topbar { position: relative; left: 0; transform: none; }

  .hero {
    min-height: 1100px;
    padding: 0;
    background-position: 60% top;
    background-size: auto 780px;
  }

  .hero:before {
    background:
      linear-gradient(180deg, rgba(4, 1, 2, .20), rgba(6, 2, 3, .42) 38%, #0b0406 72%, #0b0406),
      radial-gradient(ellipse at 50% 22%, transparent, rgba(5, 1, 2, .55));
  }

  .logo-wrap {
    top: 4px;
    left: 50%;
    width: min(610px, 96vw);
    height: 330px;
    transform: translateX(-50%);
  }

  .logo-wrap img { width: min(610px, 96vw); height: 320px; }

  .hero-logo-sparks {
    top: 0;
    left: 50%;
    width: min(640px, 100vw);
    height: 355px;
    transform: translateX(-50%);
  }

  .hero-copy {
    top: 290px;
    right: 22px;
    left: 22px;
    width: auto;
    padding: 18px 20px;
    background: rgba(10, 3, 5, .74);
    box-shadow: inset 0 1px rgba(231, 164, 59, .34), inset 0 -1px rgba(231, 164, 59, .24);
    text-align: center;
  }

  .hero-copy:before,
  .hero-copy:after { display: none; }

  .hero-grid { top: 520px; right: 22px; left: 22px; width: auto; }
  .hero-grid .panel { width: min(430px, 100%); margin: 0 auto; }

  .dynasty-portals {
    right: 22px;
    bottom: 32px;
    left: 22px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .portal-columns { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .hero {
    min-height: 1125px;
    max-width: 100% !important;
    background-position: 62% top;
    background-size: auto 680px;
  }

  .logo-wrap { top: -4px; height: 275px; }
  .logo-wrap img { height: 270px; }
  .logo-wrap:before { width: 100vw; }
  .hero-logo-sparks { height: 300px; }
  .hero-copy { top: 250px; right: 12px; left: 12px; }
  .hero-grid { top: 495px; right: 12px; left: 12px; }
  .hero-grid .panel { min-height: 345px; }

  .dynasty-portals { right: 12px; bottom: 26px; left: 12px; gap: 8px; }

  .dynasty-portal { min-height: 86px; padding: 11px 10px; gap: 10px; }

  .dynasty-glyph {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
    font-size: 20px;
  }

  .dynasty-portal b { font-size: 10px; }
  .dynasty-portal small { font-size: 9px; }

  .portal-body { padding-right: 12px; padding-left: 12px; }

  .season-banner { min-height: 360px; background-position: 68% center; }
}

@media (prefers-reduced-motion: reduce) {
  .logo-wrap img,
  .dynasty-portal,
  .dynasty-portal:after {
    animation: none !important;
    transition: none !important;
  }
}

/* Templo Imperial — topo e acesso inspirados no portal clássico oriental */
body { padding-top: 94px; }

.topbar {
  height: 94px;
  padding: 0 max(20px, calc((100% - 1220px) / 2));
  display: block;
  overflow: visible;
  background:
    radial-gradient(ellipse at 50% 0, rgba(114, 30, 19, .24), transparent 48%),
    linear-gradient(180deg, rgba(17, 7, 7, .99), rgba(7, 3, 4, .98));
  border-bottom: 1px solid rgba(235, 162, 56, .46);
  box-shadow: 0 15px 42px rgba(0, 0, 0, .72), inset 0 -1px rgba(255, 218, 131, .10);
}

.topbar:before {
  bottom: -20px;
  height: 20px;
  opacity: .82;
  background:
    linear-gradient(135deg, transparent 10px, rgba(213, 135, 39, .52) 11px, transparent 12px) 0 0 / 38px 17px repeat-x,
    linear-gradient(180deg, rgba(8, 3, 4, .96), transparent) top / 100% 14px no-repeat;
}

.topbar:after {
  height: 2px;
  background: linear-gradient(90deg, transparent, #6f1715 17%, #d98a31 38%, #ffe09a 50%, #d98a31 62%, #6f1715 83%, transparent);
  box-shadow: 0 0 15px rgba(232, 141, 43, .42);
}

.topbar .brand {
  position: absolute;
  z-index: 4;
  top: -1px;
  left: 50%;
  width: 188px;
  height: 105px;
  transform: translateX(-50%);
  justify-content: center;
  pointer-events: auto;
}

.topbar .brand:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 2px;
  left: 50%;
  width: 230px;
  height: 94px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(122, 27, 18, .46), rgba(8, 3, 4, .96) 62%, transparent 64%);
  clip-path: polygon(13% 0, 87% 0, 100% 30%, 86% 100%, 14% 100%, 0 30%);
}

.topbar .brand img {
  width: 178px;
  height: 101px;
  filter: drop-shadow(0 9px 8px rgba(0, 0, 0, .92)) drop-shadow(0 0 9px rgba(232, 96, 26, .38));
}

.topbar .nav {
  width: min(1220px, 100%);
  height: 92px;
  margin: 0 auto;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 220px;
}

.nav-wing {
  width: calc(50% - 110px);
  height: 92px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-wing-left { justify-content: flex-end; }
.nav-wing-right { justify-content: flex-start; }

.topbar .nav button,
.topbar .nav a {
  min-width: 0;
  min-height: 92px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: #eee0ca;
  box-shadow: none;
  font-size: 12px;
  letter-spacing: .09em;
  white-space: nowrap;
  text-shadow: 0 2px 5px #000;
}

.topbar .nav .download-link {
  min-width: 0;
  min-height: 92px;
  border: 0;
  background: transparent;
  color: #f1c46f;
  box-shadow: none;
}

.topbar .nav button:hover,
.topbar .nav a:hover,
.topbar .nav .download-link:hover {
  color: #ffe2a1;
  background: radial-gradient(ellipse at center bottom, rgba(145, 32, 20, .34), transparent 65%);
}

.hero {
  min-height: 810px;
  background-position: center top;
  box-shadow: inset 0 -78px 76px #0b0406;
}

.logo-wrap {
  top: 30px;
  left: max(34px, calc(50% - 580px));
  width: 500px;
  height: 292px;
}

.logo-wrap:before {
  top: 17px;
  left: -18px;
  width: 530px;
  height: 270px;
}

.logo-wrap:after {
  top: 20px;
  left: 118px;
  width: 270px;
  height: 270px;
}

.logo-wrap img {
  width: 500px;
  height: 286px;
}

.hero-logo-sparks {
  top: 24px;
  left: max(34px, calc(50% - 580px));
  width: 520px;
  height: 330px;
}

.hero-copy {
  top: 316px;
  left: max(47px, calc(50% - 560px));
  width: 500px;
  padding: 21px 24px 22px 28px;
  overflow: visible;
  background:
    linear-gradient(100deg, rgba(15, 5, 6, .91), rgba(15, 5, 6, .57) 76%, transparent),
    linear-gradient(90deg, #d99a3b, transparent 78%) left bottom / 100% 1px no-repeat;
  box-shadow: inset 3px 0 #dda143, 0 18px 36px rgba(0, 0, 0, .22);
}

.hero-copy p {
  max-width: 455px;
  font-size: 17px;
  line-height: 1.58;
}

.hero-ctas { margin-top: 17px; }

.hero-primary,
.hero-secondary {
  min-height: 46px;
  padding-right: 20px;
  padding-left: 20px;
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
}

.hero-grid {
  top: 214px;
  right: max(42px, calc(50% - 574px));
  width: 370px;
}

.hero-grid:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -33px;
  left: 46px;
  width: calc(100% - 92px);
  height: 38px;
  border-top: 1px solid rgba(240, 184, 78, .72);
  background:
    linear-gradient(135deg, transparent 48%, #d79a3d 49% 51%, transparent 52%) left center / 70px 32px no-repeat,
    linear-gradient(225deg, transparent 48%, #d79a3d 49% 51%, transparent 52%) right center / 70px 32px no-repeat;
  opacity: .8;
}

.hero-grid .panel {
  width: 370px;
  min-height: 414px;
  overflow: visible;
  border: 1px solid #a86a27;
  background:
    linear-gradient(135deg, rgba(255, 212, 117, .28) 0 1px, transparent 1px) top left / 30px 30px no-repeat,
    linear-gradient(225deg, rgba(255, 212, 117, .28) 0 1px, transparent 1px) top right / 30px 30px no-repeat,
    linear-gradient(45deg, rgba(255, 212, 117, .18) 0 1px, transparent 1px) bottom left / 30px 30px no-repeat,
    linear-gradient(315deg, rgba(255, 212, 117, .18) 0 1px, transparent 1px) bottom right / 30px 30px no-repeat,
    radial-gradient(circle at 50% 0, rgba(132, 29, 19, .32), transparent 44%),
    linear-gradient(180deg, rgba(35, 11, 10, .98), rgba(8, 4, 5, .98));
  box-shadow:
    0 30px 76px rgba(0, 0, 0, .78),
    0 0 0 5px rgba(7, 3, 4, .82),
    0 0 0 6px rgba(215, 149, 54, .36),
    inset 0 0 45px rgba(118, 26, 18, .20);
}

.hero-grid .panel:before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(237, 185, 87, .23);
  pointer-events: none;
}

.hero-grid .panel:after {
  inset: 13px;
  border-color: rgba(255, 214, 125, .07);
}

.hero-grid .panel-hd {
  width: calc(100% - 62px);
  height: 60px;
  margin: -18px auto 0;
  padding: 0 52px;
  z-index: 3;
  overflow: visible;
  border: 1px solid #e0ac54;
  border-radius: 0;
  background:
    linear-gradient(90deg, rgba(72, 24, 10, .18), transparent 18% 82%, rgba(72, 24, 10, .18)),
    linear-gradient(180deg, #f3d58c, #c28a36 48%, #84501d 52%, #d4a44d);
  color: #2c0d08;
  box-shadow: 0 9px 18px rgba(0, 0, 0, .56), inset 0 1px #fff0b8, inset 0 -1px #6d3a14;
  clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 12px 100%, 0 50%);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-shadow: 0 1px rgba(255, 238, 180, .55);
}

.hero-grid .panel-hd span {
  position: relative;
  z-index: 2;
}

.hero-grid .panel-hd:before,
.hero-grid .panel-hd:after {
  top: 21px;
  color: #5b2410;
  font-size: 12px;
  text-shadow: 0 1px rgba(255, 226, 144, .6);
}

.hero-grid .panel-hd:before { left: 24px; }
.hero-grid .panel-hd:after { right: 24px; }

.login-card {
  position: relative;
  z-index: 2;
  gap: 11px;
  padding: 22px 27px 25px;
}

.login-welcome {
  padding: 2px 0 15px;
  display: block;
  position: relative;
  text-align: center;
}

.login-welcome:after {
  content: "";
  position: absolute;
  right: 12%;
  bottom: 5px;
  left: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #ad6b2c, #f1c56f, #ad6b2c, transparent);
}

.login-welcome b,
.login-welcome span { display: block; }

.login-welcome b {
  color: #f1cf8b;
  font-size: 14px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.login-welcome span {
  margin-top: 4px;
  color: #a99582;
  font: 10px/1.4 Arial, Helvetica, sans-serif;
  letter-spacing: .04em;
}

.login-field-row {
  min-height: 48px;
  display: flex;
  align-items: stretch;
  position: relative;
  overflow: hidden;
  border: 1px solid #5b3028;
  background: linear-gradient(180deg, rgba(24, 10, 10, .98), rgba(13, 6, 7, .98));
  box-shadow: inset 0 1px rgba(255, 214, 125, .04), inset 0 0 15px rgba(0, 0, 0, .38);
  transition: border-color .2s ease, box-shadow .2s ease;
}

.login-field-row:focus-within {
  border-color: #d69b43;
  box-shadow: 0 0 0 2px rgba(219, 148, 55, .12), inset 0 0 15px rgba(0, 0, 0, .42);
}

.login-field-icon {
  width: 47px;
  flex: 0 0 47px;
  display: grid;
  place-items: center;
  color: #d5a65a;
  border-right: 1px solid rgba(184, 112, 46, .25);
  background: linear-gradient(135deg, rgba(102, 27, 18, .24), transparent);
}

.login-field-icon svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.login-field-row .field {
  min-height: 46px;
  padding: 10px 13px;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #f4e8d7;
}

.login-field-row .field:focus {
  outline: 0;
  border: 0;
  box-shadow: none;
}

.login-field-row .field::placeholder { color: #8f7b6d; }

.remember {
  min-height: 26px;
  padding: 0 2px;
  color: #bdac9e;
  font-size: 11px;
}

.remember input {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: #b22519;
}

.login-card .btn.block {
  min-height: 50px;
  position: relative;
  overflow: hidden;
  border: 1px solid #edbd63;
  background:
    linear-gradient(90deg, rgba(255, 220, 139, .12), transparent 22% 78%, rgba(255, 220, 139, .12)),
    linear-gradient(180deg, #be3422, #761014 58%, #3b090b);
  color: #fff1cb;
  box-shadow: 0 10px 22px rgba(94, 8, 9, .48), inset 0 1px rgba(255, 239, 180, .28), inset 0 -1px #3d0708;
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
  cursor: pointer;
}

.login-card .btn.block:before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 22%, rgba(255, 229, 158, .22) 45%, transparent 68%);
  transform: translateX(-110%);
  transition: transform .48s ease;
}

.login-card .btn.block:hover:before { transform: translateX(110%); }
.login-card .btn.block span { position: relative; z-index: 1; }

.small-links {
  padding-top: 2px;
  border-top: 1px solid rgba(177, 105, 43, .14);
}

.small-links button,
.small-links a {
  color: #d7aa5d;
  font-size: 10px;
  letter-spacing: .03em;
}

.small-links button:hover,
.small-links a:hover { color: #ffe09a; }

.dynasty-portals {
  right: max(38px, calc(50% - 574px));
  bottom: 26px;
  left: max(38px, calc(50% - 574px));
}

@media (max-width: 1120px) and (min-width: 901px) {
  .topbar .nav { gap: 178px; }
  .topbar .nav button,
  .topbar .nav a { padding-right: 9px; padding-left: 9px; font-size: 10px; }
  .topbar .brand { width: 164px; }
  .topbar .brand img { width: 158px; }
  .logo-wrap,
  .hero-logo-sparks { left: 24px; }
  .hero-copy { left: 38px; }
  .hero-grid { right: 28px; }
  .dynasty-portals { right: 28px; left: 28px; }
}

@media (max-width: 900px) {
  body { padding-top: 0; }

  .topbar {
    height: auto;
    min-height: 154px;
    padding: 0 12px 12px;
    overflow: hidden;
  }

  .topbar .brand {
    position: relative;
    top: 0;
    left: 50%;
    width: 176px;
    height: 86px;
    transform: translateX(-50%);
  }

  .topbar .brand:before { height: 82px; }
  .topbar .brand img { width: 166px; height: 84px; }

  .topbar .nav {
    width: 100%;
    height: auto;
    gap: 8px;
    align-items: flex-start;
  }

  .nav-wing {
    width: 50%;
    height: auto;
    flex-wrap: wrap;
    gap: 2px;
  }

  .nav-wing-left { justify-content: flex-end; }
  .nav-wing-right { justify-content: flex-start; }

  .topbar .nav button,
  .topbar .nav a,
  .topbar .nav .download-link {
    min-height: 42px;
    padding: 0 9px;
    font-size: 10px;
  }

  .hero {
    min-height: 1115px;
    background-position: 60% top;
    background-size: auto 780px;
  }

  .logo-wrap {
    top: 3px;
    left: 50%;
    width: min(500px, 94vw);
    height: 285px;
    transform: translateX(-50%);
  }

  .logo-wrap img { width: min(500px, 94vw); height: 280px; }

  .hero-logo-sparks {
    top: 0;
    left: 50%;
    width: min(520px, 100vw);
    height: 300px;
    transform: translateX(-50%);
  }

  .hero-copy {
    top: 275px;
    right: 20px;
    left: 20px;
    width: auto;
    padding: 18px 20px;
    text-align: center;
  }

  .hero-copy p { max-width: none; }
  .hero-grid { top: 527px; right: 20px; left: 20px; width: auto; }
  .hero-grid .panel { width: min(410px, 100%); margin: 0 auto; }
  .dynasty-portals { right: 20px; bottom: 27px; left: 20px; }
}

@media (max-width: 620px) {
  .topbar { min-height: 185px; }
  .topbar .nav { flex-direction: column; align-items: stretch; }
  .nav-wing { width: 100%; justify-content: center; }

  .hero {
    min-height: 1155px;
    background-position: 62% top;
    background-size: auto 690px;
  }

  .logo-wrap { top: -2px; height: 252px; }
  .logo-wrap img { height: 248px; }
  .hero-logo-sparks { height: 270px; }
  .hero-copy { top: 235px; right: 11px; left: 11px; }
  .hero-copy p { font-size: 15px; }
  .hero-status { justify-content: center; flex-wrap: wrap; }
  .hero-ctas { justify-content: center; }
  .hero-grid { top: 500px; right: 11px; left: 11px; }
  .hero-grid .panel { min-height: 420px; }
  .hero-grid .panel-hd { width: calc(100% - 44px); }
  .login-card { padding-right: 20px; padding-left: 20px; }
  .dynasty-portals { right: 11px; bottom: 22px; left: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .login-card .btn.block:before,
  .login-field-row { transition: none !important; }
}

/* Clique na marca: sem caixa de foco, com brilho de partículas. */
.topbar .brand:focus,
.topbar .brand:active,
.account-brand:focus,
.account-brand:active {
  outline: 0 !important;
  outline-offset: 0 !important;
}

.topbar .brand:after,
.account-brand:after {
  content: "";
  position: absolute;
  inset: -10px -18px;
  z-index: 6;
  opacity: 0;
  background:
    radial-gradient(circle at 10% 55%, #ffe49a 0 2px, transparent 3px),
    radial-gradient(circle at 22% 18%, #f38b2c 0 2px, transparent 3px),
    radial-gradient(circle at 36% 88%, #ffd16f 0 1px, transparent 3px),
    radial-gradient(circle at 54% 8%, #fff0b0 0 2px, transparent 3px),
    radial-gradient(circle at 68% 83%, #ef6d25 0 2px, transparent 4px),
    radial-gradient(circle at 82% 24%, #ffd77b 0 1px, transparent 3px),
    radial-gradient(circle at 94% 61%, #fff0a4 0 2px, transparent 4px);
  filter: drop-shadow(0 0 7px #f06b24);
  pointer-events: none;
}

.topbar .brand:hover:after,
.topbar .brand:focus:after,
.topbar .brand:active:after,
.topbar .brand.is-bursting:after,
.account-brand:hover:after,
.account-brand:focus:after,
.account-brand:active:after {
  animation: brand-particle-burst 1.15s ease-out;
}

@keyframes brand-particle-burst {
  0% { opacity: 0; transform: scale(.74) translateY(7px); }
  24% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.2) translateY(-10px); }
}

/* Painel autenticado compacto. */
.hero-grid .panel.is-account-compact {
  min-height: 0;
}

.is-account-compact .login-card {
  gap: 9px;
  padding: 18px 23px 20px;
}

.is-account-compact .user-stats {
  border: 1px solid rgba(203, 134, 48, .20);
  background: rgba(13, 5, 7, .48);
}

.is-account-compact .user-line {
  min-height: 40px;
  padding: 8px 11px;
}

.is-account-compact .panel-select {
  min-height: 42px;
  margin-top: 1px;
}

.is-account-compact .panel-actions {
  margin-top: 2px;
  gap: 7px;
}

.is-account-compact .panel-actions button,
.is-account-compact .panel-actions a {
  min-height: 36px;
  border-width: 1px;
  line-height: 34px;
  font-size: 10px;
}

.is-account-compact .panel-actions > :nth-child(5) {
  grid-column: 1 / -1;
}

.is-account-compact .panel-actions .play-game-panel-btn {
  max-height: 82px;
}

.is-account-compact .panel-actions .play-game-panel-btn img {
  max-height: 82px;
}

.is-account-compact .msg:empty {
  display: none;
}

/* Área privada da conta. */
.account-body {
  min-height: 100vh;
  margin: 0;
  background:
    linear-gradient(180deg, rgba(6, 2, 3, .20), #0a0305 720px),
    url("../Images/Oriental2026/hero-dragon-warlord.png") center top / 1920px auto no-repeat,
    #080305;
  color: #d9c9bd;
  font-family: Arial, Helvetica, sans-serif;
}

.account-nav {
  min-height: 94px;
  padding: 0 max(24px, calc((100% - 1180px) / 2));
  display: flex;
  align-items: center;
  justify-content: center;
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid rgba(225, 159, 53, .52);
  background: linear-gradient(180deg, #100608, #070304 82%);
  box-shadow: 0 18px 42px rgba(0, 0, 0, .62);
}

.account-nav:before {
  content: "";
  height: 12px;
  position: absolute;
  right: 0;
  bottom: -12px;
  left: 0;
  background: linear-gradient(135deg, transparent 8px, rgba(213, 143, 48, .44) 9px, transparent 10px) 0 0 / 30px 12px repeat-x;
  pointer-events: none;
}

.account-brand {
  width: 190px;
  height: 104px;
  position: absolute;
  top: -5px;
  left: 50%;
  z-index: 4;
  transform: translateX(-50%);
}

.account-brand img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 10px 16px #000) drop-shadow(0 0 9px rgba(223, 91, 24, .28));
}

.account-nav nav {
  width: min(100%, 940px);
  min-height: 94px;
  display: grid;
  grid-template-columns: auto auto 300px auto auto;
  align-items: center;
  justify-content: center;
  gap: 24px;
}

.account-nav nav a {
  min-height: 94px;
  padding: 0 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: #ead9c4;
  font: 700 12px/1 Georgia, "Times New Roman", serif;
  letter-spacing: .09em;
  text-decoration: none;
  text-transform: uppercase;
  text-shadow: 0 2px 7px #000;
}

.account-nav nav a:after {
  content: "";
  height: 2px;
  position: absolute;
  right: 5px;
  bottom: 21px;
  left: 5px;
  background: linear-gradient(90deg, transparent, #e6ad4b, transparent);
  transform: scaleX(0);
  transition: transform .24s ease;
}

.account-nav nav a:hover:after { transform: scaleX(1); }

.account-main {
  width: min(1180px, calc(100% - 34px));
  margin: 0 auto;
  padding: 82px 0 70px;
}

.account-heading {
  max-width: 780px;
  margin: 0 auto 28px;
  padding: 35px 30px 31px;
  position: relative;
  border: 1px solid rgba(226, 162, 63, .34);
  background: linear-gradient(110deg, rgba(33, 9, 11, .90), rgba(9, 4, 6, .70));
  box-shadow: 0 24px 58px rgba(0, 0, 0, .42);
  text-align: center;
}

.account-heading:before {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid rgba(244, 194, 92, .10);
  pointer-events: none;
}

.account-heading > span {
  color: #efb653;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.account-heading h1 {
  margin: 9px 0 8px;
  color: #ffe0a0;
  font: 700 clamp(38px, 6vw, 64px)/1 Georgia, "Times New Roman", serif;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-shadow: 0 7px 24px #000;
}

.account-heading p {
  max-width: 640px;
  margin: 0 auto;
  color: #cbb9ab;
  line-height: 1.65;
}

.account-notice {
  max-width: 900px;
  margin: 0 auto 22px;
  padding: 14px 18px;
  border: 1px solid;
  text-align: center;
  font-weight: 700;
}

.account-notice.is-success {
  border-color: rgba(89, 217, 127, .42);
  background: rgba(22, 91, 45, .25);
  color: #a9edba;
}

.account-notice.is-error {
  border-color: rgba(234, 89, 67, .52);
  background: rgba(120, 23, 23, .28);
  color: #ffb0a0;
}

.account-layout {
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.account-summary,
.account-card {
  border: 1px solid rgba(225, 159, 58, .35);
  background: linear-gradient(145deg, rgba(34, 11, 14, .97), rgba(9, 4, 6, .98));
  box-shadow: 0 24px 58px rgba(0, 0, 0, .44);
}

.account-summary {
  padding: 22px;
  position: sticky;
  top: 122px;
}

.account-summary-title {
  margin: -22px -22px 18px;
  padding: 18px 22px;
  border-bottom: 1px solid rgba(225, 159, 58, .30);
  background: linear-gradient(90deg, rgba(145, 28, 20, .68), rgba(54, 10, 13, .16));
}

.account-summary-title span,
.account-summary-title b { display: block; }

.account-summary-title span {
  color: #efb653;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.account-summary-title b {
  margin-top: 5px;
  color: #ffe0a0;
  font: 700 26px/1.1 Georgia, "Times New Roman", serif;
}

.account-summary dl { margin: 0; }

.account-summary dl div {
  padding: 10px 0;
  border-bottom: 1px solid rgba(225, 159, 58, .12);
}

.account-summary dt {
  color: #a99586;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.account-summary dd {
  margin: 3px 0 0;
  overflow-wrap: anywhere;
  color: #f1c36d;
  font-size: 13px;
}

.account-play {
  margin-top: 17px;
  display: grid;
  gap: 8px;
}

.account-play label,
.account-card label {
  display: grid;
  gap: 6px;
  color: #cdbbae;
  font-size: 11px;
  font-weight: 700;
}

.account-play select,
.account-card input {
  width: 100%;
  min-height: 43px;
  padding: 10px 12px;
  border: 1px solid #5a3028;
  background: #130809;
  color: #f6e8d8;
}

.account-play button,
.account-card button {
  min-height: 43px;
  padding: 0 15px;
  border: 1px solid #dfa13c;
  background: linear-gradient(180deg, #ad2b1f, #610d12);
  color: #fff0c8;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
  cursor: pointer;
}

.account-card button:disabled {
  border-color: #58433b;
  background: #1c1212;
  color: #776a62;
  cursor: not-allowed;
}

.account-safe-note {
  margin-top: 16px;
  padding: 13px;
  border: 1px solid rgba(100, 214, 129, .24);
  background: rgba(28, 87, 43, .16);
}

.account-safe-note b,
.account-safe-note span { display: block; }
.account-safe-note b { color: #83dd9b; font-size: 12px; }
.account-safe-note span { margin-top: 4px; color: #a9b9a9; font-size: 10px; line-height: 1.55; }

.account-editor {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.account-card {
  padding: 22px;
  position: relative;
}

.account-card-head {
  margin: -22px -22px 19px;
  padding: 15px 19px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgba(225, 159, 58, .29);
  background: linear-gradient(90deg, rgba(123, 23, 18, .58), rgba(42, 8, 11, .10));
}

.account-card-head > span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid #d99736;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  color: #f1be61;
  font-weight: 900;
}

.account-card-head div b,
.account-card-head div small { display: block; }
.account-card-head div b { color: #f4ca77; font: 700 19px/1.1 Georgia, "Times New Roman", serif; }
.account-card-head div small { margin-top: 4px; color: #99857a; font-size: 10px; }

.account-card form {
  display: grid;
  gap: 11px;
}

.account-card input:focus,
.account-play select:focus {
  outline: 0;
  border-color: #d99a3d;
  box-shadow: 0 0 0 2px rgba(217, 154, 61, .12);
}

.account-card-phone { grid-column: 1 / -1; }
.account-card-phone > form { grid-template-columns: 1fr 1fr auto; align-items: end; }

.account-card-characters { grid-column: 1 / -1; }

.account-character-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.account-character {
  padding: 14px;
  border: 1px solid rgba(225, 159, 58, .22);
  background: linear-gradient(145deg, rgba(85, 23, 21, .34), rgba(10, 11, 18, .58));
}

.account-character-top {
  display: flex;
  gap: 9px;
  align-items: center;
  justify-content: space-between;
}

.account-character-top b { color: #ffe1a0; font: 700 18px/1.1 Georgia, "Times New Roman", serif; }
.account-character-top span { padding: 4px 7px; border-radius: 20px; font-size: 10px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.account-character-top .is-online { color: #bff5ca; background: rgba(41, 142, 78, .26); border: 1px solid rgba(106, 222, 133, .38); }
.account-character-top .is-offline { color: #d9c4ae; background: rgba(107, 77, 54, .22); border: 1px solid rgba(215, 164, 108, .30); }
.account-character > small { display: block; margin-top: 7px; color: #bda18c; font-size: 11px; }

.account-character dl {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 5px 10px;
  margin: 14px 0 0;
}

.account-character dt { color: #987d69; font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.account-character dd { margin: 0; color: #eac476; font-size: 12px; overflow-wrap: anywhere; }
.account-empty { margin: 0; padding: 15px; border: 1px dashed rgba(225, 159, 58, .34); color: #c6b2a2; text-align: center; }

.account-sms-actions {
  margin-top: 18px;
  padding-top: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  border-top: 1px solid rgba(225, 159, 58, .18);
}

.account-sms-actions form {
  grid-template-columns: 1fr auto;
  align-items: end;
}

@media (max-width: 920px) {
  .account-nav { min-height: 148px; padding: 77px 14px 8px; }
  .account-brand { width: 164px; height: 82px; }
  .account-nav nav { min-height: 55px; grid-template-columns: repeat(4, auto); gap: 5px; }
  .account-nav nav span { display: none; }
  .account-nav nav a { min-height: 42px; padding: 0 9px; font-size: 10px; }
  .account-nav nav a:after { bottom: 4px; }
  .account-main { padding-top: 54px; }
  .account-layout { grid-template-columns: 1fr; }
  .account-summary { position: static; }
}

@media (max-width: 660px) {
  .account-main { width: min(100% - 20px, 1180px); }
  .account-heading { padding: 27px 18px 24px; }
  .account-editor { grid-template-columns: 1fr; }
  .account-card-phone { grid-column: auto; }
  .account-card-characters { grid-column: auto; }
  .account-character-grid { grid-template-columns: 1fr; }
  .account-card-phone > form,
  .account-sms-actions,
  .account-sms-actions form { grid-template-columns: 1fr; }
  .account-card { padding: 19px; }
  .account-card-head { margin: -19px -19px 18px; }
}

/* Janela de acesso — mesma linguagem visual do painel principal */
#loginModal {
  background: rgba(4, 2, 3, .84);
  backdrop-filter: blur(8px);
}

#loginModal .account-modal-card {
  width: min(500px, calc(100vw - 34px));
  max-width: 500px;
  overflow: visible;
  border: 1px solid #a86a27;
  background:
    radial-gradient(circle at 50% 0, rgba(135, 31, 20, .34), transparent 42%),
    linear-gradient(180deg, rgba(35, 11, 10, .99), rgba(8, 4, 5, .99));
  box-shadow:
    0 34px 90px rgba(0, 0, 0, .9),
    0 0 0 6px rgba(6, 3, 4, .86),
    0 0 0 7px rgba(218, 151, 55, .38),
    inset 0 0 54px rgba(115, 25, 18, .20);
}

#loginModal .account-modal-card:before {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid rgba(238, 187, 89, .25);
  pointer-events: none;
}

#loginModal .account-modal-card:after {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(255, 216, 132, .06);
  pointer-events: none;
}

#loginModal .account-modal-head {
  width: calc(100% - 76px);
  height: 64px;
  margin: -19px auto 0;
  padding: 0 62px;
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  border: 1px solid #e2ae56;
  background:
    linear-gradient(90deg, rgba(72, 24, 10, .18), transparent 18% 82%, rgba(72, 24, 10, .18)),
    linear-gradient(180deg, #f4d78f, #c58d39 48%, #83501d 52%, #d5a64e);
  color: #2c0d08;
  clip-path: polygon(13px 0, calc(100% - 13px) 0, 100% 50%, calc(100% - 13px) 100%, 13px 100%, 0 50%);
  box-shadow: 0 11px 22px rgba(0, 0, 0, .62), inset 0 1px #fff0bc, inset 0 -1px #693815;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-shadow: 0 1px rgba(255, 239, 182, .58);
}

#loginModal .account-modal-head:before,
#loginModal .account-modal-head:after {
  content: "◆";
  position: absolute;
  top: 22px;
  color: #5d2510;
  font-size: 11px;
}

#loginModal .account-modal-head:before { left: 26px; }
#loginModal .account-modal-head:after { display: none; }

#loginModal .account-modal-head .modal-close {
  position: absolute;
  top: 15px;
  right: 17px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #57200d;
  box-shadow: none;
  font-size: 25px;
  text-shadow: 0 1px rgba(255, 236, 172, .55);
  cursor: pointer;
}

#loginModal .account-modal-body {
  padding: 31px 36px 34px;
  display: grid;
  gap: 14px;
  position: relative;
  z-index: 2;
}

#loginModal .account-modal-body .login-welcome { padding-bottom: 17px; }

#loginModal .account-modal-body .btn.block {
  min-height: 52px;
  position: relative;
  overflow: hidden;
  border: 1px solid #edbd63;
  background:
    linear-gradient(90deg, rgba(255, 220, 139, .12), transparent 22% 78%, rgba(255, 220, 139, .12)),
    linear-gradient(180deg, #be3422, #761014 58%, #3b090b);
  color: #fff1cb;
  box-shadow: 0 11px 24px rgba(94, 8, 9, .52), inset 0 1px rgba(255, 239, 180, .28), inset 0 -1px #3d0708;
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}

#loginModal .account-modal-body .btn.block:before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 22%, rgba(255, 229, 158, .22) 45%, transparent 68%);
  transform: translateX(-110%);
  transition: transform .48s ease;
}

#loginModal .account-modal-body .btn.block:hover:before { transform: translateX(110%); }
#loginModal .account-modal-body .btn.block span { position: relative; z-index: 1; }

#loginModal .account-modal-body .small-links {
  padding-top: 7px;
  border-top: 1px solid rgba(177, 105, 43, .17);
}

@media (max-width: 620px) {
  #loginModal .account-modal-head {
    width: calc(100% - 56px);
    padding: 0 42px;
    font-size: 14px;
  }

  #loginModal .account-modal-head .modal-close { right: 10px; }
  #loginModal .account-modal-body { padding: 27px 23px 28px; }
}

/* Redes da comunidade e dragão viajante. */
.topbar .brand { overflow: visible; }

.social-orbit {
  width: 420px;
  height: 34px;
  position: absolute;
  z-index: 6;
  top: 58px;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}

.social-link {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  position: absolute;
  top: 0;
  overflow: hidden;
  border: 1px solid rgba(239, 183, 83, .68);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 26%, #9a2b28, #35090d 62%, #090305);
  color: #ffe3a0;
  box-shadow: 0 4px 13px #000, 0 0 10px rgba(218, 77, 34, .38), inset 0 1px rgba(255, 229, 157, .28);
  pointer-events: auto;
  transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
}

.social-link:nth-of-type(1) { left: 68px; }
.social-link:nth-of-type(2) { left: 104px; }
.social-link:nth-of-type(3) { right: 104px; }
.social-link:nth-of-type(4) { right: 68px; }

.social-link:before { content: ""; position: absolute; inset: 2px; border: 1px solid rgba(255, 217, 130, .16); border-radius: inherit; }
.social-link svg { width: 18px; height: 18px; position: relative; z-index: 1; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.social-youtube svg path,.social-facebook svg path { fill: currentColor; stroke: none; }
.social-discord svg path { fill: rgba(255, 222, 152, .18); }
.social-link:hover,.social-link:focus-visible { transform: translateY(-4px) scale(1.14); filter: brightness(1.24); box-shadow: 0 7px 18px #000, 0 0 18px rgba(255, 154, 55, .7); }

.social-dragon {
  width: 88px;
  height: 30px;
  position: absolute;
  top: -14px;
  left: 25px;
  z-index: 5;
  color: #ffd577;
  opacity: .96;
  filter: drop-shadow(0 2px 3px #000) drop-shadow(0 0 8px rgba(244, 95, 30, .95));
  animation: socialDragonFlight 9s ease-in-out infinite;
}
.social-dragon svg { width: 100%; height: 100%; overflow: visible; }
.social-dragon path { fill: rgba(185, 43, 25, .88); stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

@keyframes socialDragonFlight {
  0% { opacity: 0; transform: translateX(0) translateY(2px) scale(.72); }
  10% { opacity: .9; }
  45% { transform: translateX(145px) translateY(-6px) scale(.92) rotate(-2deg); }
  52% { transform: translateX(165px) translateY(-7px) scaleX(-.92) scaleY(.92); }
  90% { opacity: .9; transform: translateX(315px) translateY(2px) scaleX(-.72) scaleY(.72); }
  100% { opacity: 0; transform: translateX(315px) translateY(2px) scaleX(-.72) scaleY(.72); }
}

/* Atalhos com ícones desenhados para o portal. */
.hero { min-height: 950px; }
.dynasty-portals { bottom: 120px; }
.dynasty-glyph svg { width: 31px; height: 31px; transform: rotate(-45deg); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 5px rgba(246, 177, 70, .42)); }
.dynasty-portal:hover .dynasty-glyph svg { animation: dynastyIconAwaken .62s ease both; }
@keyframes dynastyIconAwaken { 0% { transform: rotate(-45deg) scale(.92); } 45% { transform: rotate(-45deg) scale(1.16); filter: drop-shadow(0 0 10px #ff9e38); } 100% { transform: rotate(-45deg) scale(1); } }

/* Acesso em destaque ao Passe da Dinastia. */
.monthly-pass-launch {
  width: min(700px, calc(100% - 40px));
  min-height: 72px;
  padding: 8px 17px 8px 10px;
  display: grid;
  grid-template-columns: 58px 1fr auto;
  align-items: center;
  gap: 14px;
  position: absolute;
  z-index: 9;
  bottom: 26px;
  left: 50%;
  overflow: hidden;
  transform: translateX(-50%);
  border: 1px solid #e2a64a;
  background: linear-gradient(90deg, rgba(255,210,111,.10), transparent 25% 75%, rgba(255,210,111,.08)), linear-gradient(135deg, #78171a, #2a080d 48%, #090306);
  color: #f5dfbd;
  box-shadow: 0 18px 34px rgba(0,0,0,.62), inset 0 1px rgba(255,232,170,.22), 0 0 22px rgba(146,27,20,.34);
  cursor: pointer;
  text-align: left;
}
.monthly-pass-launch:before { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(244,190,83,.16); pointer-events: none; }
.monthly-pass-launch:after { content: ""; width: 130px; height: 170%; position: absolute; top: -35%; left: -160px; transform: rotate(16deg); background: linear-gradient(90deg, transparent, rgba(255,223,147,.18), transparent); animation: monthlyPassSheen 5.6s ease-in-out infinite; }
@keyframes monthlyPassSheen { 0%,55% { left: -180px; } 82%,100% { left: calc(100% + 80px); } }
.monthly-pass-seal { width: 52px; height: 52px; display: grid; place-items: center; position: relative; z-index: 1; border: 1px solid #efbe64; background: radial-gradient(circle, #dc3b26, #6f0e13 62%, #1d0508); clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%); color: #ffe1a0; box-shadow: 0 0 17px rgba(237,74,31,.5), inset 0 0 13px rgba(255,210,104,.18); font: 700 23px/1 Georgia, serif; text-shadow: 0 2px 5px #000; }
.monthly-pass-launch > span:nth-child(2),.monthly-pass-launch em { position: relative; z-index: 2; }
.monthly-pass-launch b,.monthly-pass-launch small { display: block; }
.monthly-pass-launch b { color: #ffdc91; font: 800 17px/1.2 Georgia, serif; letter-spacing: .09em; text-transform: uppercase; }
.monthly-pass-launch small { margin-top: 4px; color: #bfa794; font: 11px/1.35 Arial, sans-serif; }
.monthly-pass-launch em { padding: 10px 13px; border: 1px solid rgba(239,180,75,.45); color: #ffd47f; font: 800 10px/1 Arial, sans-serif; font-style: normal; letter-spacing: .08em; text-transform: uppercase; }
.monthly-pass-launch:hover { filter: brightness(1.12); }

.monthly-pass-modal-card { width: 1060px; border-color: #b8792f; background: linear-gradient(155deg, rgba(49,12,14,.99), rgba(8,3,5,.99) 62%); }
.monthly-pass-modal-head { background: linear-gradient(90deg, #7f1918, #c2742c 48%, #591012); color: #ffe4a5; text-shadow: 0 2px 7px #3c0708; }
.monthly-pass-modal-body { position: relative; overflow: hidden; }
.monthly-pass-modal-body:before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 10%, rgba(213,93,31,.19), transparent 38%), linear-gradient(135deg, transparent 48%, rgba(225,159,59,.05) 49% 51%, transparent 52%) 0 0 / 36px 36px; pointer-events: none; }
.monthly-pass-modal-body > * { position: relative; z-index: 1; }

.monthly-pass-intro { min-height: 112px; padding: 16px 22px; display: grid; grid-template-columns: 72px 1fr; gap: 19px; align-items: center; border: 1px solid rgba(228,166,70,.32); background: linear-gradient(110deg, rgba(115,21,20,.45), rgba(13,5,7,.35)); }
.monthly-pass-intro small { color: #eeb75b; font: 900 10px/1 Arial, sans-serif; letter-spacing: .17em; text-transform: uppercase; }
.monthly-pass-intro h2 { margin: 7px 0 6px; color: #ffe1a0; font: 700 30px/1.05 Georgia, serif; letter-spacing: .04em; }
.monthly-pass-intro p { color: #c6b3a4; font: 13px/1.55 Arial, sans-serif; }
.monthly-pass-lantern { width: 64px; height: 70px; display: grid; place-items: center; position: relative; border-radius: 45% 45% 36% 36%; background: radial-gradient(circle, #e94a2c, #7f1115 68%, #260609); color: #ffe09b; box-shadow: 0 0 24px rgba(226,62,28,.45), inset 0 0 16px rgba(255,221,130,.22); font: 700 27px/1 Georgia, serif; }
.monthly-pass-lantern:before,.monthly-pass-lantern:after { content: ""; position: absolute; left: 8px; right: 8px; height: 5px; border: 1px solid #d8a347; background: #4b0b0e; }
.monthly-pass-lantern:before { top: -4px; }.monthly-pass-lantern:after { bottom: -4px; }

.monthly-reward-legend { margin: 14px 0; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 8px; }
.monthly-reward-legend > span { min-height: 76px; padding: 9px 7px; display: grid; grid-template-columns: 28px 1fr; align-content: center; border: 1px solid rgba(223,155,55,.25); background: rgba(11,4,6,.62); }
.monthly-reward-legend i { grid-row: span 2; align-self: center; color: #eab455; font: 700 21px/1 Georgia, serif; font-style: normal; text-align: center; }
.monthly-reward-legend b { color: #f7d796; font: 800 11px/1.2 Arial, sans-serif; }
.monthly-reward-legend small { margin-top: 4px; color: #ad9a8b; font: 9px/1.3 Arial, sans-serif; }

.monthly-pass-toolbar { min-height: 52px; display: grid; grid-template-columns: auto 220px 1fr; gap: 12px; align-items: center; }
.monthly-pass-toolbar label { color: #bea58f; font: 800 10px/1 Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.monthly-pass-toolbar .field { height: 40px; margin: 0; }
.monthly-pass-toolbar strong { justify-self: end; color: #f1bd64; font: 800 12px/1 Arial, sans-serif; }

.monthly-calendar { margin-top: 12px; display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 7px; }
.monthly-day { min-height: 68px; padding: 7px 4px; display: grid; grid-template-columns: 25px 1fr; grid-template-rows: 1fr 1fr; align-items: center; position: relative; overflow: hidden; border: 1px solid rgba(195,126,43,.22); background: linear-gradient(145deg, rgba(44,12,14,.74), rgba(9,4,6,.92)); color: #9c8777; }
.monthly-day i { grid-row: 1 / 3; color: #c68a3a; font: 700 17px/1 Georgia, serif; font-style: normal; text-align: center; }
.monthly-day b { color: #d5b88a; font: 800 10px/1 Arial, sans-serif; text-transform: uppercase; }
.monthly-day small { color: #826f63; font: 8px/1 Arial, sans-serif; }
.monthly-day.is-claimed { border-color: rgba(93,211,124,.42); background: linear-gradient(145deg, rgba(27,91,47,.47), rgba(8,27,16,.9)); }
.monthly-day.is-claimed:after { content: "✓"; position: absolute; right: 5px; top: 4px; color: #86e69e; font-weight: 900; }
.monthly-day.is-claimed i,.monthly-day.is-claimed b { color: #a6e8b6; }
.monthly-day.is-next { border-color: #e2a74f; background: linear-gradient(145deg, rgba(138,32,21,.82), rgba(41,7,10,.95)); box-shadow: 0 0 16px rgba(224,91,30,.28), inset 0 0 18px rgba(236,167,64,.08); animation: monthlyNextPulse 2s ease-in-out infinite; }
.monthly-day.is-next i,.monthly-day.is-next b { color: #ffe099; }
.monthly-day.is-disabled { opacity: .24; filter: grayscale(1); }
@keyframes monthlyNextPulse { 50% { box-shadow: 0 0 24px rgba(240,133,43,.48), inset 0 0 20px rgba(244,189,79,.12); } }

.monthly-next-reward { margin: 13px 0 9px; padding: 11px 13px; border-left: 3px solid #d89536; background: rgba(104,22,17,.21); color: #e9c686; font: 700 12px/1.4 Arial, sans-serif; }
.monthly-checkin-button { max-width: 460px; margin: 0 auto; display: block; }
.monthly-checkin-button[disabled] { cursor: not-allowed; filter: grayscale(.6) brightness(.65); transform: none; }
.monthly-pass-message { text-align: center; }
.monthly-pass-safety { margin-top: 4px; color: #927f72; font: 10px/1.45 Arial, sans-serif; text-align: center; }
.monthly-pass-login { max-width: 520px; margin: 20px auto 5px; text-align: center; }
.monthly-pass-login p { margin-bottom: 16px; }

@media (max-width: 900px) {
  .social-orbit { top: 58px; width: min(420px,100%); }
  .social-link:nth-of-type(1) { left: calc(50% - 172px); }
  .social-link:nth-of-type(2) { left: calc(50% - 137px); }
  .social-link:nth-of-type(3) { right: calc(50% - 137px); }
  .social-link:nth-of-type(4) { right: calc(50% - 172px); }
  .social-dragon { left: calc(50% - 190px); }
  .hero { min-height: 1265px; }
  .dynasty-portals { bottom: 128px; }
  .monthly-pass-launch { bottom: 25px; width: calc(100% - 40px); }
  .monthly-reward-legend { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .monthly-calendar { grid-template-columns: repeat(5,minmax(0,1fr)); }
}

@media (max-width: 620px) {
  .topbar { overflow: visible; }
  .social-orbit { width: 100%; top: 59px; }
  .social-link:nth-of-type(1) { left: calc(50% - 164px); }
  .social-link:nth-of-type(2) { left: calc(50% - 130px); }
  .social-link:nth-of-type(3) { right: calc(50% - 130px); }
  .social-link:nth-of-type(4) { right: calc(50% - 164px); }
  .social-dragon { display: none; }
  .hero { min-height: 1370px; }
  .dynasty-portals { bottom: 153px; }
  .monthly-pass-launch { min-height: 108px; bottom: 24px; grid-template-columns: 52px 1fr; }
  .monthly-pass-launch em { grid-column: 1 / -1; width: 100%; text-align: center; }
  .monthly-pass-intro { grid-template-columns: 1fr; text-align: center; }
  .monthly-pass-lantern { margin: 0 auto; }
  .monthly-pass-intro h2 { font-size: 24px; }
  .monthly-reward-legend { grid-template-columns: 1fr 1fr; }
  .monthly-pass-toolbar { grid-template-columns: 1fr; }
  .monthly-pass-toolbar strong { justify-self: start; }
  .monthly-calendar { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .social-dragon,.monthly-pass-launch:after,.monthly-day.is-next { animation: none !important; }
}

/* Passe mensal: botão sempre visível e ícones oficiais do cliente. */
.monthly-pass-modal-card {
  display: flex;
  max-height: calc(100vh - 20px);
  margin-top: 10px;
  margin-bottom: 10px;
  flex-direction: column;
}

.monthly-pass-modal-head { flex: 0 0 auto; }

.monthly-pass-modal-body {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.monthly-pass-steps {
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  list-style: none;
}

.monthly-pass-steps li {
  min-height: 45px;
  padding: 8px 9px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(222, 157, 61, .24);
  background: rgba(19, 6, 8, .76);
  color: #c7b09a;
  font: 10px/1.25 Arial, sans-serif;
}

.monthly-pass-steps b {
  flex: 0 0 25px;
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border: 1px solid #c77c2d;
  border-radius: 50%;
  color: #ffe09a;
  background: radial-gradient(circle, #8c221a, #2b080b);
}

.monthly-reward-legend i,
.monthly-day i {
  display: grid;
  place-items: center;
}

.monthly-reward-legend i img {
  display: block;
  width: 30px;
  height: 30px;
  object-fit: contain;
  image-rendering: auto;
  filter: drop-shadow(0 2px 4px #000) drop-shadow(0 0 5px rgba(255, 176, 54, .42));
}

.monthly-day i img {
  display: block;
  width: 23px;
  height: 23px;
  object-fit: contain;
  filter: drop-shadow(0 2px 3px #000);
}

.monthly-pass-actionbar {
  position: sticky !important;
  z-index: 20 !important;
  bottom: -1px;
  margin: 14px -24px -24px;
  padding: 10px 24px 12px;
  border-top: 1px solid rgba(238, 174, 71, .5);
  background: linear-gradient(180deg, rgba(35, 8, 10, .97), rgba(8, 3, 5, .995));
  box-shadow: 0 -14px 30px rgba(0, 0, 0, .52), inset 0 1px rgba(255, 220, 145, .08);
}

.monthly-pass-actionbar .monthly-next-reward { margin: 0 0 8px; }
.monthly-pass-actionbar .monthly-pass-message { min-height: 15px; margin: 4px 0 0; }
.monthly-pass-actionbar .monthly-pass-safety { margin: 2px 0 0; }
.monthly-checkin-button { min-height: 46px; font-size: 13px; letter-spacing: .08em; }

/* Ícones orientais dos compromissos do portal. */
.trust-panel > div {
  display: grid;
  grid-template-columns: 48px 1fr;
  align-items: center;
  gap: 12px;
}

.trust-panel .trust-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid #bc6b27;
  background: radial-gradient(circle at 35% 30%, #7a2118, #27090b 66%, #0c0405);
  color: #ffd77e;
  transform: rotate(45deg);
  box-shadow: inset 0 0 13px rgba(255, 162, 57, .14), 0 5px 12px rgba(0, 0, 0, .35);
}

.trust-panel .trust-icon svg {
  width: 23px;
  height: 23px;
  transform: rotate(-45deg);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.trust-panel .trust-copy { min-width: 0; }
.trust-panel .trust-copy b { margin-bottom: 5px; }

@media (max-width: 620px) {
  .monthly-pass-modal-card { max-height: calc(100vh - 8px); margin-top: 4px; margin-bottom: 4px; }
  .monthly-pass-steps { grid-template-columns: 1fr 1fr; }
  .monthly-pass-actionbar { margin-right: -14px; margin-left: -14px; margin-bottom: -14px; padding-right: 14px; padding-left: 14px; }
  .trust-panel > div { grid-template-columns: 42px 1fr; }
  .trust-panel .trust-icon { width: 36px; height: 36px; }
}

/* FlashBrowser: mantém o design completo, mas usa posicionamento explícito nos
   painéis para não depender do atalho CSS `inset` nem bloquear a rolagem. */
html.flash-browser .modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

html.flash-browser .modal.is-open { display: block !important; }
html.flash-browser .modal-card { position: relative; margin: 26px auto 52px; }
html.flash-browser .hero-logo-sparks,
html.flash-browser .ambient-sparks { display: block !important; }

/* Compatibilidade automática para UC Browser/Chromium antigos sem CSS Grid. */
html.legacy-browser,
html.legacy-browser body {
  min-width: 1000px;
}

html.legacy-browser body { padding-top: 0; }
html.legacy-browser .bg-video { display: none !important; }
html.legacy-browser .bg-mask { position: fixed; background: rgba(5, 2, 3, .35); }

/* O FlashBrowser executa o site e o cliente Flash no mesmo processo. Manter
   animações da página em segundo plano pode bloquear a abertura do jogo. */
html.legacy-browser *,
html.legacy-browser *::before,
html.legacy-browser *::after {
  animation: none !important;
  transition: none !important;
}

html.legacy-browser .ambient-sparks,
html.legacy-browser .hero-logo-sparks,
html.legacy-browser .social-dragon,
html.legacy-browser .season-pulse,
html.legacy-browser .monthly-pass-launch::after {
  display: none !important;
}

.legacy-footer-jump { display: none; }
html.legacy-browser .legacy-footer-jump {
  position: fixed;
  z-index: 9990;
  right: auto;
  bottom: 12px;
  left: 12px;
  display: block;
  min-width: 92px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid #d49332;
  color: #ffe09b;
  background: #260b0b;
  box-shadow: 0 5px 14px rgba(0, 0, 0, .6);
  font: 700 11px/32px Arial, sans-serif;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
}

html.legacy-browser .topbar {
  position: relative;
  height: 94px;
  min-height: 94px;
  padding: 0;
  display: block;
  overflow: visible;
}

html.legacy-browser .topbar .brand {
  position: absolute;
  z-index: 12;
  top: 0;
  left: 50%;
  width: 210px;
  height: 92px;
  margin-left: -105px;
  display: block;
  transform: none;
}

html.legacy-browser .topbar .brand img {
  width: 205px;
  height: 90px;
  display: block;
  object-fit: contain;
}

html.legacy-browser .topbar .brand > span { display: none; }

html.legacy-browser .topbar .nav {
  position: relative;
  z-index: 8;
  width: 960px;
  height: 94px;
  margin: 0 auto;
  padding: 0;
  display: block;
}

html.legacy-browser .nav-wing {
  position: absolute;
  top: 0;
  width: 370px;
  height: 94px;
  display: block;
  white-space: nowrap;
}

html.legacy-browser .nav-wing-left { left: 0; text-align: right; }
html.legacy-browser .nav-wing-right { right: 0; text-align: left; }

html.legacy-browser .topbar .nav button,
html.legacy-browser .topbar .nav a,
html.legacy-browser .topbar .nav .download-link {
  min-height: 0;
  height: 94px;
  padding: 0 11px;
  display: inline-block;
  border: 0;
  background: transparent;
  box-shadow: none;
  font: 700 11px/94px Georgia, serif;
  vertical-align: top;
}

html.legacy-browser .social-orbit {
  z-index: 15;
  top: 57px;
}

html.legacy-browser .hero {
  position: relative;
  height: 950px;
  min-height: 950px;
  display: block;
  overflow: hidden;
  background-color: #110607;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
}

html.legacy-browser .logo-wrap,
html.legacy-browser .hero-logo-sparks {
  position: absolute;
  top: 28px;
  left: 50%;
  width: 520px;
  height: 315px;
  margin-left: -570px;
  transform: none;
}

html.legacy-browser .logo-wrap img {
  width: 510px;
  height: 300px;
  display: block;
  object-fit: contain;
}

html.legacy-browser .hero-logo-sparks { display: block !important; }

html.legacy-browser .hero-copy {
  position: absolute;
  top: 330px;
  left: 50%;
  width: 520px;
  margin-left: -560px;
  padding: 22px 28px;
  display: block;
  text-align: left;
}

html.legacy-browser .hero-copy p { max-width: 470px; }
html.legacy-browser .hero-status { display: block; }
html.legacy-browser .hero-status i,
html.legacy-browser .hero-status span,
html.legacy-browser .hero-status small { display: inline-block; vertical-align: middle; }
html.legacy-browser .hero-ctas { display: block; }
html.legacy-browser .hero-ctas button,
html.legacy-browser .hero-ctas a { display: inline-block; vertical-align: top; }

html.legacy-browser .hero-grid {
  position: absolute;
  z-index: 8;
  top: 210px;
  right: 50%;
  left: auto;
  width: 370px;
  margin-right: -570px;
  display: block;
}

html.legacy-browser .hero-grid .panel {
  width: 370px;
  min-height: 414px;
  margin: 0;
  display: block;
}

html.legacy-browser .login-card { display: block; }
html.legacy-browser .login-card > * { margin-bottom: 10px; }
html.legacy-browser .login-field-row { display: block; position: relative; }
html.legacy-browser .login-field-icon { position: absolute; top: 0; left: 0; height: 47px; display: block; padding: 12px; }
html.legacy-browser .login-field-row .field { width: 100%; padding-left: 60px; }
html.legacy-browser .panel-actions { display: block; overflow: hidden; }
html.legacy-browser .panel-actions > a,
html.legacy-browser .panel-actions > button { float: left; width: 48%; margin: 0 1% 8px; }
html.legacy-browser .panel-actions .play-game-panel-btn { float: none; clear: both; width: 100%; }

html.legacy-browser .dynasty-portals {
  position: absolute;
  right: auto;
  bottom: 124px;
  left: 50%;
  width: 1140px;
  margin-left: -570px;
  display: block;
  overflow: hidden;
}

html.legacy-browser .dynasty-portals .dynasty-portal {
  float: left;
  width: 272px;
  min-height: 92px;
  margin: 0 6px;
  display: block;
  position: relative;
  padding: 23px 12px 12px 80px;
  text-align: left;
}

html.legacy-browser .dynasty-portals .dynasty-glyph { position: absolute; top: 20px; left: 18px; }
html.legacy-browser .monthly-pass-launch {
  position: absolute;
  right: auto;
  bottom: 28px;
  left: 50%;
  width: 700px;
  margin-left: -350px;
  display: block;
  padding: 14px 145px 12px 82px;
  transform: none;
}

html.legacy-browser .monthly-pass-seal { position: absolute; top: 9px; left: 12px; }
html.legacy-browser .monthly-pass-launch em { position: absolute; top: 17px; right: 15px; }

html.legacy-browser .portal-columns,
html.legacy-browser .world-grid,
html.legacy-browser .trust-panel,
html.legacy-browser .monthly-pass-steps,
html.legacy-browser .monthly-reward-legend,
html.legacy-browser .monthly-calendar { display: block; overflow: hidden; }

html.legacy-browser .portal-columns .portal-card { float: left; width: 48%; margin: 0 1% 20px; }
html.legacy-browser .world-grid .world-card { float: left; width: 31.333%; margin: 0 1%; min-height: 315px; }
html.legacy-browser .trust-panel > div { float: left; width: 25%; min-height: 104px; display: block; }
html.legacy-browser .trust-panel .trust-icon { float: left; margin: 12px 16px 18px 0; }

html.legacy-browser .monthly-pass-steps li { float: left; width: 24%; margin-right: 1%; }
html.legacy-browser .monthly-reward-legend > span { float: left; width: 19%; margin-right: 1%; min-height: 82px; }
html.legacy-browser .monthly-calendar .monthly-day { float: left; width: 13.28%; margin: 3px .5%; }
html.legacy-browser .monthly-pass-toolbar { display: block; overflow: hidden; }
html.legacy-browser .monthly-pass-toolbar > * { display: inline-block; margin-right: 12px; vertical-align: middle; }
html.legacy-browser .monthly-pass-actionbar { position: relative !important; bottom: auto; }

html.legacy-browser .modal { position: fixed; }
html.legacy-browser .modal-card { position: relative; margin: 24px auto; }

@media (max-width: 1100px) {
  html.legacy-browser,
  html.legacy-browser body { min-width: 760px; }
  html.legacy-browser .topbar .nav { width: 760px; }
  html.legacy-browser .nav-wing { width: 280px; }
  html.legacy-browser .topbar .nav button,
  html.legacy-browser .topbar .nav a,
  html.legacy-browser .topbar .nav .download-link { padding: 0 6px; font-size: 9px; }
  html.legacy-browser .logo-wrap,
  html.legacy-browser .hero-logo-sparks { margin-left: -490px; }
  html.legacy-browser .hero-copy { margin-left: -480px; }
  html.legacy-browser .hero-grid { margin-right: -480px; }
  html.legacy-browser .dynasty-portals { width: 960px; margin-left: -480px; }
  html.legacy-browser .dynasty-portals .dynasty-portal { width: 228px; margin: 0 6px; padding-left: 72px; }
}