.village-page {
  --village-edge: #5d3b52;
  background:
    radial-gradient(ellipse at 50% 10%, #3b244b55, transparent 60%), #0c0d16;
}
.village-page[data-theme="1"] {
  background:
    radial-gradient(ellipse at 50% 0, #18434366, transparent 70%), #0d141b;
}
.village-page[data-theme="2"] {
  background:
    radial-gradient(ellipse at 50% 0, #4b2b6666, transparent 70%), #14101f;
}
.village-page[data-theme="3"] {
  background:
    radial-gradient(ellipse at 50% 0, #69263b66, transparent 70%), #160e19;
}
.village-nav {
  max-width: 1440px;
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 22px 30px;
  margin: auto;
  border-bottom: 1px solid #4b3045;
}
.village-nav > nav {
  display: flex;
  gap: 6px;
  margin-left: 30px;
}
.village-nav > nav button {
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #a995b1;
  padding: 8px 18px;
}
.village-nav > nav button[aria-selected="true"] {
  background: #5a233d;
  color: #f9d7e3;
  border-bottom: 2px solid #f05d81;
}
.village-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
}
.village-actions button {
  background: #171420;
  font-size: 12px;
}
.village-actions #hub-music,
.village-actions #settings-open {
  width: 44px;
  padding: 8px;
  font-size: 20px;
}
.village-main {
  max-width: 1380px;
  margin: auto;
  padding: 0 28px;
}
.village-welcome {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 30px;
  padding: 44px 0 32px;
}
.village-eyebrow {
  font-size: 9px;
  letter-spacing: 3px;
  color: #b890ab;
}
.village-welcome h1 {
  font: clamp(46px, 5vw, 76px) / 0.9 var(--pixel-font);
  margin-top: 14px;
  letter-spacing: 1px;
}
.village-welcome h1 em {
  font-style: normal;
  color: #f27d9e;
}
.village-copy {
  padding-bottom: 5px;
}
.village-copy > p {
  color: #baa9bd;
  font-size: 13px;
  line-height: 1.9;
}
.village-copy > #account-state {
  display: block;
  font-size: 10px;
  color: #d3adbf;
  margin-top: 18px;
}
.village-scene {
  position: relative;
  border: 2px solid #60415f;
  border-radius: 8px;
  overflow: hidden;
  box-shadow:
    0 0 0 4px #070c16,
    0 20px 70px #0005;
  background: #111a2b;
}
.village-scene > canvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  image-rendering: pixelated;
}
.village-doors {
  position: absolute;
  inset: 27% 2% 18%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5%;
}
.village-doors > button {
  position: relative;
  border: 1px solid transparent;
  background: transparent;
  box-shadow: none;
  padding: 0;
  display: flex;
  align-items: end;
  justify-content: center;
  transition: filter 0.15s;
}
.village-doors > button:hover {
  background: transparent;
  border-color: transparent;
  filter: none;
}
.village-doors > button:focus-visible {
  outline: 0;
  background: transparent;
  box-shadow: none;
}
.village-doors > button:is(:hover, :focus-visible) > span {
  color: #fff1ce;
  border-color: transparent;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.village-doors > button > span {
  background: #10131dea;
  border: 1px solid #846078;
  padding: 9px 16px;
  color: #cc99b6;
  font-size: 8px;
  letter-spacing: 1.7px;
  box-shadow: 0 3px #0007;
  white-space: nowrap;
}
.village-doors small {
  display: block;
  font: 21px / 1.2 var(--pixel-font);
  letter-spacing: 0.2px;
  color: #fce9dd;
  margin-top: 3px;
}
.village-scene-note {
  position: absolute;
  inset: 12px 16px auto;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 8px;
  letter-spacing: 1px;
  color: #bda2b5;
  pointer-events: none;
}
.village-scene-note i {
  height: 5px;
  width: 5px;
  background: #89bdab;
  box-shadow: 0 0 10px #89bdab;
}
.village-scene-note span {
  margin-left: auto;
  color: #9c8da6;
}
.village-games {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-top: 34px;
}
.village-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: auto;
  background: linear-gradient(145deg, #211927, #14121e);
  border: 1px solid #60405a;
  border-radius: 7px;
  overflow: hidden;
  transition:
    translate 0.2s,
    border-color 0.2s;
}
.village-card:hover {
  translate: 0 -3px;
  border-color: #bd6289;
}
.card-art {
  display: block;
  flex: none;
  height: 170px;
  width: 100%;
  overflow: hidden;
  border-bottom: 1px solid #60405a;
  background: #171422;
}
.card-art img {
  display: block;
  width: 100%;
  height: 170px;
  max-width: 100%;
  max-height: 170px;
  object-fit: cover;
  image-rendering: pixelated;
}
.card-copy {
  display: flex;
  flex-direction: column;
  padding: 22px;
  flex: 1;
  min-width: 0;
}
.card-tag {
  font-size: 8px;
  letter-spacing: 1.4px;
  color: #b79ab3;
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.card-tag b {
  font-weight: normal;
  color: #d293b6;
}
.card-copy h2 {
  font: 34px / 1 var(--pixel-font);
  margin: 15px 0 11px;
  min-height: 35px;
}
.card-copy h2 img {
  display: block;
  width: min(100%, 200px);
  height: 40px;
  object-fit: contain;
  object-position: left;
  image-rendering: pixelated;
}
.card-copy > p {
  font-size: 12px;
  line-height: 1.8;
  color: #bcaabd;
  min-height: 65px;
  margin-bottom: 20px;
}
.card-copy > button {
  margin-top: auto;
  width: 100%;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #50213c;
  border-color: #925072;
  font-size: 12px;
}
.card-copy > button:hover {
  background: #7c2a50;
}
.card-copy > button span {
  font-size: 20px;
}
.village-footnote {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 28px 0;
}
.village-footnote p {
  font-size: 11px;
  color: #92839e;
  line-height: 1.8;
}
.village-footnote button {
  margin-left: auto;
  white-space: nowrap;
}
.village-footer {
  max-width: 1380px;
  display: flex;
  align-items: center;
  gap: 30px;
  justify-content: space-between;
  padding: 22px 28px;
  margin: 0 auto;
  border-top: 1px solid #40283b;
  color: #b5a0b3;
  font-size: 11px;
}
.village-footer > button {
  border: 0;
  background: transparent;
  box-shadow: none;
  font-size: 11px;
  color: #c4a2b7;
}
.rank-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  min-height: 400px;
}
.rank-columns > section {
  padding: 25px;
  background: #191423;
  border: 1px solid #62405c;
  border-radius: 6px;
}
.rank-columns h2 {
  font: 34px var(--pixel-font);
}
.rank-columns ol {
  padding: 20px 0 0;
  list-style-position: inside;
  color: #bca5bd;
  font-size: 12px;
}
.rank-columns li {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid #3e2b41;
}
.rank-columns strong {
  color: #ecc195;
}
#hub-settings select {
  display: block;
  width: 100%;
  margin: 8px 0;
}
#hub-settings input[type="range"] {
  display: block;
  width: 100%;
  accent-color: #ed315a;
}
#hub-settings .check-label {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
}
#hub-settings .check-label input {
  width: auto;
  accent-color: #ed315a;
}
#hub-settings output {
  float: right;
  font-size: 12px;
  color: #de8ead;
}
@media (max-width: 900px) {
  .village-nav {
    gap: 16px;
    padding: 18px;
  }
  .village-nav > nav {
    margin-left: 0;
  }
  .village-nav > nav button {
    padding: 8px 12px;
  }
  .village-games {
    gap: 12px;
  }
  .card-copy {
    padding: 16px;
  }
  .card-copy h2 {
    font-size: 29px;
  }
  .card-art,
  .card-art img {
    height: 140px;
    max-height: 140px;
  }
  .village-main {
    padding: 0 18px;
  }
  .village-doors small {
    font-size: 17px;
  }
  .village-doors > button > span {
    padding: 7px 10px;
    font-size: 6px;
  }
  .village-welcome {
    padding: 30px 0 25px;
  }
  .village-copy {
    max-width: 240px;
  }
  .village-welcome h1 {
    font-size: 54px;
  }
}
@media (max-width: 600px) {
  .village-nav {
    padding: 12px;
    gap: 12px;
    flex-wrap: wrap;
  }
  .village-nav .rr-brand {
    font-size: 21px;
  }
  .village-nav .rr-brand img {
    width: 35px;
    height: 35px;
  }
  .village-nav > nav {
    order: 3;
    width: 100%;
    justify-content: center;
    border-top: 1px solid #3b2a40;
    padding-top: 9px;
  }
  .village-nav > nav button {
    min-height: 36px;
    font-size: 12px;
    min-width: 100px;
  }
  .village-actions {
    gap: 5px;
  }
  .village-actions button {
    padding: 5px 10px;
    min-height: 38px;
    font-size: 10px;
  }
  .village-actions #hub-music,
  .village-actions #settings-open {
    width: 34px;
    font-size: 17px;
    padding: 4px;
  }
  .village-main {
    padding: 0 12px;
  }
  .village-welcome {
    display: block;
    padding: 26px 2px 22px;
  }
  .village-welcome h1 {
    font-size: 48px;
  }
  .village-eyebrow {
    font-size: 7px;
    letter-spacing: 2px;
  }
  .village-copy {
    max-width: none;
    margin-top: 18px;
  }
  .village-copy > p {
    font-size: 11px;
  }
  .village-copy > #account-state {
    display: none;
  }
  .village-scene {
    border-radius: 4px;
  }
  .village-scene > canvas {
    aspect-ratio: 2 / 1;
  }
  .village-doors {
    inset: 28% 1% 17%;
    gap: 0;
  }
  .village-doors > button > span {
    padding: 5px 4px;
    letter-spacing: 0.5px;
    font-size: 5px;
  }
  .village-doors small {
    font-size: 11px;
  }
  .village-scene-note {
    font-size: 5px;
    inset: auto 8px 7px;
    gap: 5px;
  }
  .village-scene-note span {
    display: none;
  }
  .village-games {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-top: 24px;
  }
  .card-art,
  .card-art img {
    height: auto;
    aspect-ratio: 16 / 8;
    max-height: 210px;
    min-height: 150px;
  }
  .card-copy {
    padding: 20px;
  }
  .card-copy h2 {
    font-size: 34px;
  }
  .card-copy p {
    min-height: 0;
  }
  .card-tag {
    font-size: 8px;
  }
  .village-footnote {
    display: block;
    padding: 20px 0;
  }
  .village-footnote button {
    margin-top: 12px;
  }
  .village-footer {
    padding: 18px 12px;
    gap: 15px;
    flex-wrap: wrap;
    font-size: 10px;
  }
  .village-footer > span {
    display: none;
  }
  .rank-columns {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .rank-columns > section {
    padding: 18px;
  }
}
.village-progression {
  margin: 32px 0 48px;
  padding: 28px;
  border: 1px solid #63425a;
  background: linear-gradient(135deg, #241a2c, #10131d);
  border-radius: 8px;
}
.economy-heading,
.raid-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.village-progression h2 {
  font: 36px / 1.1 var(--pixel-font);
  margin: 10px 0;
  color: #ffcfac;
}
.village-progression p {
  color: #c5b7cc;
  font-size: 13px;
  line-height: 1.7;
  max-width: 900px;
}
.coin-bank {
  color: #f6d885;
  font-size: 16px;
}
.coin-bank strong {
  font: 36px var(--pixel-font);
}
.coin-bank small {
  display: block;
  color: #c0a6b7;
  font-size: 12px;
}
.cabin-shop {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 24px 0;
}
.cabin-shop article {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #11131e;
  padding: 20px;
  border: 1px solid #694356;
  border-radius: 6px;
}
.cabin-shop article > span {
  color: #d8a8c1;
  font-size: 12px;
}
.cabin-shop strong {
  font: 25px var(--pixel-font);
}
.cabin-shop small {
  color: #b8acbf;
  min-height: 32px;
}
.cabin-shop button {
  margin-top: auto;
}
.cabin-steps {
  display: flex;
  gap: 5px;
}
.cabin-steps i {
  width: 18%;
  height: 6px;
  background: #382938;
}
.cabin-steps .built {
  background: #f0c366;
}
.wardrobe {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.wardrobe select {
  max-width: 100%;
  padding: 12px;
  background: #16131f;
  color: #f3dfdf;
  border: 1px solid #795165;
  font: inherit;
}
.raid-camp {
  border-top: 1px solid #694356;
  margin-top: 24px;
  padding-top: 24px;
}
.raid-heading > div:last-child {
  display: flex;
  gap: 12px;
  flex-direction: column;
}
.raid-heading span {
  font-size: 12px;
  color: #c4abc5;
}
#raid-stage {
  width: 100%;
  height: auto;
  image-rendering: pixelated;
  border: 1px solid #5a3e58;
  display: block;
  border-radius: 6px;
}
.raid-meter {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 15px 0;
}
.raid-meter span {
  font-size: 12px;
  display: block;
  margin-bottom: 6px;
}
.raid-meter progress {
  width: 100%;
  accent-color: #f07594;
  height: 12px;
}
.raid-upgrades {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.raid-upgrades > span {
  color: #c7a4ee;
}
.raid-loot {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 18px 0;
}
.raid-loot span {
  font-size: 11px;
  padding: 8px;
  border: 1px solid #383341;
  color: #827889;
}
.raid-loot .unlocked {
  color: var(--loot-color);
  border-color: var(--loot-color);
}
.raid-camp > small {
  color: #a699af;
  font-size: 11px;
  line-height: 1.6;
  display: block;
}
html:not([data-village-skin="classic"])[data-village-skin] .village-page {
  background:
    radial-gradient(ellipse at 50% 10%, var(--skin-shadow), transparent 75%),
    #0c0d16;
}
html:not([data-village-skin="classic"])[data-village-skin] .village-scene {
  border-color: var(--skin-accent);
}
@media (max-width: 700px) {
  .village-progression {
    padding: 16px;
  }
  .cabin-shop {
    grid-template-columns: 1fr;
  }
  .cabin-shop article {
    padding: 16px;
  }
  .raid-meter {
    grid-template-columns: 1fr;
  }
  .village-progression h2 {
    font-size: 30px;
  }
  .raid-upgrades button {
    width: 100%;
  }
  .raid-camp canvas {
    min-height: 130px;
    object-fit: cover;
  }
}
.raid-party {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 16px 0;
}
.raid-party article {
  display: grid;
  grid-template-columns: 52px 1fr;
  align-items: center;
  column-gap: 8px;
  background: #12131e;
  border: 1px solid #735067;
  padding: 10px;
  border-radius: 5px;
}
.raid-party img {
  grid-row: span 2;
  image-rendering: pixelated;
  width: 52px;
  height: 52px;
}
.raid-party strong {
  font: 22px var(--pixel-font);
}
.raid-party small {
  font-size: 11px;
  color: #c1afc8;
  line-height: 1.5;
}
.raid-party .locked {
  opacity: 0.45;
  filter: grayscale(1);
}
.raid-meter progress {
  display: block;
  border: 0;
  overflow: hidden;
  border-radius: 0;
  appearance: none;
  background: #352938;
}
.raid-meter progress::-webkit-progress-bar {
  background: #352938;
}
.raid-meter progress::-webkit-progress-value {
  background: #ed789e;
  transition: width 0.25s linear;
}
.raid-meter progress::-moz-progress-bar {
  background: #ed789e;
}
.raid-meter > div:nth-child(2) progress::-webkit-progress-value {
  background: #e5bc78;
}
@media (max-width: 900px) {
  .raid-party {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 400px) {
  .raid-party article {
    grid-template-columns: 1fr;
  }
  .raid-party img {
    grid-row: auto;
  }
  .raid-party strong {
    font-size: 20px;
  }
}

/* Expedições: habilidade ativa e palco */
#raid-skill {
  margin-left: 8px;
  border-color: #e6c36a;
  color: #fff1b8;
}
#raid-skill:disabled {
  opacity: 0.55;
}
#raid-stage {
  image-rendering: pixelated;
  box-shadow:
    0 0 0 2px #05060b,
    0 0 24px #0008 inset;
}

/* Equipamento, baús e mochila */
.raid-gear {
  display: grid;
  gap: 12px;
  margin: 14px 0;
}
.gear-top {
  display: grid;
  grid-template-columns: 1fr 1fr 1.4fr;
  gap: 10px;
}
.gear-slot,
.gear-chests,
.bag-item {
  border: 1px solid #ffffff22;
  border-radius: 8px;
  background: #0d0f1acc;
  padding: 10px;
}
.gear-slot {
  display: grid;
  grid-template-columns: 48px 1fr;
  grid-template-rows: auto auto auto;
  column-gap: 10px;
  align-items: center;
  border-color: var(--rarity, #ffffff22);
  min-height: 80px;
}
.gear-slot small {
  grid-column: 1 / -1;
  opacity: 0.7;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.68rem;
}
.gear-slot img,
.bag-item img,
.gear-chests img {
  image-rendering: pixelated;
  grid-row: 2 / 4;
}
.gear-slot strong {
  color: var(--rarity, #fff);
}
.gear-slot em {
  grid-column: 1 / -1;
  opacity: 0.55;
}
.gear-slot span {
  font-size: 0.78rem;
  opacity: 0.85;
}
.gear-chests {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 6px 10px;
  align-items: center;
}
.gear-chests img {
  grid-row: 1 / 3;
}
.gear-chests div {
  display: grid;
}
.gear-chests small {
  opacity: 0.7;
}
.gear-chests button {
  grid-column: 1 / -1;
}
.raid-bag {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
}
.raid-bag > p {
  grid-column: 1 / -1;
  opacity: 0.6;
}
.bag-item {
  display: grid;
  gap: 4px;
  justify-items: start;
  border-color: var(--rarity, #ffffff22);
}
.bag-item.worn {
  box-shadow: inset 0 0 0 1px var(--rarity);
}
.bag-item strong {
  color: var(--rarity);
  font-size: 0.82rem;
}
.bag-item small {
  opacity: 0.75;
}
.bag-item button {
  width: 100%;
  font-size: 0.74rem;
  padding: 4px 6px;
}
@media (max-width: 720px) {
  .gear-top {
    grid-template-columns: 1fr;
  }
}
.bag-item img {
  width: 40px;
  height: 40px;
}
.gear-slot img,
.gear-chests img {
  width: 48px;
  height: 48px;
}

/* Parceiros com slots próprios, diálogos e árvore de habilidades */
.gear-top {
  grid-template-columns: 1.6fr 1fr;
}
.gear-actions {
  display: grid;
  align-content: center;
  gap: 8px;
}
.gear-actions #raid-relics {
  font-size: 0.82rem;
  opacity: 0.85;
}
.raid-party article {
  align-content: start;
}
.hero-slots {
  display: grid;
  gap: 6px;
  width: 100%;
  margin-top: 8px;
}
.slot-btn {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 8px;
  align-items: center;
  text-align: left;
  padding: 4px 6px;
  border: 1px dashed #ffffff33;
  border-radius: 6px;
  background: #0d0f1acc;
  font-size: 0.72rem;
  cursor: pointer;
}
.slot-btn.filled {
  border: 1px solid var(--rarity, #ffffff55);
}
.slot-btn img,
.dialog-item img,
.bag-item img {
  image-rendering: pixelated;
}
.slot-btn img {
  width: 32px;
  height: 32px;
}
.slot-btn.shiny,
.bag-item.shiny,
.dialog-item.shiny {
  box-shadow:
    0 0 10px #ffe58a99,
    inset 0 0 8px #ffe58a33;
  animation: shiny-glow 2.2s ease-in-out infinite;
}
@keyframes shiny-glow {
  50% {
    box-shadow:
      0 0 16px #fff2b8cc,
      inset 0 0 12px #ffe58a55;
  }
}
@media (prefers-reduced-motion: reduce) {
  .slot-btn.shiny,
  .bag-item.shiny,
  .dialog-item.shiny {
    animation: none;
  }
}
.raid-dialog {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  background: #05060bcc;
  padding: 16px;
}
.raid-dialog[hidden] {
  display: none;
}
.dialog-card {
  width: min(760px, 100%);
  max-height: 86vh;
  overflow: auto;
  border: 1px solid #ffffff33;
  border-radius: 10px;
  background: #11131f;
  padding: 16px;
}
.dialog-card header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.dialog-item {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--rarity, #ffffff22);
  border-radius: 8px;
  padding: 8px;
  margin-top: 8px;
}
.dialog-item strong {
  color: var(--rarity);
}
.dialog-item small {
  display: block;
  opacity: 0.8;
}
.skill-tree {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.skill-tree h4 {
  margin: 0 0 8px;
  color: var(--branch);
}
.skill-node {
  display: grid;
  gap: 2px;
  width: 100%;
  margin-bottom: 8px;
  text-align: left;
  border-color: var(--branch);
}
.skill-node em {
  font-style: normal;
  color: #ffd45a;
}
.skill-node.bought {
  background: #1d3a2a;
}
.skill-node.locked {
  opacity: 0.45;
}
@media (max-width: 720px) {
  .skill-tree {
    grid-template-columns: 1fr;
  }
  .gear-top {
    grid-template-columns: 1fr;
  }
}
.raid-stage-pick {
  display: grid;
  gap: 4px;
  font-size: 0.74rem;
  opacity: 0.9;
  margin-top: 6px;
}
.raid-stage-pick select {
  max-width: 100%;
}