.guide-dialog {
  max-width: 900px;
  width: calc(100% - 30px);
  max-height: 90dvh;
  overflow: auto;
  padding: 30px;
  border: 1px solid white;
  border-radius: 24px;
  background: #fffdf4;
  color: #31553f;
  box-shadow: 0 30px 100px #173b3d55;
}
.guide-dialog::backdrop {
  background: #193e42a6;
  backdrop-filter: blur(9px);
}
.guide-dialog h2 {
  font-size: 26px;
  line-height: 1.45;
  margin: 13px 0;
}
.guide-dialog p {
  font-size: 13px;
  line-height: 1.8;
  color: #7a866c;
}
.guide-dialog .primary,
.guide-dialog .choice {
  font-size: 13px;
  margin-top: 10px;
}
.guide-conversation {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 28px;
  clear: both;
}
.guide-conversation aside {
  padding-top: 25px;
  text-align: center;
}
.guide-conversation aside > strong {
  display: block;
  font-size: 17px;
  margin-top: 12px;
}
.guide-conversation aside > small {
  display: block;
  font-size: 10px;
  line-height: 1.7;
  color: #9a8a62;
  margin-top: 7px;
}
.guide-portrait {
  display: block;
  width: 170px;
  height: 190px;
  background-size: 300% 400%;
  background-repeat: no-repeat;
  filter: drop-shadow(0 5px 5px #65573715);
  margin: auto;
}
.guide-portrait-vn {
  background-image: url("../assets/game/guides-vn.png");
}
.guide-portrait-id {
  background-image: url("../assets/game/guides-id.png");
}
.guide-portrait-tw {
  background-image: url("../assets/game/guides-tw.png");
}
.guide-speech {
  border: 1px solid #e1e8d5;
  background: #eff3e6;
  color: #526e4d;
  border-radius: 15px;
  padding: 20px;
  line-height: 1.9;
  font-size: 16px;
  margin: 20px 0;
}
.guide-story-dots {
  display: flex;
  gap: 8px;
  margin: 20px 0;
}
.guide-story-dots i {
  width: 35px;
  height: 4px;
  border-radius: 4px;
  background: #e2e8d6;
}
.guide-story-dots .done {
  background: #80a16d;
}
.guide-reward-preview {
  display: flex;
  gap: 15px;
  align-items: center;
  border: 1px solid #e6dcba;
  background: #f9f3df;
  border-radius: 15px;
  padding: 12px;
}
.guide-reward-preview small,
.guide-reward-preview strong,
.guide-reward-preview span {
  display: block;
}
.guide-reward-preview small {
  font-size: 10px;
  color: #aa8d4d;
}
.guide-reward-preview strong {
  font-size: 16px;
  margin: 7px 0;
  color: #6e663b;
}
.guide-reward-preview div > span {
  font-size: 10px;
  color: #9d946c;
}
.guide-reward-preview .guide-gift-art {
  width: 90px;
  height: 90px;
  margin: 0;
}
.guide-game-header {
  display: flex;
  align-items: center;
  gap: 18px;
  clear: both;
}
.guide-game-header .guide-portrait {
  width: 80px;
  height: 90px;
  margin: 0;
}
.guide-game-header h2 {
  font-size: 24px;
}
.guide-game-header small {
  font-size: 10px;
  color: #a18b59;
}
#guide-game-feedback:not(:empty) {
  padding: 13px 16px;
  margin: 15px 0;
  background: #eaf0de;
  border-radius: 10px;
  color: #638052;
  font-size: 13px;
  line-height: 1.8;
}
.guide-sequence {
  display: flex;
  gap: 10px;
  margin: 20px 0;
}
.guide-sequence > span {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  flex: 1;
  gap: 8px;
  padding: 20px 10px;
  border: 1px solid #e6dfc5;
  background: #faf4e2;
  border-radius: 12px;
  font-size: 14px;
}
.guide-sequence small {
  font-size: 11px;
  color: #aa8b54;
}
.guide-rhythm {
  display: flex;
  gap: 10px;
}
.guide-rhythm button {
  flex: 1;
  border: 1px solid #cfdcc2;
  background: #e6eedb;
  color: #456d48;
  border-radius: 12px;
  padding: 18px 8px;
  min-height: 60px;
  font-size: 13px;
}
.guide-match-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.guide-match-columns > div {
  display: grid;
  gap: 12px;
}
.guide-match-columns button {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid #d9e2ca;
  background: #f7f9ec;
  color: #52734f;
  padding: 12px;
  border-radius: 13px;
  min-height: 85px;
  text-align: left;
  font-size: 14px;
}
.guide-match-columns .country-item {
  margin: 0;
  width: 65px;
  height: 65px;
  flex-shrink: 0;
}
.guide-match-columns .selected {
  border-color: #75935b;
  box-shadow: 0 0 0 2px #9bbd7e33;
}
.guide-match-columns button:disabled {
  background: #e4edd7;
  opacity: 0.6;
}
.guide-win {
  max-width: 630px;
  text-align: center;
  margin: auto;
  clear: both;
}
.guide-win .guide-gift-art {
  width: 180px;
  height: 180px;
  margin: 15px auto;
}
.guide-win > strong {
  display: block;
  font-size: 20px;
  color: #977f47;
}
.guide-gift-book section {
  margin-top: 25px;
}
.guide-gift-book h3 {
  font-size: 18px;
}
.guide-gift-book section > div {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.guide-gift-book article {
  padding: 15px 8px;
  border: 1px solid #e0e6d1;
  background: #f7f8eb;
  border-radius: 13px;
  text-align: center;
}
.guide-gift-book article > strong {
  display: block;
  font-size: 11px;
  margin: 8px 0;
}
.guide-gift-book article > small {
  font-size: 9px;
  color: #869472;
}
.guide-gift-book .country-item {
  width: 100px;
  height: 100px;
}
.guide-gift-book .locked .country-item {
  filter: grayscale(1);
  opacity: 0.2;
}
.guide-gift-button {
  position: absolute;
  top: 485px;
  left: 185px;
  display: flex;
  gap: 8px;
  align-items: center;
  z-index: 30;
  border: 1px solid white;
  background: #fff8e4e8;
  color: #8b7747;
  padding: 6px 12px;
  border-radius: 13px;
  font-size: 10px;
  min-height: 48px;
}
.guide-gift-button .item-art {
  width: 32px;
  height: 32px;
}
.guide-gift-button small {
  font-size: 8px;
  color: #a4956d;
  display: block;
  margin-top: 4px;
}
.guide-proximity-bubble {
  position: absolute;
  z-index: 18;
  pointer-events: auto;
  width: 220px;
  max-width: 70vw;
  padding: 12px;
  background: #fffdf0f5;
  border: 1px solid #eadab2;
  border-radius: 14px;
  box-shadow: 0 8px 22px #26493c22;
  color: #6d704a;
}
.guide-proximity-bubble[hidden] {
  display: none;
}
.guide-proximity-bubble small {
  font-size: 9px;
  color: #a6874e;
}
.guide-proximity-bubble p {
  font-size: 11px;
  line-height: 1.7;
  margin: 8px 0;
  color: #6f7f5b;
}
.guide-proximity-bubble button {
  border: 0;
  border-radius: 8px;
  background: #67865b;
  color: white;
  padding: 8px 10px;
  font-size: 10px;
  min-height: 32px;
}
.guide-proximity-bubble button + button {
  background: #ecefdf;
  color: #7f896c;
  margin-left: 6px;
}
.watching-show .guide-gift-button,
.watching-show .guide-proximity-bubble {
  display: none;
}
.friend-card .guide-portrait {
  width: 90px;
  height: 100px;
}
.friend-card > strong {
  font-size: 13px;
}
.friend-card > small {
  font-size: 10px;
}
@media (max-width: 900px) {
  .guide-gift-button {
    top: 285px;
    left: 160px;
    min-height: 40px;
    padding: 4px 8px;
    font-size: 9px;
  }
  .guide-gift-button .item-art {
    width: 28px;
    height: 28px;
  }
  .guide-dialog {
    padding: 24px;
    max-height: 92dvh;
  }
  .guide-conversation {
    grid-template-columns: 125px 1fr;
    gap: 18px;
  }
  .guide-conversation .guide-portrait {
    width: 125px;
    height: 140px;
  }
  .guide-dialog h2 {
    font-size: 24px;
  }
  .guide-speech {
    font-size: 14px;
    padding: 16px;
  }
  .guide-gift-book section > div {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .guide-proximity-bubble {
    width: 190px;
    padding: 10px;
  }
}
@media (max-width: 550px) {
  .guide-conversation {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .guide-conversation aside {
    display: grid;
    grid-template-columns: 80px 1fr;
    column-gap: 12px;
    padding-top: 0;
    text-align: left;
    align-items: center;
  }
  .guide-conversation aside .guide-portrait {
    width: 80px;
    height: 90px;
    grid-row: 1/3;
    margin: 0;
  }
  .guide-conversation aside > strong {
    font-size: 16px;
    margin: 0;
    align-self: end;
  }
  .guide-conversation aside > small {
    margin: 2px 0 8px;
    align-self: start;
  }
  .guide-dialog {
    padding: 20px;
  }
  .guide-dialog h2 {
    font-size: 22px;
  }
  .guide-speech {
    font-size: 14px;
    margin: 14px 0;
    padding: 14px;
  }
  .guide-reward-preview .guide-gift-art {
    width: 70px;
    height: 70px;
    flex-shrink: 0;
  }
  .guide-reward-preview strong {
    font-size: 14px;
  }
  .guide-reward-preview div > span {
    font-size: 9px;
  }
  .guide-game-header {
    gap: 10px;
  }
  .guide-game-header h2 {
    font-size: 21px;
  }
  .guide-game-header .guide-portrait {
    width: 65px;
    height: 75px;
    flex-shrink: 0;
  }
  .guide-rhythm button {
    font-size: 11px;
    min-height: 55px;
  }
  .guide-sequence > span {
    padding: 14px 5px;
    font-size: 11px;
  }
  .guide-match-columns {
    gap: 10px;
  }
  .guide-match-columns button {
    padding: 8px;
    font-size: 11px;
    gap: 7px;
    min-height: 75px;
  }
  .guide-match-columns .country-item {
    width: 45px;
    height: 45px;
  }
  .guide-gift-book section > div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .guide-gift-book .country-item {
    width: 90px;
    height: 90px;
  }
  .guide-gift-button {
    left: 155px;
  }
  .guide-proximity-bubble {
    max-width: 170px;
  }
}
.village-directory .vn-festival-launcher {
  position: static;
  left: auto;
  top: auto;
  width: 100%;
  display: block;
  margin-top: 6px;
  min-height: 36px;
  padding: 9px 0;
  border: 0;
  border-top: 1px solid #dedfc8;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-align: left;
  font-size: 11px;
}
.village-directory .vn-festival-launcher > span {
  display: none;
}
.village-directory .vn-festival-launcher > small {
  font-size: 8px;
  margin-top: 4px;
}
.village-directory .directory-mode {
  display: none;
}
@media (min-width: 901px) {
  .collection-book,
  .guide-gift-button {
    left: 24px;
    width: 64px;
    min-height: 62px;
    max-width: 64px;
    padding: 6px 3px;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    text-align: center;
  }
  .collection-book {
    top: 485px;
  }
  .guide-gift-button {
    top: 558px;
  }
  .collection-book .item-art,
  .guide-gift-button .item-art {
    width: 30px;
    height: 30px;
  }
  .collection-book small,
  .guide-gift-button small {
    text-align: center;
    font-size: 8px;
  }
  .collection-book > span,
  .guide-gift-button > span {
    font-size: 9px;
  }
  .village-directory {
    padding: 12px 14px;
  }
  .village-directory h3 {
    margin: 5px 0 8px;
  }
  .village-directory button {
    min-height: 29px;
    padding: 7px 0;
  }
  .village-directory .vn-festival-launcher {
    padding: 8px 0 0;
    min-height: 34px;
  }
}
@media (max-width: 900px) {
  .village-directory .vn-festival-launcher {
    margin-top: 7px;
    border: 1px solid #dfdfc5;
    border-radius: 9px;
    padding: 9px 12px;
    background: #fff9e9;
  }
  .village-directory .vn-festival-launcher > small {
    display: inline;
    font-size: 8px;
    margin-left: 12px;
  }
}
.npc-pin.npc-inviting {
  max-width: 210px;
  background: #fff9df;
  border-color: #d3a557;
  color: #365442;
  box-shadow: 0 4px 14px #54451b24;
}