/*
  Profile page styles for Hypercarry Chess.
  The 3D book object is custom CSS using local assets in /static/visual/ui.
*/

.profileShell {
  --cursor-default: url("/visual/cursors/default.png") 8 7, default;
  --cursor-pointer: url("/visual/cursors/pointer.png") 4 4, pointer;
  --cursor-not-allowed: url("/visual/cursors/not_allowed.png") 0 0, not-allowed;

  --profile-foil-gold:
    linear-gradient(
      135deg,
      rgba(255, 248, 203, 0.69) 0%,
      rgba(248, 229, 141, 0.69) 9%,
      rgba(215, 167, 33, 0.69) 24%,
      rgba(255, 241, 169, 0.69) 40%,
      rgba(200, 138, 17, 0.69) 56%,
      rgba(246, 214, 94, 0.69) 74%,
      rgba(139, 90, 3, 0.69) 100%
    );
  --profile-foil-gloss:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.34) 0%,
      rgba(255, 255, 255, 0.10) 18%,
      rgba(255, 255, 255, 0.02) 34%,
      rgba(0, 0, 0, 0.00) 58%,
      rgba(0, 0, 0, 0.12) 100%
    );
  --profile-trim-major-outer-width: 2.5px;
  --profile-trim-outer-opacity: 0.69;
  --profile-trim-shadow: 0 10px 24px rgba(122, 86, 9, 0.10);
  --profile-dark-fill: var(--ui-dark-bg, #2f2f2f);

  min-height: calc(100vh - 48px);
  cursor: var(--cursor-default);
}

html.profileReaderActive,
body.profileReaderActive {
  overflow: hidden;
}

body.profileReaderActive::before {
  filter: brightness(0.48);
}

body.profileReaderActive::after {
  background: rgba(0, 0, 0, 0.10);
}

body.profileReaderActive .profileShell {
  position: relative;
}

.profileShell .titleNavLinks {
  gap: 0px;
}

.profileShell .profileBackLink {
  width: 18px;
}

.profileShell .loginTopLink {
  width: 24px;
  margin-left: 4px;
  margin-right: 6px;
}

.profileShell .loginTopLink > span[aria-hidden="true"] {
  transform: none;
}

.profileShell button,
.profileShell a {
  cursor: var(--cursor-pointer);
}

.profileBackLink {
  position: relative;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: 24px;
  height: 24px;
  color: #333333;
  font-size: 18px;
  line-height: 1;
  text-decoration: none;
}

.profileTooltip {
  position: absolute;
  left: calc(100% + 6px);
  top: 50%;
  z-index: 20;
  padding: 3px 6px;
  border-radius: 6px;
  background: rgba(24, 24, 24, 0.86);
  color: #f5f5f5;
  font-size: 10px;
  font-weight: 650;
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%);
  transition: opacity 0.14s ease;
}

.profileBackLink:hover .profileTooltip,
.profileBackLink:focus-visible .profileTooltip {
  opacity: 1;
}

/* -------------------------
   Feedback dialog
   ------------------------- */

.feedbackDialog {
  width: min(760px, calc(100vw - 32px));
  max-height: min(760px, calc(100vh - 32px));
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(226, 184, 86, 0.72);
  border-radius: 8px;
  color: #f7edcf;
  background:
    linear-gradient(rgba(20, 15, 10, 0.96), rgba(13, 10, 7, 0.98)),
    #17110b;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.48);
}

.feedbackDialog::backdrop {
  background: rgba(0, 0, 0, 0.62);
}

.feedbackForm {
  display: grid;
  gap: 18px;
  box-sizing: border-box;
  max-height: min(760px, calc(100vh - 32px));
  padding: 22px;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-color: #dfc35f rgba(13, 10, 7, 0.88);
  scrollbar-width: auto;
}

.feedbackForm::-webkit-scrollbar,
.tavernTitlePickCard::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

.feedbackForm::-webkit-scrollbar-track,
.tavernTitlePickCard::-webkit-scrollbar-track {
  border-radius: 999px;
  background:
    linear-gradient(rgba(20, 15, 10, 0.92), rgba(13, 10, 7, 0.96)),
    #17110b;
}

.feedbackForm::-webkit-scrollbar-thumb,
.tavernTitlePickCard::-webkit-scrollbar-thumb {
  border: 2px solid rgba(13, 10, 7, 0.92);
  border-radius: 999px;
  background:
    linear-gradient(
      160deg,
      #f5e7ad 0%,
      #dfc35f 18%,
      #b98824 36%,
      #ecd983 52%,
      #c69836 68%,
      #dfc663 84%,
      #a6751d 100%
    );
  background-clip: padding-box;
}

.feedbackForm::-webkit-scrollbar-thumb:hover,
.tavernTitlePickCard::-webkit-scrollbar-thumb:hover {
  background:
    linear-gradient(
      160deg,
      #faedba 0%,
      #e6ca6d 18%,
      #c1922b 36%,
      #f0df91 52%,
      #cea03e 68%,
      #e8cf70 84%,
      #b27f22 100%
    );
}

.feedbackHeader {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(226, 184, 86, 0.28);
}

.feedbackKicker {
  color: #dcb858;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.feedbackTitle {
  margin-top: 6px;
  color: #fff4bf;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 900;
  line-height: 1.05;
}

.feedbackCloseButton {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid rgba(226, 184, 86, 0.54);
  border-radius: 999px;
  color: #fff4bf;
  background: rgba(0, 0, 0, 0.18);
  font-size: 22px;
  line-height: 1;
}

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

.feedbackPathButton {
  display: grid;
  gap: 7px;
  min-height: 104px;
  padding: 14px 12px;
  border: 1px solid rgba(226, 184, 86, 0.42);
  border-radius: 8px;
  color: rgba(255, 244, 196, 0.78);
  text-align: left;
  background: rgba(255, 244, 196, 0.035);
}

.feedbackPathButton.isSelected {
  border-color: rgba(255, 219, 112, 0.88);
  color: #3b2407;
  background: linear-gradient(180deg, #fff0a8 0%, #d8a233 100%);
}

.feedbackPathButton span {
  font-size: 15px;
  font-weight: 900;
}

.feedbackPathButton small {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
}

.feedbackPathPanel {
  display: grid;
  gap: 14px;
  padding: 14px;
  border: 1px solid rgba(226, 184, 86, 0.24);
  border-radius: 8px;
  background: rgba(255, 244, 196, 0.025);
}

.feedbackPathPanel[hidden] {
  display: none;
}

.feedbackPanelIntro,
.feedbackHelpBox {
  display: grid;
  gap: 6px;
  color: rgba(255, 244, 196, 0.78);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
}

.feedbackPanelIntro strong,
.feedbackHelpBox strong {
  color: #fff4bf;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
  font-weight: 900;
}

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

.feedbackReviewItem {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(226, 184, 86, 0.18);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.14);
}

.feedbackReviewTitle {
  color: #fff4bf;
  font-size: 13px;
  font-weight: 900;
}

.feedbackStarRow {
  display: flex;
  align-items: center;
  gap: 3px;
}

.feedbackStarLabel {
  cursor: var(--cursor-pointer);
}

.feedbackStarLabel input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.feedbackStarLabel span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  color: rgba(255, 244, 196, 0.38);
  font-size: 19px;
  line-height: 1;
}

.feedbackStarLabel:hover span,
.feedbackStarLabel:has(input:focus-visible) span,
.feedbackStarLabel:has(input:checked) span {
  color: #ffd85b;
  background: rgba(255, 216, 91, 0.12);
}

.feedbackStarRow[data-rating="1"] .feedbackStarLabel:nth-child(-n + 1) span,
.feedbackStarRow[data-rating="2"] .feedbackStarLabel:nth-child(-n + 2) span,
.feedbackStarRow[data-rating="3"] .feedbackStarLabel:nth-child(-n + 3) span,
.feedbackStarRow[data-rating="4"] .feedbackStarLabel:nth-child(-n + 4) span,
.feedbackStarRow[data-rating="5"] .feedbackStarLabel:nth-child(-n + 5) span {
  color: #ffd85b;
  background: rgba(255, 216, 91, 0.12);
}

.feedbackReviewItem textarea {
  width: 100%;
  min-height: 58px;
  box-sizing: border-box;
  border: 1px solid rgba(226, 184, 86, 0.34);
  border-radius: 6px;
  padding: 8px 9px;
  color: #fff7db;
  background: rgba(0, 0, 0, 0.20);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  resize: vertical;
}

.feedbackHelpBox p {
  margin: 0;
}

.feedbackHelpLinks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

.feedbackHelpLink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 6px 12px;
  border: 1px solid rgba(226, 184, 86, 0.46);
  border-radius: 999px;
  color: #fff4bf;
  text-decoration: none;
  background: rgba(0, 0, 0, 0.18);
}

.feedbackHelpLink:hover,
.feedbackHelpLink:focus-visible {
  color: #3b2407;
  background: linear-gradient(180deg, #fff0a8 0%, #d8a233 100%);
}

.feedbackCommonDivider {
  height: 1px;
  margin: 2px 0;
  background: rgba(226, 184, 86, 0.30);
}

.feedbackField {
  display: grid;
  gap: 7px;
  color: rgba(255, 244, 196, 0.84);
  font-size: 13px;
  font-weight: 800;
}

.feedbackField input,
.feedbackField select,
.feedbackField textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(226, 184, 86, 0.52);
  border-radius: 6px;
  padding: 10px 11px;
  color: #fff7db;
  background: rgba(0, 0, 0, 0.24);
  font: inherit;
  font-weight: 500;
}

.feedbackField select,
.profileEditField select,
.profileTitleEditor select,
.profileSocialEditor select {
  appearance: none;
}

.feedbackField .hypercarrySelectButton,
.profileEditField .hypercarrySelectButton,
.profileTitleEditor .hypercarrySelectButton,
.profileSocialEditor .hypercarrySelectButton {
  min-height: auto;
  border-radius: 6px;
  font: inherit;
}

.feedbackField .hypercarrySelectControl.isOpen,
.profileEditField .hypercarrySelectControl.isOpen,
.profileTitleEditor .hypercarrySelectControl.isOpen,
.profileSocialEditor .hypercarrySelectControl.isOpen {
  z-index: 120;
}

.feedbackField .hypercarrySelectControl.isOpen .hypercarrySelectButton,
.profileEditField .hypercarrySelectControl.isOpen .hypercarrySelectButton,
.profileTitleEditor .hypercarrySelectControl.isOpen .hypercarrySelectButton,
.profileSocialEditor .hypercarrySelectControl.isOpen .hypercarrySelectButton {
  border-bottom-color: transparent;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.feedbackField .hypercarrySelectMenu,
.profileEditField .hypercarrySelectMenu,
.profileTitleEditor .hypercarrySelectMenu,
.profileSocialEditor .hypercarrySelectMenu {
  box-sizing: border-box;
  top: calc(100% - 1px);
  border-radius: 0 0 6px 6px;
  box-shadow: 0 14px 24px rgba(0, 0, 0, 0.24);
}

.feedbackField .hypercarrySelectButton {
  border-color: rgba(226, 184, 86, 0.52);
  padding: 10px 11px;
  color: #fff7db;
  background: rgba(0, 0, 0, 0.24);
  font-weight: 500;
}

.feedbackField .hypercarrySelectMenu {
  border-color: rgba(226, 184, 86, 0.52);
  background:
    linear-gradient(rgba(20, 15, 10, 0.98), rgba(13, 10, 7, 0.99)),
    #17110b;
}

.feedbackField .hypercarrySelectOption {
  color: #fff7db;
  font-weight: 500;
}

.profileEditField .hypercarrySelectButton,
.profileTitleEditor .hypercarrySelectButton,
.profileSocialEditor .hypercarrySelectButton {
  border-color: rgba(226, 184, 86, 0.38);
  padding: 8px 10px;
  color: #2f1d08;
  background: #f6ecd0;
}

.profileEditField .hypercarrySelectMenu,
.profileTitleEditor .hypercarrySelectMenu,
.profileSocialEditor .hypercarrySelectMenu {
  border-color: rgba(226, 184, 86, 0.38);
  background: #f6ecd0;
}

.profileEditField .hypercarrySelectOption,
.profileTitleEditor .hypercarrySelectOption,
.profileSocialEditor .hypercarrySelectOption {
  color: #2f1d08;
}

.feedbackField textarea {
  min-height: 150px;
  resize: vertical;
}

.feedbackContactGrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 14px;
}

.feedbackFollowUp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  color: rgba(255, 244, 196, 0.82);
  font-size: 13px;
  font-weight: 700;
}

.feedbackStatus {
  min-height: 20px;
  color: #dcb858;
  font-size: 13px;
  font-weight: 700;
}

.feedbackActions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.feedbackSecondaryButton,
.feedbackSubmitButton {
  min-width: 132px;
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 900;
}

.feedbackSecondaryButton {
  border: 1px solid rgba(226, 184, 86, 0.48);
  color: #fff4bf;
  background: rgba(0, 0, 0, 0.18);
}

.feedbackSubmitButton {
  border: 1px solid rgba(255, 240, 168, 0.86);
  color: #17100a;
  background: linear-gradient(180deg, #fff0a8 0%, #d8a233 100%);
}

@media (max-width: 720px) {
  .feedbackPathGrid,
  .feedbackReviewGrid,
  .feedbackContactGrid {
    grid-template-columns: 1fr;
  }

  .feedbackActions {
    flex-direction: column-reverse;
  }

  .feedbackSecondaryButton,
  .feedbackSubmitButton {
    width: 100%;
  }
}

/* -------------------------
   Profile panel
   ------------------------- */

.card.profileMain {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: 12px;
  color: #f4efe3;
  border: 2.5px solid transparent !important;
  border-radius: 16px;
  box-sizing: border-box;
  background:
    linear-gradient(var(--profile-dark-fill), var(--profile-dark-fill)) padding-box,
    var(--profile-foil-gloss) border-box,
    var(--profile-foil-gold) border-box !important;
  background-clip: padding-box, border-box, border-box !important;
  background-origin: border-box !important;
  background-blend-mode: normal, soft-light, normal;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.035),
    0 16px 36px rgba(0, 0, 0, 0.24);
  transform: translateZ(0);
}

.card.profileMain:has(.profileSocialEditGroup .hypercarrySelectControl.isOpen) {
  z-index: 6;
  overflow: visible;
}

.card.profileMain::before {
  display: none !important;
  content: none !important;
}

.card.profileMain::after {
  content: "";
  display: block !important;
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 24% 18%, rgba(181, 131, 43, 0.14), transparent 28%),
    radial-gradient(circle at 78% 76%, rgba(49, 91, 120, 0.12), transparent 30%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.035), transparent 42%, rgba(0, 0, 0, 0.16));
  pointer-events: none;
}

.profileVerificationRibbon {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  margin-top: 12px;
  border: 1px solid rgba(238, 198, 96, 0.56);
  border-radius: 8px;
  background: rgba(71, 49, 17, 0.78);
  color: #fff3cf;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
}

.profileVerificationRibbon strong {
  color: #ffe08a;
}

.profileVerificationStatus {
  display: block;
  color: #cceec4;
}

.profileVerificationForm {
  margin: 0;
}

.profileVerificationLink {
  padding: 0;
  border: 0;
  background: transparent;
  color: #ffe08a;
  font: inherit;
  text-decoration: underline;
  white-space: nowrap;
}

.profileIntro {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 18px;
}

.profileTitle {
  color: #f7edd8;
  font-size: 17px;
}

.profileSubtitle {
  margin-top: 6px;
  color: rgba(247, 237, 216, 0.78);
}



/* -------------------------
   Account identity card preview
   ------------------------- */

.identityCardPanel {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 18px;
  padding: 0 2px 4px;
}

.identityCardFlipScene {
  position: relative;
  flex: 0 1 min(640px, 100%);
  width: min(640px, 100%);
  aspect-ratio: 1600 / 1000;
  perspective: 1400px;
  perspective-origin: 50% 50%;
  filter: drop-shadow(0 18px 22px rgba(0, 0, 0, 0.24));
}

.identityCardFlipCard {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  outline: 0;
  cursor: var(--cursor-pointer, pointer);
  transform-style: preserve-3d;
  transform: rotateY(0deg);
  transition: transform 0.72s cubic-bezier(0.2, 0.76, 0.2, 1);
  border-radius: clamp(10px, 1.15vw, 18px);
  will-change: transform;
}

.identityCardFlipCard.isFlipped {
  transform: rotateY(180deg);
}

.identityCardFlipCard:focus-visible {
  filter: drop-shadow(0 0 10px rgba(171, 124, 32, 0.55));
}

.identityCardFace {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-style: preserve-3d;
}

.identityCardFront {
  transform: rotateY(0deg);
}

.identityCardBack {
  background-image: url("/static/visual/ui/identity_back.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center center;
  transform: rotateY(180deg);
}

.identityCardBase,
.identityCardFrame {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  user-select: none;
  pointer-events: none;
}

.identityCardBase {
  z-index: 1;
}

.identityPortraitSlot {
  position: absolute;
  left: 7.85%;
  top: 18.8%;
  z-index: 2;
  width: 27.2%;
  height: 61.8%;
  overflow: hidden;
  border-radius: 7.5% / 5.4%;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 246, 214, 0.90), rgba(190, 161, 101, 0.34) 72%),
    #e6d4ad;
}

.identityPortraitImage {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  user-select: none;
  pointer-events: none;
}

.identityCardFrame {
  z-index: 3;
}

.identityCardText,
.identityFavPiece {
  position: absolute;
  z-index: 4;
  box-sizing: border-box;
}

.identityCardText {
  color: #3a250b;
  font-family: Georgia, "Times New Roman", serif;
  text-align: center;
  text-shadow:
    0 1px 0 rgba(255, 246, 214, 0.82),
    0 2px 5px rgba(93, 55, 7, 0.12);
}

.identityUsername {
  left: 41%;
  top: 16.8%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 47.4%;
  height: 14.4%;
  padding: 0 4.5%;
  color: #2f1d08;
  font-size: clamp(25px, 3.45vw, 42px);
  font-weight: 850;
  letter-spacing: -0.035em;
  line-height: 0.95;
}

.identityShowcase {
  left: 41%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 29.8%;
  height: 6.4%;
  padding: 0 2.8%;
  color: #4a2f0c;
  font-size: clamp(12px, 1.28vw, 16px);
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
}

.identityShowcaseOne {
  top: 40%;
}

.identityShowcaseTwo {
  top: 51%;
}

.identityShowcaseThree {
  top: 62%;
}

.identityFavPiece {
  left: 76%;
  top: 39%;
  display: grid;
  place-items: center;
  width: 18%;
  height: 28%;
  opacity: 0.82;
  filter:
    sepia(0.18)
    saturate(0.92)
    drop-shadow(0 8px 9px rgba(77, 49, 11, 0.20));
}

.identityFavPiece img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
}

.identityFavPiece img[hidden],
.identityFavPiece img:not([src]) {
  display: none;
}

.identityRegistryBlock {
  left: 41.2%;
  top: 80.2%;
  display: grid;
  align-content: center;
  justify-items: start;
  width: 36%;
  height: 10.8%;
  padding: 0 2.4%;
  color: #3a250b;
  font-size: clamp(6px, 1.12vw, 13px);
  font-weight: 800;
  gap: 6px;
  line-height: 1.35;
  text-align: left;
  letter-spacing: 0.015em;
}

.identitySeal {
  --identity-seal-color: #b9c0c9;
  position: absolute;
  left: 80.88%;
  top: 68.86%;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 10.8%;
  aspect-ratio: 1;
  border-radius: 999px;
  color: var(--identity-seal-color);
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 950;
  line-height: 1;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.48),
    0 4px 8px rgba(35, 22, 6, 0.30);
  pointer-events: auto;
}

.identitySealLevel {
  position: relative;
  z-index: 2;
  font-size: clamp(15px, 2.05vw, 27px);
  transform: translate(1px, 64%);
  text-shadow:
    1px 0 0 rgba(50, 27, 5, 0.78),
    2px 1px 0 rgba(50, 27, 5, 0.62),
    3px 2px 0 rgba(50, 27, 5, 0.38),
    -1px -1px 0 rgba(255, 236, 165, 0.52),
    0 5px 9px rgba(35, 22, 6, 0.42);
}

.identitySealMarker {
  position: absolute;
  z-index: 1;
  color: currentColor;
  font-size: clamp(27px, 4vw, 54px);
  font-style: italic;
  opacity: 0.36;
  transform: translate(-1%, 24%) rotate(-8deg);
  text-shadow:
    1px 0 0 rgba(50, 27, 5, 0.78),
    2px 1px 0 rgba(50, 27, 5, 0.62),
    3px 2px 0 rgba(50, 27, 5, 0.38),
    -1px -1px 0 rgba(255, 236, 165, 0.52),
    0 5px 9px rgba(35, 22, 6, 0.42);
}

.identitySealImageOnly img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
  filter: drop-shadow(0 8px 10px rgba(41, 23, 5, 0.28));
}

.identityBackField {
  top: 16%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 9.4%;
  padding: 0 3.2%;
  color: #3a250b;
  line-height: 1.05;
}

.identityBackGender {
  left: 9.2%;
  width: 39.2%;
}

.identityBackBirthdate {
  left: 51.2%;
  width: 39.2%;
}

.identityBackField span,
.identityBackBio span {
  display: block;
  color: rgba(74, 47, 12, 0.76);
  font-size: clamp(9px, 0.95vw, 13px);
  font-weight: 850;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
}

.identityBackField strong {
  display: block;
  color: #2f1d08;
  font-size: clamp(13px, 1.48vw, 20px);
  font-weight: 850;
  line-height: 1.05;
  text-align: center;
}

.identityBackBio {
  left: 7.2%;
  top: 30.8%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 85.8%;
  height: 23.8%;
  padding: 2.3% 3.0%;
  color: #3a250b;
  font-size: clamp(11px, 1.08vw, 15px);
  font-weight: 700;
  line-height: 1.34;
  text-align: center;
}

.identityBackBio p {
  margin: 0;
  max-width: 100%;
}

.identitySocialLine {
  position: absolute;
  left: 7.2%;
  top: 84.4%;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 85.8%;
  height: 7.2%;
}

.identitySocialLine a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 58px;
  height: 28px;
  padding: 0 10px;
  border: 1px solid rgba(74, 47, 12, 0.32);
  border-radius: 999px;
  color: #2f1d08;
  background: rgba(255, 246, 214, 0.42);
  font-size: 15px;
  font-weight: 850;
  line-height: 1;
  text-decoration: none;
}

.identitySocialLine i {
  display: inline-flex;
  justify-content: center;
  width: 16px;
  font-size: 17px;
}

.identitySocialLine span {
  font-size: 11px;
  font-weight: 900;
}

.identityCardFlipHint {
  margin-top: 8px;
  color: rgba(247, 237, 216, 0.58);
  font-size: 11px;
  font-weight: 750;
  text-align: center;
}

.identityEditButton {
  position: absolute;
  left: calc(50% + 350px);
  top: 50%;
  transform: translateY(-50%);
  flex: 0 0 auto;
  height: min(400px, calc((100vw - 48px) * 0.625));
  aspect-ratio: 1 / 1.28;
  margin-left: -100px;
  padding: 0;
  border: 0;
  outline: 0;
  border-radius: clamp(10px, 1.15vw, 18px);
  background: transparent;
  box-shadow: none;
  cursor: var(--cursor-pointer, pointer);
  overflow: hidden;
}

.identityEditButton img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
}

.identityEditButton:hover,
.identityEditButton:focus,
.identityEditButton:focus-visible,
.identityEditButton:active {
  border: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  filter: none;
}

.profileSideActions {
  position: absolute;
  left: 0;
  bottom: 10px;
  z-index: 2;
  display: grid;
  justify-items: start;
  gap: 12px;
  width: min(240px, 24vw);
}

.profileTesterChecklistLink {
  position: relative;
  left: -4px;
  display: block;
  width: min(180px, 100%);
  margin-bottom: 25px;
  text-decoration: none;
}

.profileTesterChecklistLink img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
}

.profileTesterChecklistLink:hover,
.profileTesterChecklistLink:focus-visible {
  filter: brightness(1.07);
}

.profileGuildAffiliation {
  display: grid;
  justify-items: start;
  gap: 10px;
  width: 100%;
  color: rgba(247, 237, 216, 0.86);
}

.profileGuildAffiliationTitle {
  color: #fff4c8;
  font-family: Georgia, "Times New Roman", serif;
  width: min(170px, 100%);
  font-size: 14px;
  font-weight: 720;
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.48);
}

.profileGuildAffiliationActions {
  display: grid;
  justify-items: start;
  gap: 8px;
  width: 100%;
}

.profileGuildAffiliationButton {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: min(170px, 100%);
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid rgba(247, 217, 138, 0.28);
  border-radius: 999px;
  color: rgba(247, 237, 216, 0.84);
  background: rgba(8, 7, 6, 0.34);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  text-decoration: none;
}

.profileGuildAffiliationButton.isConnected {
  border-color: rgba(132, 191, 126, 0.46);
  color: rgba(221, 255, 210, 0.92);
  background: rgba(31, 73, 34, 0.38);
  cursor: default;
  pointer-events: none;
}

.profileGuildAffiliationButton i {
  display: inline-flex;
  justify-content: center;
  width: 18px;
  color: #fff4c8;
  font-size: 18px;
}

.profileGuildAffiliationButton:hover,
.profileGuildAffiliationButton:focus-visible {
  border-color: rgba(247, 217, 138, 0.48);
  color: #3b2407;
  background: rgba(247, 237, 216, 0.94);
}

.profileGuildAffiliationButton.isConnected i {
  color: rgba(221, 255, 210, 0.92);
}

.profileGuildAffiliationButton:hover i,
.profileGuildAffiliationButton:focus-visible i {
  color: #3b2407;
}

@media (max-width: 980px) {
  .profileSideActions {
    position: static;
    width: min(360px, 100%);
    margin: 12px 0 0;
  }
}

.profileEditPanel {
  margin-top: 18px;
  padding: 18px;
  border: 1px solid rgba(226, 184, 86, 0.44);
  border-radius: 8px;
  color: #f7edd8;
  background: rgba(18, 15, 11, 0.66);
}

.profileEditForm {
  display: grid;
  gap: 18px;
}

.profileEditHeader {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid rgba(226, 184, 86, 0.24);
  padding-bottom: 12px;
}

.profileEditKicker {
  color: #dcb858;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.profileEditHeader h2,
.profileEditGroup h3 {
  margin: 0;
  color: #fff4bf;
  font-family: Georgia, "Times New Roman", serif;
}

.profileEditHeader h2 {
  margin-top: 4px;
  font-size: 24px;
}

.profileEditStatus {
  min-height: 18px;
  color: #d8c9a1;
  font-size: 12px;
  font-weight: 750;
  text-align: right;
}

.profileEditStatus.isError {
  color: #ffb3a8;
}

.profileEditGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 14px;
}

.profileEditGroup {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(226, 184, 86, 0.24);
  border-radius: 8px;
  background: rgba(255, 244, 196, 0.035);
}

.profileTitleEditGroup,
.profileIdentityEditGroup {
  grid-column: 1 / -1;
}

.profileAchievementsEditGroup {
  align-self: stretch;
}

.profileIdentityFields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr) max-content;
  align-items: end;
  gap: 10px;
}

.profileIdentityFields.hasGenderOther {
  grid-template-columns:
    minmax(0, calc(25% - 9px))
    minmax(0, calc(25% - 9px))
    minmax(0, calc(38% - 8px))
    max-content;
}

.profileEditField,
.profileTitleEditor label,
.profileSocialEditor label {
  display: grid;
  gap: 6px;
  color: rgba(247, 237, 216, 0.78);
  font-size: 12px;
  font-weight: 800;
}

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

.profileEditCheckbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  color: rgba(247, 237, 216, 0.78);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.profileEditCheckbox input {
  margin: 0;
}

.profileEditField small {
  color: rgba(247, 237, 216, 0.58);
  font-size: 10px;
  font-weight: 750;
}

.profileEditField input,
.profileEditField select,
.profileEditField textarea,
.profileTitleEditor select,
.profileSocialEditor input,
.profileSocialEditor select {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(226, 184, 86, 0.38);
  border-radius: 6px;
  padding: 8px 10px;
  color: #2f1d08;
  background: #f6ecd0;
  font: inherit;
}

.profileEditField textarea {
  resize: vertical;
}

.profileEditHint,
.profileAchievementsPlaceholder {
  margin: 0;
  color: rgba(247, 237, 216, 0.62);
  font-size: 12px;
  line-height: 1.35;
}

.profileTitleEditors,
.profileSocialEditors {
  display: grid;
  gap: 12px;
}

.profileSocialEditGroup,
.profileSocialEditors,
.profileSocialEditor {
  position: relative;
}

.profileSocialEditGroup:has(.hypercarrySelectControl.isOpen),
.profileSocialEditor:has(.hypercarrySelectControl.isOpen) {
  z-index: 180;
}

.profileTitleEditor {
  display: grid;
  grid-template-columns: minmax(160px, 0.7fr) minmax(0, 1fr) minmax(104px, 0.42fr) minmax(0, 1fr);
  gap: 10px;
  margin: 0;
  padding: 12px;
  border: 1px solid rgba(226, 184, 86, 0.20);
  border-radius: 8px;
}

.profileTitleEditor legend {
  padding: 0 6px;
  color: #fff4bf;
  font-size: 12px;
  font-weight: 900;
}

.profileTitleMode {
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  gap: 12px;
}

.profileTitleModeHeader {
  flex: 0 0 100%;
  color: rgba(247, 237, 216, 0.78);
  font-size: 12px;
  font-weight: 800;
}

.profileTitleMode label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  color: rgba(247, 237, 216, 0.82);
  font-size: 12px;
  font-weight: 850;
}

.profileTitleMode input {
  margin: 0;
}

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

.profileTitleFullField {
  grid-column: 2 / -1;
}

.profileTitleFirstFragment,
.profileTitleConnector,
.profileTitleSecondFragment {
  min-width: 0;
}

.profileSocialEditor {
  display: grid;
  grid-template-columns: minmax(140px, 0.35fr) minmax(0, 1fr);
  gap: 10px;
}

.profileEditActions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.profileEditActions button {
  min-width: 110px;
  padding: 9px 14px;
  border: 1px solid rgba(226, 184, 86, 0.52);
  border-radius: 8px;
  color: #fff4bf;
  background: rgba(0, 0, 0, 0.18);
  font-weight: 850;
}

.profileEditActions button[type="submit"] {
  color: #3b2407;
  background: linear-gradient(180deg, #fff0a8 0%, #d8a233 100%);
}

@media (max-width: 760px) {
  .profileEditGrid,
  .profileIdentityFields,
  .profileTitleEditor,
  .profileSocialEditor {
    grid-template-columns: 1fr;
  }

  .profileTitleFullField {
    grid-column: auto;
  }
}


/* -------------------------
   Library panel
   ------------------------- */

.card.loreMain {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: 12px;
  padding: 0;
  color: #f4efe3;
  border: 2.5px solid transparent !important;
  border-radius: 16px;
  box-sizing: border-box;
  background:
    linear-gradient(var(--profile-dark-fill), var(--profile-dark-fill)) padding-box,
    var(--profile-foil-gloss) border-box,
    var(--profile-foil-gold) border-box !important;
  background-clip: padding-box, border-box, border-box !important;
  background-origin: border-box !important;
  background-blend-mode: normal, soft-light, normal;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.035),
    0 16px 36px rgba(0, 0, 0, 0.24);
}

.card.loreMain::before {
  display: none !important;
  content: none !important;
}

.card.loreMain::after {
  content: "";
  display: block !important;
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 24% 18%, rgba(181, 131, 43, 0.14), transparent 28%),
    radial-gradient(circle at 78% 76%, rgba(49, 91, 120, 0.12), transparent 30%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.035), transparent 42%, rgba(0, 0, 0, 0.16));
  opacity: 1;
  pointer-events: none;
}

.loreIntro,
.historyArchive,
.historyReader {
  position: relative;
  z-index: 1;
}

.loreIntro {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 18px;
  padding: 18px 18px 0;
}

.loreTitle {
  color: #f7edd8;
  font-size: 17px;
}

.loreSubtitle {
  margin-top: 6px;
  color: rgba(247, 237, 216, 0.78);
}

.card.loreMain.isReadingHistory .loreSubtitle {
  display: none;
}


/* -------------------------
   Library bookshelf
   ------------------------- */

.loreBookshelf {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 24px 0 4px;
}

.loreBookshelfFrame {
  position: relative;
  width: 100%;
  aspect-ratio: 2048 / 834;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background-image: url("/static/visual/ui/shelf.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center center;
  box-shadow: none;
  overflow: hidden;
}

.loreBookshelfFrame::before {
  display: none;
  content: none;
}

.loreShelfBooks {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.loreShelfBook {
  --shelf-book-left: 8.8%;
  --shelf-book-bottom: 8.25%;
  --shelf-book-width: 5.68%;
  --shelf-book-height: 69%;

  position: absolute;
  left: var(--shelf-book-left);
  bottom: var(--shelf-book-bottom);
  width: var(--shelf-book-width);
  height: var(--shelf-book-height);
  padding: 0;
  border: 0;
  background: transparent;
  transform-origin: bottom center;
  transition:
    transform 0.42s cubic-bezier(0.2, 0.76, 0.2, 1),
    opacity 0.28s ease,
    filter 0.28s ease;
}

/*
  The shelf artwork has 13 built-in vertical bays.
  All books now share the same spine size; only the horizontal bay position varies.
*/
.loreShelfBook:nth-child(1) {
  --shelf-book-left: 10%;
}

.loreShelfBook:nth-child(2) {
  --shelf-book-left: 17.44%;
}

.loreShelfBook:nth-child(3) {
  --shelf-book-left: 24.68%;
}

.loreShelfBook:nth-child(4) {
  --shelf-book-left: 32.10%;
}

.loreShelfBook:nth-child(5) {
  --shelf-book-left: 39.39%;
}


/* Middle bay: selected by default. History lives here. */
.loreShelfBook:nth-child(6),
.loreShelfBook[data-book-id="history"] {
  --shelf-book-left: 47.16%;
}

.loreShelfBook:nth-child(7) {
  --shelf-book-left: 54.85%;
}

.loreShelfBook:nth-child(8) {
  --shelf-book-left: 62.26%;
}

.loreShelfBook:nth-child(9) {
  --shelf-book-left: 69.72%;
}

.loreShelfBook:nth-child(10) {
  --shelf-book-left: 76.89%;
}

.loreShelfBook:nth-child(11) {
  --shelf-book-left: 84.21%;
}

.loreShelfBookCover {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: visible;
  border-radius: clamp(5px, 0.55vw, 10px) clamp(5px, 0.55vw, 10px) clamp(3px, 0.35vw, 6px) clamp(3px, 0.35vw, 6px);
  background: transparent;
  box-shadow: none;
}

.loreShelfBookCover::after {
  display: none;
  content: none;
}

.loreShelfBook img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  pointer-events: none;
  user-select: none;
}

.identityGuestOverlay {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: grid;
  place-items: center;
  padding: 24px;
  color: #f7edd8;
  background: rgba(0, 0, 0, 0.72);
  text-align: center;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(18px, 2.4vw, 30px);
  font-weight: 800;
  line-height: 1.12;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
  pointer-events: none;
}

.loreShelfBook.isUnlocked:hover,
.loreShelfBook.isUnlocked:focus-visible {
  transform: translateY(-10px) rotate(-2deg) scale(1.025);
  filter: none;
  outline: none;
}

.loreShelfBook.isUnlocked:hover img,
.loreShelfBook.isUnlocked:focus-visible img {
  filter:
    drop-shadow(0 12px 10px rgba(0, 0, 0, 0.36))
    drop-shadow(0 0 8px rgba(247, 217, 138, 0.12));
}

.loreShelfBook,
.loreShelfBookCover {
  background: transparent !important;
  box-shadow: none;
}

.loreShelfBook.isActive {
  opacity: 0;
  transform: translateY(-92px) rotate(-7deg) scale(1.08);
  pointer-events: none;
}

.loreShelfBook.isLocked {
  cursor: var(--cursor-pointer, pointer);
}

.loreShelfBook.isLocked:hover,
.loreShelfBook.isLocked:focus-visible {
  transform: translateY(-8px) rotate(1.5deg) scale(1.025);
  filter: drop-shadow(0 14px 12px rgba(0, 0, 0, 0.28));
  outline: none;
}

.loreShelfBook.isLocked.isLockedPulse,
.loreShelfBook.isLocked.isLockedPulse:hover,
.loreShelfBook.isLocked.isLockedPulse:focus-visible {
  transition: none;
}

.loreShelfBook.isLockedPulse {
  animation: locked-book-pulse 0.42s ease both;
}

@keyframes locked-book-pulse {
  0% {
    transform: translateY(0) rotate(0deg) scale(1);
  }

  24% {
    transform: translateY(-10px) rotate(-2deg) scale(1.035);
  }

  48% {
    transform: translateY(-6px) rotate(2deg) scale(1.025);
  }

  72% {
    transform: translateY(-3px) rotate(-1deg) scale(1.012);
  }

  100% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
}

.loreShelfBookPlaceholder .loreShelfBookCover {
  border: 0;
  background: transparent;
}

.loreShelfBookPlaceholder.volumeThree img {
  filter: hue-rotate(208deg) saturate(0.52) brightness(0.48);
}

.loreShelfBookPlaceholder.volumeFour img {
  filter: hue-rotate(208deg) saturate(0.52) brightness(0.48);
}

.loreShelfBookPlaceholder.volumeSeven img {
  filter: hue-rotate(208deg) saturate(0.52) brightness(0.48);
}

.loreShelfBookPlaceholder.volumeEight img {
  filter: hue-rotate(208deg) saturate(0.52) brightness(0.48);
}

.loreShelfBookPlaceholder.volumeNine img {
  filter: hue-rotate(208deg) saturate(0.52) brightness(0.48);
}

.loreShelfBookPlaceholder.volumeTen img {
  filter: hue-rotate(208deg) saturate(0.52) brightness(0.48);
}

.loreShelfBase {
  display: none !important;
}

.loreBookshelfHint {
  margin-top: 12px;
  margin-bottom: 18px;
  color: rgba(247, 237, 216, 0.58);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.historyArchive.isReceivingBook .bookStage {
  animation: selected-book-arrives 0.72s cubic-bezier(0.2, 0.76, 0.2, 1) both;
}

@keyframes selected-book-arrives {
  0% {
    opacity: 0;
    transform: translateY(-70px) scale(0.88) rotate(-4deg);
    filter: blur(2px);
  }

  64% {
    opacity: 1;
    transform: translateY(8px) scale(1.02) rotate(1deg);
    filter: blur(0);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0deg);
    filter: blur(0);
  }
}

.card.loreMain.isReadingHistory .loreBookshelf {
  display: none !important;
}

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

.historyArchive {
  display: grid;
  grid-template-columns: minmax(280px, 0.72fr) minmax(360px, 1fr);
  gap: clamp(18px, 4vw, 56px);
  align-items: center;
  min-height: 700px;
  padding: 22px clamp(18px, 4vw, 46px) 36px;
}

.historyCopy {
  max-width: 420px;
}

.historyEyebrow {
  margin-top: 0;
  color: rgba(238, 199, 116, 0.92);
  opacity: 1;
}

.historyCopy h1 {
  margin: 10px 0 12px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(34px, 5.4vw, 68px);
  line-height: 0.92;
  letter-spacing: -0.055em;
  color: #f7d98a;
  text-shadow:
    0 2px 0 rgba(0, 0, 0, 0.52),
    0 0 20px rgba(210, 152, 43, 0.18);
}

.historyCopy p {
  margin: 0;
  max-width: 36rem;
  color: rgba(247, 237, 216, 0.82);
  font-size: 14px;
  line-height: 1.65;
}

.historyMetaGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 20px;
}

.historyMetaGrid div {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid rgba(238, 199, 116, 0.28);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.12);
}

.historyMetaGrid span {
  display: block;
  color: rgba(247, 237, 216, 0.62);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.historyMetaGrid b {
  display: block;
  margin-top: 4px;
  color: #f7edd8;
  font-size: 13px;
}

.openHistoryBtn {
  margin-top: 22px;
  min-width: 168px;
  padding: 12px 18px;
  border: 1px solid rgba(247, 217, 138, 0.48);
  border-radius: 999px;
  color: #111111;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.64), transparent 42%),
    linear-gradient(135deg, #f2d78a, #b98225 72%, #f5de9a);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.38),
    0 10px 24px rgba(0, 0, 0, 0.26),
    0 0 24px rgba(214, 164, 61, 0.12);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.02em;
  transition:
    filter 0.14s ease,
    transform 0.10s ease,
    box-shadow 0.14s ease;
}

.openHistoryBtn:hover {
  filter: brightness(1.06);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.48),
    0 12px 28px rgba(0, 0, 0, 0.3),
    0 0 30px rgba(214, 164, 61, 0.2);
}

.openHistoryBtn:active {
  transform: translateY(1px);
}

.openHistoryBtn:disabled {
  cursor: var(--cursor-not-allowed, not-allowed);
  filter: grayscale(0.35);
  opacity: 0.58;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.22),
    0 8px 18px rgba(0, 0, 0, 0.20);
}

.openHistoryBtn:disabled:hover {
  filter: grayscale(0.35);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.22),
    0 8px 18px rgba(0, 0, 0, 0.20);
}

/* -------------------------
   Book showcase
   ------------------------- */

.bookShowcase {
  display: grid;
  justify-items: center;
  gap: 12px;
  min-width: 0;
}

.bookStage {
  --book-width: min(452px, 46vw);
  --book-height: calc(var(--book-width) * 1.416);
  --book-depth: calc(var(--book-width) * 0.17);
  --book-radius: 18px;

  width: calc(var(--book-width) + 210px);
  height: calc(var(--book-height) + 100px);
  display: grid;
  place-items: center;
  perspective: 1400px;
  perspective-origin: 50% 44%;
}

.historyBook {
  --book-spine-scale-x: 0.28;
  --book-spine-origin: right center;
  --book-spine-rotate-y: -64deg;
  --book-spine-img-scale-x: 1;
  --book-spine-tilt-x: 0.35deg;
  --book-spine-tilt-y: calc(var(--book-height) * -0.002);
  --book-spine-z: calc(var(--book-depth) * 0.075);

  position: relative;
  width: var(--book-width);
  height: var(--book-height);
  outline: 0;
  cursor: var(--cursor-pointer, pointer);
  transform-style: preserve-3d;
  transform: rotateX(5deg) rotateY(-18deg) rotateZ(-1deg);
  transition:
    transform 0.72s cubic-bezier(0.2, 0.76, 0.2, 1),
    filter 0.28s ease;
  filter: drop-shadow(0 28px 28px rgba(0, 0, 0, 0.44));
}

.historyBook:focus-visible {
  filter:
    drop-shadow(0 28px 28px rgba(0, 0, 0, 0.44))
    drop-shadow(0 0 10px rgba(34, 212, 219, 0.5));
}

.bookStage:hover .historyBook,
.bookStage:focus-within .historyBook {
  --book-spine-scale-x: 1;
  --book-spine-origin: right center;
  --book-spine-rotate-y: -64deg;
  --book-spine-img-scale-x: 1;
  --book-spine-tilt-x: 0deg;
  --book-spine-tilt-y: 0px;
  --book-spine-z: calc(var(--book-depth) * 0.10);

  transform: rotateX(6deg) rotateY(18deg) rotateZ(-1deg) translateX(-10px);
}

.historyBook.isFlipped {
  --book-spine-scale-x: 1;
  --book-spine-origin: right center;
  --book-spine-rotate-y: -64deg;
  --book-spine-img-scale-x: -1;
  --book-spine-tilt-x: 0deg;
  --book-spine-tilt-y: 0px;
  --book-spine-z: calc(var(--book-depth) * 0.10);

  transform: rotateX(5deg) rotateY(162deg) rotateZ(1deg);
}

.bookStage:hover .historyBook.isFlipped,
.bookStage:focus-within .historyBook.isFlipped {
  --book-spine-scale-x: 0.18;
  --book-spine-origin: right center;
  --book-spine-rotate-y: -64deg;
  --book-spine-img-scale-x: -1;
  --book-spine-tilt-x: 0.35deg;
  --book-spine-tilt-y: calc(var(--book-height) * -0.002);
  --book-spine-z: calc(var(--book-depth) * 0.075);

  transform: rotateX(6deg) rotateY(198deg) rotateZ(1deg) translateX(10px);
}

.bookFace {
  position: absolute;
  transform-style: preserve-3d;
}

.bookFace img,
.bookSpine img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}

.bookFront {
  inset: 0;
  overflow: hidden;
  z-index: 5;
  opacity: 1;
  border-radius: var(--book-radius);
  background: #121212;
  box-shadow:
    0 28px 56px rgba(0, 0, 0, 0.44),
    0 8px 16px rgba(0, 0, 0, 0.28);
  transform: translateZ(calc(var(--book-depth) / 2));
  transition: opacity 0.18s ease;
}

.bookBack {
  inset: 0;
  overflow: hidden;
  z-index: 4;
  opacity: 0;
  border-radius: var(--book-radius);
  background: #121212;
  transform: translateZ(calc(var(--book-depth) / 2));
  transition: opacity 0.18s ease;
}

.bookBack img {
  transform: scaleX(-1);
  transform-origin: center center;
}

.historyBook.isFlipped .bookFront {
  opacity: 0;
}

.historyBook.isFlipped .bookBack {
  opacity: 1;
}

.bookFront::after,
.bookBack::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.46), transparent 10% 64%, rgba(255, 255, 255, 0.12)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent 18% 78%, rgba(0, 0, 0, 0.22));
  pointer-events: none;
  mix-blend-mode: soft-light;
}

.bookSpine {
  left: calc(var(--book-depth) * -0.88);
  top: calc(var(--book-height) * 0.015);
  width: var(--book-depth);
  height: calc(var(--book-height) * 0.97);
  overflow: visible;
  z-index: 7;
  border-radius: 16px 5px 5px 16px;
  background: #101010;
  box-shadow:
    inset 9px 0 12px rgba(255, 255, 255, 0.10),
    inset -9px 0 14px rgba(0, 0, 0, 0.55),
    8px 0 18px rgba(0, 0, 0, 0.28);
  transform-origin: var(--book-spine-origin);
  transform:
    translateY(var(--book-spine-tilt-y))
    perspective(700px)
    rotateY(var(--book-spine-rotate-y))
    rotateX(var(--book-spine-tilt-x))
    scaleX(var(--book-spine-scale-x))
    translateZ(var(--book-spine-z));
  transition:
    transform 0.72s cubic-bezier(0.2, 0.76, 0.2, 1);
}

.bookSpine img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  pointer-events: none;
  user-select: none;
  transform: scaleX(var(--book-spine-img-scale-x));
  transform-origin: center center;
}

.bookSpine::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.28), transparent 26% 72%, rgba(0, 0, 0, 0.56)),
    linear-gradient(180deg, rgba(0, 0, 0, 0.3), transparent 20% 78%, rgba(0, 0, 0, 0.42));
  pointer-events: none;
}

.bookPages,
.bookPagesTop,
.bookPagesBottom,
.bookPagesSide {
  display: none;
}

.bookHint {
  color: rgba(247, 237, 216, 0.62);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.profileFooterSlot {
  margin-top: 12px;
}

/* -------------------------
   History reader
   Sprite-based scroll-timeline version

   One visible-size control:
   --history-book-height on .historyReader.
   This is the visible open-book window height, not the hidden full sprite-frame height.
   ------------------------- */

@property --sprite-fs {
  syntax: "<integer>";
  initial-value: 0;
  inherits: true;
}

@property --history-progress {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

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

.historyReader {
  --history-book-height: 640px;
  --history-book-nudge-x: 0px;
  --history-book-window-ratio: 0.625;
  --history-book-width-ratio: 0.7042;
  --history-reader-book-gap-top: 64px;
  --history-reader-book-gap-bottom: 64px;

  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 100%;
  min-height: calc(
    var(--history-book-height)
    + var(--history-reader-book-gap-top)
    + var(--history-reader-book-gap-bottom)
    + 112px
  );
  padding: 18px clamp(18px, 4vw, 46px) 22px;
  box-sizing: border-box;
  overflow: hidden;
}

.card.loreMain.isReadingHistory .historyArchive {
  display: none !important;
}

.card.loreMain.isReadingHistory .loreIntro {
  display: flex;
}

.card.loreMain.isReadingHistory .historyReader {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, auto) auto;
  gap: 0;
}

.historyReader > * {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.readerTopBar,
.readerControls {
  display: grid;
  grid-template-columns: minmax(120px, 0.22fr) minmax(0, 1fr) minmax(92px, 0.22fr);
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.readerTitleBlock {
  min-width: 0;
  text-align: center;
}

.readerEyebrow {
  margin: 0 0 3px;
  color: rgba(238, 199, 116, 0.88);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.readerTitleBlock h2 {
  margin: 0;
  color: #f7d98a;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(20px, 2.35vw, 34px);
  line-height: 1.05;
  letter-spacing: -0.035em;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.52);
}

.readerProgress {
  justify-self: end;
  min-width: 70px;
  padding: 8px 12px;
  border: 1px solid rgba(238, 199, 116, 0.28);
  border-radius: 999px;
  color: rgba(247, 237, 216, 0.86);
  background: rgba(255, 255, 255, 0.045);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 14px;
  font-weight: 800;
  text-align: center;
}

.readerBackBtn,
.readerNavBtn {
  min-width: 108px;
  padding: 10px 14px;
  border: 1px solid rgba(247, 217, 138, 0.42);
  border-radius: 999px;
  color: #111111;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.58), transparent 42%),
    linear-gradient(135deg, #f2d78a, #b98225 72%, #f5de9a);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.32),
    0 8px 18px rgba(0, 0, 0, 0.22);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 14px;
  font-weight: 850;
  transition:
    filter 0.14s ease,
    transform 0.10s ease;
}

.readerBackBtn:hover,
.readerNavBtn:hover {
  filter: brightness(1.06);
}

.readerBackBtn:active,
.readerNavBtn:active {
  transform: translateY(1px);
}

.readerBackBtn:disabled,
.readerNavBtn:disabled {
  cursor: var(--cursor-not-allowed, not-allowed);
  filter: grayscale(0.55);
  opacity: 0.52;
}

.historyReaderStage {
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: calc(
    var(--history-book-height)
    + var(--history-reader-book-gap-top)
    + var(--history-reader-book-gap-bottom)
  );
  padding-top: var(--history-reader-book-gap-top);
  padding-bottom: var(--history-reader-book-gap-bottom);
  box-sizing: border-box;
  overflow: visible;
}

/*
  Open-book sprite system.
  The sprite still uses the CodePen 9600 x 3000 geometry.
  The layout box, however, is only the visible book window.
*/
.historyFlipBook {
  --sprite-image: url("/static/visual/ui/book_flip_sprite.webp");
  --sprite-c: 5;
  --sprite-h: 3000;
  --sprite-w: 9600;
  --sprite-f: 7;
  --sprite-fr: 12;

  --sprite-r: round(up, calc(var(--sprite-f) / var(--sprite-c)), 1);
  --sprite-sh: calc(var(--sprite-h) / var(--sprite-r));
  --sprite-th-base: calc(var(--sprite-sh) / 2);

  /* Hidden full frame height, derived from the visible book height. */
  --reader-book-height: calc(var(--history-book-height) / var(--history-book-window-ratio));
  --reader-scale: calc(var(--reader-book-height) / calc(1px * var(--sprite-th-base)));

  --sprite-th: calc(var(--sprite-th-base) * var(--reader-scale));
  --sprite-ar: calc(var(--sprite-th) / var(--sprite-sh));
  --sprite-uh: calc(var(--sprite-h) * var(--sprite-ar));
  --sprite-uw: calc(var(--sprite-w) * var(--sprite-ar));
  --sprite-tw: calc(var(--sprite-uw) / var(--sprite-c));

  --history-book-window-width: calc(1px * var(--sprite-tw) * var(--history-book-width-ratio));

  --sprite-as: calc(var(--sprite-f) / var(--sprite-fr) * 1s);
  --sprite-at: linear;
  --sprite-ad: normal;
  --sprite-af: none;
  --sprite-ap: running;

  position: relative;
  display: grid;
  grid-template-areas:
    "scroll"
    "markers";
  grid-template-columns: 1fr;
  grid-template-rows: var(--history-book-height) auto;
  place-items: center;
  gap: 58px;
  width: var(--history-book-window-width);
  height: var(--history-book-height);
  margin: 0;
  justify-self: center;
  align-self: center;
  transform: translateX(var(--history-book-nudge-x));
  filter: drop-shadow(0 24px 30px rgba(0, 0, 0, 0.38));
}

/*
  Keep this non-positioned. The absolutely positioned sprite uses
  .historyFlipBook as its containing block while still inheriting --slides
  from .historyCarousel in the HTML.
*/
.historyCarousel {
  counter-increment: curpage;
  grid-area: scroll;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  display: grid;
  margin: 0;
  place-self: center;
  width: var(--history-book-window-width);
  height: var(--history-book-height);
  grid: 1fr / auto-flow 100%;
  scroll-timeline: --history-reader-timeline x;
  scroll-behavior: smooth;
  scrollbar-width: none;
  scroll-marker-group: after;
}

.historyCarousel:focus {
  outline: none;
}

.historyCarousel:focus-visible {
  outline: 1px solid rgba(247, 217, 138, 0.55);
  outline-offset: 6px;
}

.historyCarousel::-webkit-scrollbar {
  display: none;
}

.historyReaderSprite {
  position: absolute;
  z-index: 0;
  left: calc(-0.5px * (var(--sprite-tw) - (var(--sprite-tw) * var(--history-book-width-ratio))));
  top: calc(-0.5px * (var(--sprite-th) - (var(--sprite-th) * var(--history-book-window-ratio))));
  display: block;
  width: calc(1px * var(--sprite-tw));
  height: calc(1px * var(--sprite-th));
  margin: 0;
  background-image: var(--sprite-image);
  background-repeat: no-repeat;
  background-size:
    calc(1px * var(--sprite-uw))
    calc(1px * var(--sprite-uh));
  pointer-events: none;
  transform-origin: center center;

  --sprite-fe: calc(var(--sprite-f) * (var(--slides) - 1));
  --sprite-fs-n: mod(var(--sprite-fs), var(--sprite-f));
  --row: calc(round(down, calc(calc(var(--sprite-tw) * var(--sprite-fs-n)) / var(--sprite-uw)), 1) * var(--sprite-th));
  --col: mod(calc(var(--sprite-tw) * var(--sprite-fs-n)), var(--sprite-uw));

  background-position:
    calc(-1px * var(--col))
    calc(-1px * var(--row));

  animation: history-reader-frame var(--sprite-as) var(--sprite-at) 0s var(--sprite-ad) var(--sprite-af) var(--sprite-ap);
  animation-timeline: --history-reader-timeline;
}

.historySpread {
  --reader-page-gap: calc(var(--history-book-height) * 0.082);

  position: relative;
  z-index: 3;
  min-width: 100%;
  width: 100%;
  height: 100%;
  scroll-snap-align: start;
  color: #2d2415;
  counter-increment: curpage;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--reader-page-gap);
  padding:
    calc(var(--history-book-height) * 0.080)
    calc(var(--history-book-height) * 0.082)
    calc(var(--history-book-height) * 0.070);
  box-sizing: border-box;
  animation:
    history-reader-count-before linear forwards,
    history-reader-stay-centered linear both;
  animation-range: exit, normal;
  animation-timeline: view(x), view(x);
  timeline-scope: --history-reader-item;
}

.historySpread::scroll-marker {
  content: "";
  position: relative;
  left: -1px;
  width: 100%;
  height: 100%;
  display: block;
  box-sizing: border-box;
  box-shadow: 2px 0 0 rgba(0, 0, 0, 0.72);
}

.historySpread:last-of-type::scroll-marker {
  box-shadow: none;
}

.readerPageSurface {
  --reader-page-number-row: calc(var(--history-book-height) * 0.1);

  min-width: 0;
  height: 100%;
  overflow: hidden;
  display: grid;
  grid-template-rows:
    minmax(0, calc(100% - var(--reader-page-number-row)))
    var(--reader-page-number-row);
  row-gap: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #3a2810;
  font-family: Georgia, "Times New Roman", serif;
}

.readerPageRight {
  counter-increment: curpage;
}

.readerPageSurface > div {
  grid-row: 1;
  min-width: 0;
  max-width: 100%;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
}

.readerPageLeft > div {
  padding-right: calc(var(--history-book-height) * 0.012);
}

.readerPageRight > div {
  padding-left: calc(var(--history-book-height) * 0.042);
}

.readerPageSurface::after {
  grid-row: 2;
  display: block;
  height: var(--reader-page-number-row);
  min-height: 0;
  margin: 0;
  padding: 0;
  color: hsl(45.71deg 69.23% 30%);
  font-family: Georgia, "Times New Roman", serif;
  font-size: calc(var(--history-book-height) * 0.021);
  font-weight: 800;
  line-height: var(--reader-page-number-row);
  align-self: center;
}

.readerPageLeft::after {
  content: counter(curpage);
}

.readerPageRight::after {
  content: counter(curpage);
  justify-self: end;
}

.historyCarousel[data-reader-book-id="royal-compendium-guide"] .dynamicReaderPageSurface::after {
  transform: translateY(calc(var(--history-book-height) * -0.032));
}

.historyCarousel[data-reader-book-id="dawn-will-come-changelog"] .dynamicReaderPageSurface::after {
  transform: translateY(calc(var(--history-book-height) * -0.070));
}

.historyCarousel[data-reader-book-id="shoulders-giants-licenses"] .dynamicReaderPageSurface::after {
  transform: translateY(calc(var(--history-book-height) * -0.070));
}

.readerPageKicker {
  margin-bottom: calc(var(--history-book-height) * 0.010);
  color: rgba(104, 69, 13, 0.86);
  font-size: calc(var(--history-book-height) * 0.018);
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.readerPageSurface h3 {
  margin: 0 0 calc(var(--history-book-height) * 0.006);
  color: #4a2f0c;
  font-family: Georgia, "Times New Roman", serif;
  font-size: calc(var(--history-book-height) * 0.042);
  line-height: 1.25;
  letter-spacing: -0.035em;
}

.readerPageSurface p {
  margin: 0 0 0.78em;
  color: rgba(49, 38, 23, 0.92);
  font-family: Georgia, "Times New Roman", serif;
  font-size: calc(var(--history-book-height) * 0.022);
  line-height: 1.44;
  text-align: justify;
  hyphens: auto;
  word-wrap: break-word;
}

.historyCarousel::scroll-marker-group {
  content: "";
  width: min(100%, 540px);
  max-width: calc(100vw - 96px);
  height: 8px;
  padding: 2px 0;
  display: grid;
  position: absolute;
  grid-area: markers;
  grid-auto-flow: column;
  place-self: center;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.75);
  background:
    linear-gradient(90deg, #f1e2b2 0%) no-repeat left center,
    rgba(0, 0, 0, 0.24);
  --history-progress: calc(calc(100 / var(--slides)) * 1%);
  background-size: var(--history-progress, 20%) 100%;
  animation: history-reader-progress linear both;
  animation-timeline: --history-reader-timeline;
}

.readerHint {
  color: rgba(247, 237, 216, 0.58);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.readerControls .readerNavBtn:last-child {
  justify-self: end;
}

@keyframes history-reader-frame {
  to {
    --sprite-fs: var(--sprite-fe);
  }
}

@keyframes history-reader-progress {
  to {
    --history-progress: 100%;
  }
}

@keyframes history-reader-count-before {
  1%,
  100% {
    counter-increment: page curpage;
  }
}

@keyframes history-reader-stay-centered {
  entry 0% {
    opacity: 0;
    translate: -100%;
  }

  entry 75% {
    opacity: 0;
    translate: -25%;
  }

  entry 100% {
    opacity: 1;
    translate: 0%;
  }

  exit 0% {
    opacity: 1;
    translate: 0%;
  }

  exit 50% {
    opacity: 0;
    translate: 50%;
  }

  exit 100% {
    opacity: 0;
    translate: 100%;
  }
}

.readerLoadingSpread {
  position: relative;
}

.card.loreMain > .readerLoadingLettersCanvas {
  position: absolute;
  inset: 0;
  z-index: 8;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: 0.9;
}

.card.loreMain.isReadingHistory .historyReader,
.card.loreMain.isReadingHistory .loreIntro {
  position: relative;
  z-index: 3;
}

.readerLoadingSpread .readerPageSurface {
  position: relative;
  z-index: 4;
}

.readerLoadingSpread::after {
  content: "";
  position: absolute;
  left: 38%;
  top: 42%;
  width: 24%;
  height: 24%;
  border-radius: 999px;
  background:
    radial-gradient(circle, rgba(55, 38, 20, 0.12), transparent 68%);
  z-index: 2;
  pointer-events: none;
}

/* -------------------------
   Imported AO3 reader content
   Clean dynamic-reader layer. Keep prose/image spacing stable.
   ------------------------- */

.dynamicReaderPageSurface {
  overflow: hidden;
  padding-bottom: 0;
}

.readerDynamicContent {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.readerDynamicContent.isContinuation {
  padding-top: calc(var(--history-book-height) * 0.012);
}

.readerDynamicContent.isContinuation .readerPageKicker {
  margin-bottom: calc(var(--history-book-height) * 0.020);
}

.readerFicBody {
  flex: 1 1 auto;
  min-height: 0;
  margin-top: 12px;
  overflow: hidden;
  color: rgba(55, 38, 20, 0.94);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(11px, 1vw, 14px);
  line-height: 1.58;
}

.dynamicReaderPageSurface .readerFicBody,
.dynamicReaderPageSurface .readerFicBody * {
  color: rgba(55, 38, 20, 0.94);
}

.readerFicBody p {
  margin: 0 0 0.9em;
}

.dynamicReaderPageSurface .readerFicBody h2,
.dynamicReaderPageSurface .readerFicBody h3,
.dynamicReaderPageSurface .readerFicBody h4 {
  margin: 0 0 0.5em;
  color: rgba(55, 38, 20, 0.98);
  font-family: "Cinzel Decorative", "Cormorant Garamond", Georgia, serif;
  line-height: 1.16;
}

.dynamicReaderPageSurface .readerFicBody h2 {
  font-size: clamp(14px, 1.35vw, 18px);
}

.dynamicReaderPageSurface .readerFicBody h3 {
  font-size: clamp(12px, 1.12vw, 15px);
}

.historyCarousel[data-reader-book-id="dawn-will-come-changelog"] .dynamicReaderPageSurface .readerFicBody h3 {
  display: block;
  margin-top: 0.24em;
  margin-bottom: 0.62em;
  padding-top: 1.28em;
}

.historyCarousel[data-reader-book-id="dawn-will-come-changelog"] .dynamicReaderPageSurface .readerFicBody > p:first-child {
  margin-bottom: 0.36em;
  font-style: italic;
}

.historyCarousel[data-reader-book-id="dawn-will-come-changelog"] .dynamicReaderPageSurface .readerFicBody h2 + h3,
.historyCarousel[data-reader-book-id="dawn-will-come-changelog"] .dynamicReaderPageSurface .readerFicBody p + h3 {
  padding-top: 1.42em;
}

.historyCarousel[data-reader-book-id="dawn-will-come-changelog"] .dynamicReaderPageSurface .readerFicBody > p:first-child + h3 {
  padding-top: 0.56em;
}

.historyCarousel[data-reader-book-id="dawn-will-come-changelog"] .dynamicReaderPageSurface .readerFicBody > h3:first-child {
  margin-top: 0;
  padding-top: 0;
}

.dynamicReaderPageSurface .readerFicBody h4 {
  font-size: clamp(11px, 1.02vw, 14px);
  margin-top: 0;
  margin-bottom: 0.42em;
  padding-top: 0.88em;
}

.dynamicReaderPageSurface .readerFicBody > :first-child {
  margin-top: 0;
}

.dynamicReaderPageSurface .readerFicBody > h4:first-child {
  padding-top: 0;
}

.dynamicReaderPageSurface .readerFicBody ul {
  margin: 0 0 0.88em 1.2em;
  padding: 0;
}

.dynamicReaderPageSurface .readerFicBody li {
  margin: 0 0 0.22em;
  padding-left: 0.1em;
  line-height: 1.42;
}

.dynamicReaderPageSurface .readerFicBody .infoReaderLicenseCard,
.dynamicReaderPageSurface .readerFicBody .infoReaderLicenseEntry {
  display: block;
  margin: 0 0 0.72em;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.dynamicReaderPageSurface .readerFicBody .infoReaderLicenseNote {
  margin: 0 0 0.72em;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.dynamicReaderPageSurface .readerFicBody .infoReaderLicenseField {
  display: grid;
  grid-template-columns: minmax(92px, 0.35fr) minmax(0, 1fr);
  column-gap: 0.85em;
  margin: 0 0 0.42em;
  align-items: baseline;
}

.dynamicReaderPageSurface .readerFicBody .infoReaderLicenseKey {
  font-weight: 800;
}

.dynamicReaderPageSurface .readerFicBody .infoReaderLicenseBlock {
  white-space: pre-wrap;
}

.readerFicBody em {
  font-style: italic;
}

.readerFicBody strong {
  font-weight: 800;
}

.readerFicBody img {
  display: block;
  max-width: 100%;
  max-height: 46vh;
  width: auto;
  height: auto;
  margin: 0.8em auto 1em;
  border-radius: 10px;
  object-fit: contain;
  opacity: 1;
  filter: none;
  box-shadow:
    0 10px 22px rgba(64, 35, 8, 0.22),
    0 0 0 1px rgba(111, 73, 24, 0.16);
}

/*
  Lazy/offloaded image states must not visually fade successful images.
  JS may remove src while managing proximity loading, but the UI should not wash images out.
*/
.readerLazyImage,
.readerImageLoading,
.readerImageLoaded,
.readerImageOffloaded,
.readerImageFailed {
  opacity: 1;
  filter: none;
}

.readerImageFailed {
  outline: 0;
}

.readerFicBody .sword-sep {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9em;
  margin: 0.42em 0 0.70em;
  color: rgba(105, 68, 20, 0.72);
  font-size: 1.24em;
  line-height: 1;
  text-align: center;
}

.readerFicBody .sword-sep::before,
.readerFicBody .sword-sep::after {
  content: "";
  flex: 1;
  border-top: 1px solid rgba(111, 73, 24, 0.22);
}

.readerFicBody .sword-sep:first-child {
  margin-top: 0;
}

.dynamicReaderPageSurface .readerDynamicContent > h3 {
  text-align: center;
}

.readerDynamicBlank {
  opacity: 0.55;
}

.readerBlankPageSurface {
  pointer-events: none;
}

.readerBlankPageSurface .readerDynamicBlank {
  height: 100%;
}

/* Contents page
   Static table-of-contents styling, not clickable buttons.
   ------------------------- */

.readerContentsContent {
  justify-content: flex-start;
}

.readerContentsBody {
  overflow: hidden;
  pointer-events: none;
}

.readerContentsBody .readerContentsItem,
.readerContentsTextItem {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "chapter page"
    "title page"
    "files page";
  column-gap: 12px;
  row-gap: 1px;
  width: 100%;
  padding:
    calc(var(--history-book-height) * 0.010)
    0
    calc(var(--history-book-height) * 0.010);
  border: 0;
  border-bottom: 1px solid rgba(111, 73, 24, 0.24);
  border-radius: 0;
  color: #4a2f0c;
  background: transparent;
  box-shadow: none;
  font-family: Georgia, "Times New Roman", serif;
  text-align: left;
  pointer-events: none;
}

.readerContentsBody .readerContentsItem:first-child,
.readerContentsTextItem:first-child {
  border-top: 1px solid rgba(111, 73, 24, 0.16);
}

.readerContentsBody .readerContentsItem span,
.readerContentsTextItem span {
  grid-area: chapter;
  color: rgba(104, 69, 13, 0.74);
  font-size: calc(var(--history-book-height) * 0.014);
  font-weight: 850;
  letter-spacing: 0.10em;
  line-height: 1.08;
  text-transform: uppercase;
}

.readerContentsBody .readerContentsItem strong,
.readerContentsTextItem strong {
  grid-area: title;
  color: #4a2f0c;
  font-size: calc(var(--history-book-height) * 0.020);
  font-weight: 800;
  line-height: 1.16;
}

.readerContentsFiles {
  grid-area: files;
  display: block;
  margin-top: 0.24em;
  color: rgba(74, 47, 12, 0.68);
  font-size: calc(var(--history-book-height) * 0.012);
  font-style: italic;
  font-weight: 600;
  line-height: 1.24;
}

.readerContentsFiles span {
  display: block;
  margin-bottom: 0.12em;
}

.readerContentsBody .readerContentsItem em,
.readerContentsPageNo {
  grid-area: page;
  align-self: center;
  justify-self: end;
  color: rgba(74, 47, 12, 0.78);
  font-size: calc(var(--history-book-height) * 0.017);
  font-style: italic;
  line-height: 1;
  white-space: nowrap;
}

/* Dynamic reader layout guardrails.
   The base .readerPageSurface grid owns the page-number row. */
.dynamicReaderPageSurface {
  overflow: hidden;
  padding-bottom: 0;
}

.dynamicReaderPageSurface > .readerDynamicContent {
  grid-row: 1;
  align-self: stretch;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
}

/* Imported chapter headings: tighter bottom gap than static history pages. */
.dynamicReaderPageSurface .readerDynamicContent > h3 {
  margin-bottom: calc(var(--history-book-height) * 0.004);
  text-align: center;
}

/* Metadata-backed image reservation.
   When JS removes src for lazy/proximity loading, the width/height attributes
   and aspect-ratio still reserve space without drawing outlines or placeholders. */
.readerFicBody img.readerLazyImage {
  background: transparent;
  border: 0;
  outline: 0;
  opacity: 1;
  filter: none;
}

.readerFicBody img.readerLazyImage:not([src]) {
  visibility: hidden;
  box-shadow: none;
  border-radius: 0;
}

.readerFicBody img.readerLazyImage[src] {
  visibility: visible;
}

.readerImageLoading,
.readerImageLoaded,
.readerImageOffloaded,
.readerImageFailed {
  opacity: 1;
  filter: none;
  outline: 0;
}

/* -------------------------
   Tavern panel
   ------------------------- */

.card.tavernMain {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: 12px;
  padding: 0;
  color: #f4efe3;
  border: 2.5px solid transparent !important;
  border-radius: 16px;
  box-sizing: border-box;
  background:
    linear-gradient(var(--profile-dark-fill), var(--profile-dark-fill)) padding-box,
    var(--profile-foil-gloss) border-box,
    var(--profile-foil-gold) border-box !important;
  background-clip: padding-box, border-box, border-box !important;
  background-origin: border-box !important;
  background-blend-mode: normal, soft-light, normal;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.035),
    0 16px 36px rgba(0, 0, 0, 0.24);
}

.card.tavernMain::before {
  display: none !important;
  content: none !important;
}

.card.tavernMain::after {
  content: "";
  display: block !important;
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 22% 22%, rgba(181, 131, 43, 0.16), transparent 30%),
    radial-gradient(circle at 82% 74%, rgba(120, 64, 31, 0.16), transparent 32%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.035), transparent 42%, rgba(0, 0, 0, 0.18));
  opacity: 1;
  pointer-events: none;
}

.tavernIntro,
.tavernWipCard {
  position: relative;
  z-index: 1;
}

.tavernIntro {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 18px;
  padding: 18px 18px 0;
}

.tavernTitle {
  color: #f7edd8;
  font-size: 17px;
}

.tavernSubtitle {
  margin-top: 6px;
  color: rgba(247, 237, 216, 0.78);
}

.tavernWipCard {
  margin: 24px clamp(18px, 4vw, 46px) 32px;
  padding: clamp(22px, 4vw, 38px);
  border: 1px solid rgba(238, 199, 116, 0.28);
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 0%, rgba(238, 199, 116, 0.12), transparent 42%),
    rgba(255, 255, 255, 0.045);
  box-shadow:
    inset 0 0 24px rgba(0, 0, 0, 0.16),
    0 14px 26px rgba(0, 0, 0, 0.18);
  text-align: center;
}

.tavernWipKicker {
  color: rgba(238, 199, 116, 0.92);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.tavernWipCard h2 {
  margin: 10px 0 8px;
  color: #f7d98a;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(24px, 3.4vw, 42px);
  line-height: 1.02;
  letter-spacing: -0.045em;
  text-shadow:
    0 2px 0 rgba(0, 0, 0, 0.42),
    0 0 18px rgba(210, 152, 43, 0.16);
}

.tavernWipCard p {
  max-width: 620px;
  margin: 0 auto;
  color: rgba(247, 237, 216, 0.78);
  font-size: 14px;
  line-height: 1.55;
}

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

.tavernDoorButton {
  position: relative;
  z-index: 1;
  display: block;
  width: min(100%, 2048px);
  margin: 24px auto 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  line-height: 0;
  overflow: hidden;
}

.tavernDoorButton:hover,
.tavernDoorButton:focus,
.tavernDoorButton:active {
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
}

.tavernDoorButton:focus-visible {
  filter: drop-shadow(0 0 10px rgba(238, 199, 116, 0.46));
}

.tavernDoorImage {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
  user-select: none;
  pointer-events: none;
}

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

.tavernInterior {
  position: relative;
  z-index: 1;
  width: 100%;
  margin: 0;
  overflow: hidden;
}

.tavernNeutralVideo {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
  border-radius: 0;
  object-fit: cover;
}

.tavernVideoStage.isLightsOut .tavernNeutralVideo {
  visibility: visible;
}

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

.tavernLightsOutPanel {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  background: #000;
  opacity: 1;
  transition: opacity 900ms ease;
}

.tavernLightsOutPanel.isFadingOut {
  opacity: 0;
  pointer-events: none;
}

.tavernLightSwitchRow {
  margin-top: 0;
  padding: 0;
  background: transparent;
}

.tavernLightSwitchRow .toggle--checkbox {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.tavernLightSwitchRow .toggle--btn {
  font-family: Audiowide, "Cinzel Decorative", "Cinzel", Georgia, serif;
  text-transform: uppercase;
  font-size: clamp(42px, 7vw, 86px);
  color: #333;
  text-shadow:
    0 0 10px transparent,
    0 0 15px transparent,
    0 0 25px transparent,
    0 0 40px transparent,
    0 0 70px transparent,
    0 0 90px transparent,
    0 0 90px transparent;
  cursor: pointer;
}

.tavernLightSwitchRow .toggle--btn::before,
.tavernLightSwitchRow .toggle--btn::after {
  display: inline-block;
  margin: 0 clamp(42px, 6vw, 96px);
  transition: all 220ms ease-in-out;
}

.tavernLightSwitchRow .toggle--btn::before {
  content: attr(data-label-off);
  animation: tavernNeonLightText 1.5s ease-in-out infinite alternate;
  animation-delay: 90ms;
  color: #f1f1f1;
}

.tavernLightSwitchRow .toggle--btn::after {
  content: attr(data-label-on);
}

.tavernLightSwitchRow .toggle--checkbox:checked + .toggle--btn::before {
  animation: none;
  color: #333;
}

.tavernLightSwitchRow .toggle--checkbox:checked + .toggle--btn::after {
  animation: tavernNeonLightText 1.5s ease-in-out infinite alternate;
  animation-delay: 90ms;
  color: #f1f1f1;
}

.tavernLightSwitchRow .toggle--checkbox:focus-visible + .toggle--btn {
  outline: 2px solid rgba(255, 231, 160, 0.7);
  outline-offset: 10px;
}

@keyframes tavernNeonLightText {
  0% {
    text-shadow:
      0 0 10px #fff,
      0 0 15px #fff,
      0 0 25px #fff,
      0 0 40px #ffb12f,
      0 0 70px #ffb12f,
      0 0 90px #ffb12f;
  }

  100% {
    text-shadow:
      0 0 5px #fff,
      0 0 10px #fff,
      0 0 15px #fff,
      0 0 20px #ffb12f,
      0 0 35px #ffb12f,
      0 0 50px #ffb12f;
  }
}

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

.skipTavernPullButton {
  position: absolute;
  right: 28px;
  bottom: 25px;
  z-index: 4;
  padding: 0;
  border: 0;
  color: rgba(255, 239, 190, 0.82);
  background: transparent;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 21px;
  font-weight: 800;
  line-height: 1;
  text-decoration: underline;
  text-shadow:
    0 2px 3px rgba(0, 0, 0, 0.78),
    0 0 9px rgba(0, 0, 0, 0.42);
}

.skipTavernPullButton:hover,
.skipTavernPullButton:focus-visible {
  color: #fff3c9;
  outline: none;
  background: transparent;
  box-shadow: none;
  filter: none;
}

.card.tavernMain.isTavernOpen {
  min-height: 100vh;
}

html.profileTavernActive,
body.profileTavernActive {
  overflow: hidden;
}

body.profileTavernActive::before {
  filter: brightness(0.48);
}

body.profileTavernActive::after {
  background: rgba(0, 0, 0, 0.10);
}

body.profileTavernActive .profileShell {
  position: relative;
}


.tavernActionRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px;
}

.tavernTaleTokensCounter {
  flex: 0 0 auto;
  min-width: 132px;
  display: grid;
  place-items: center;
  gap: 7px;
  color: #f7d98a;
  font-family: Georgia, "Times New Roman", serif;
  text-align: center;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.48);
}

.tavernTaleTokensLabel {
  color: rgba(247, 237, 216, 0.7);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
}

.tavernTaleTokensValue {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: clamp(18px, 2vw, 25px);
  font-weight: 900;
  line-height: 1;
  perspective: 420px;
}

.tavernTaleTokenDigit {
  position: relative;
  isolation: isolate;
  width: 26px;
  height: 34px;
  overflow: hidden;
  border: 1px solid rgba(222, 180, 92, 0.56);
  border-radius: 4px;
  color: #fff0be;
  background:
    linear-gradient(
      to bottom,
      rgba(70, 44, 19, 0.96) 0%,
      rgba(43, 27, 15, 0.98) 49%,
      rgba(20, 13, 9, 0.98) 50%,
      rgba(42, 25, 12, 0.98) 100%
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 242, 192, 0.18),
    inset 0 -10px 18px rgba(0, 0, 0, 0.38),
    0 5px 10px rgba(0, 0, 0, 0.26);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.58);
  transform-style: preserve-3d;
}

.tavernTaleTokenDigit::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  z-index: 1;
  width: 100%;
  height: 1px;
  background: rgba(0, 0, 0, 0.74);
  box-shadow:
    0 -1px 0 rgba(255, 235, 180, 0.1),
    0 1px 0 rgba(255, 235, 180, 0.06);
  pointer-events: none;
}

.tavernTaleTokenDigit::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 231, 163, 0.18), transparent 52%);
  pointer-events: none;
}

.tavernTaleTokenDigitFace,
.tavernTaleTokenDigitFlap {
  position: absolute;
  left: 0;
  width: 100%;
  height: 50%;
  overflow: hidden;
  color: #fff0be;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.tavernTaleTokenDigitGlyph {
  position: absolute;
  left: 0;
  width: 100%;
  height: 34px;
  display: grid;
  place-items: center;
}

.tavernTaleTokenDigitTop {
  top: 0;
  border-radius: 3px 3px 0 0;
  background:
    linear-gradient(
      to bottom,
      rgba(73, 46, 20, 0.98),
      rgba(39, 25, 14, 0.98)
    );
}

.tavernTaleTokenDigitTop .tavernTaleTokenDigitGlyph {
  top: 0;
}

.tavernTaleTokenDigitBottom {
  bottom: 0;
  border-radius: 0 0 3px 3px;
  background:
    linear-gradient(
      to bottom,
      rgba(18, 12, 9, 0.98),
      rgba(44, 27, 13, 0.98)
    );
}

.tavernTaleTokenDigitBottom .tavernTaleTokenDigitGlyph {
  bottom: 0;
}

.tavernTaleTokenDigitOld {
  z-index: 1;
}

.tavernTaleTokenDigitNew {
  z-index: 2;
}

.tavernTaleTokenDigit.isChanging .tavernTaleTokenDigitTop.tavernTaleTokenDigitNew {
  opacity: 0;
}

.tavernTaleTokenDigit.isChanging .tavernTaleTokenDigitTop.tavernTaleTokenDigitNew {
  animation: tavernTaleTokenShowNewTop 0.42s steps(1, end) forwards;
}

.tavernTaleTokenDigitFlap {
  z-index: 4;
  transform-style: preserve-3d;
}

.tavernTaleTokenDigitFlapOld {
  top: 0;
  border-radius: 3px 3px 0 0;
  background:
    linear-gradient(
      to bottom,
      rgba(80, 51, 22, 0.99),
      rgba(32, 20, 12, 0.99)
    );
  transform-origin: center bottom;
}

.tavernTaleTokenDigitFlapOld .tavernTaleTokenDigitGlyph {
  top: 0;
}

.tavernTaleTokenDigitFlapNew {
  bottom: 0;
  border-radius: 0 0 3px 3px;
  background:
    linear-gradient(
      to bottom,
      rgba(20, 13, 9, 0.99),
      rgba(58, 35, 15, 0.99)
    );
  transform: rotateX(90deg);
  transform-origin: center top;
}

.tavernTaleTokenDigitFlapNew .tavernTaleTokenDigitGlyph {
  bottom: 0;
}

.tavernTaleTokenDigit:not(.isChanging) .tavernTaleTokenDigitOld,
.tavernTaleTokenDigit:not(.isChanging) .tavernTaleTokenDigitFlap {
  display: none;
}

.tavernTaleTokenDigit.isChanging .tavernTaleTokenDigitFlapOld {
  animation: tavernTaleTokenFlipOld 0.21s cubic-bezier(0.58, 0.04, 0.96, 0.52) forwards;
}

.tavernTaleTokenDigit.isChanging .tavernTaleTokenDigitFlapNew {
  animation: tavernTaleTokenFlipNew 0.21s 0.21s cubic-bezier(0.08, 0.82, 0.22, 1) forwards;
}

@keyframes tavernTaleTokenShowNewTop {
  0% {
    opacity: 0;
  }

  50%,
  100% {
    opacity: 1;
  }
}

@keyframes tavernTaleTokenFlipOld {
  0% {
    transform: rotateX(0deg);
    filter: brightness(1);
  }

  100% {
    transform: rotateX(-90deg);
    filter: brightness(0.74);
  }
}

@keyframes tavernTaleTokenFlipNew {
  0% {
    transform: rotateX(90deg);
    filter: brightness(0.74);
  }

  100% {
    transform: rotateX(0deg);
    filter: brightness(1.08);
  }
}

.tavernActionButton {
  --tavern-btn-scale: 0.52;
  --tavern-btn-text: #d8ccb0;
  --tavern-btn-text-hover: #fff2cf;
  --tavern-btn-border:
    linear-gradient(
      to bottom,
      #d7c29a,
      #a99670 48%,
      #604c36 52%,
      #806f57
    );
  --tavern-btn-border-hover:
    linear-gradient(
      to bottom,
      #f1dfb2,
      #c9ae74 48%,
      #7d5c31 52%,
      #a98a58
    );
  --tavern-btn-inlay:
    radial-gradient(
      at center 145%,
      rgba(224, 236, 255, 0.46),
      transparent 35%
    ) 50% 0% / 150% 28% no-repeat,
    radial-gradient(
      at center -22%,
      rgba(55, 99, 180, 0.84),
      transparent 38%
    ) 50% 100% / 150% 28% no-repeat,
    linear-gradient(
      to bottom,
      #1c2945,
      #35568f 23%,
      #233b69 27% 49%,
      #162847 51% 74%,
      #0b1427 78%,
      #101d35
    );

  position: relative;
  isolation: isolate;
  display: inline-grid;
  place-items: center;
  min-width: min(310px, 44%);
  min-height: 86px;
  padding: 24px 62px;
  border: 0;
  border-radius: 0;
  outline: 0;
  color: var(--tavern-btn-text);
  background: transparent;
  box-shadow: none;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(15px, 1.55vw, 20px);
  font-weight: 800;
  letter-spacing: 0.015em;
  line-height: 1;
  text-align: center;
  text-shadow:
    1px -1px 1px rgba(255, 252, 242, 0.88),
    -1px 1px 1px rgba(22, 5, 0, 0.96);
  transition:
    color 0.16s ease,
    filter 0.16s ease,
    transform 0.10s ease;
}

.tavernActionButton::before,
.tavernActionButton::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  box-sizing: border-box;
  pointer-events: none;
}

.tavernActionButton::before {
  background: var(--tavern-btn-inlay);
  clip-path: polygon(
    calc(50px * var(--tavern-btn-scale)) calc(82px * var(--tavern-btn-scale)),
    calc(114px * var(--tavern-btn-scale)) calc(18px * var(--tavern-btn-scale)),
    calc(100% - 114px * var(--tavern-btn-scale)) calc(18px * var(--tavern-btn-scale)),
    calc(100% - 50px * var(--tavern-btn-scale)) calc(82px * var(--tavern-btn-scale)),
    calc(100% - 50px * var(--tavern-btn-scale)) calc(100% - 82px * var(--tavern-btn-scale)),
    calc(100% - 114px * var(--tavern-btn-scale)) calc(100% - 18px * var(--tavern-btn-scale)),
    calc(114px * var(--tavern-btn-scale)) calc(100% - 18px * var(--tavern-btn-scale)),
    calc(50px * var(--tavern-btn-scale)) calc(100% - 82px * var(--tavern-btn-scale))
  );
  opacity: 1;
  transition:
    filter 0.16s ease,
    opacity 0.16s ease;
}

.tavernActionButton::after {
  background: var(--tavern-btn-border);
  clip-path: polygon(
    calc(37px * var(--tavern-btn-scale)) calc(44px * var(--tavern-btn-scale)),
    calc(52px * var(--tavern-btn-scale)) calc(29px * var(--tavern-btn-scale)),
    calc(61px * var(--tavern-btn-scale)) calc(18px * var(--tavern-btn-scale)),
    calc(82.5px * var(--tavern-btn-scale)) calc(39.5px * var(--tavern-btn-scale)),
    calc(61px * var(--tavern-btn-scale)) calc(61px * var(--tavern-btn-scale)),
    0 0,
    calc(77px * var(--tavern-btn-scale)) 0,
    calc(90px * var(--tavern-btn-scale)) calc(13px * var(--tavern-btn-scale)),
    calc(103px * var(--tavern-btn-scale)) 0,
    calc(100% - 103px * var(--tavern-btn-scale)) 0,
    calc(100% - 90px * var(--tavern-btn-scale)) calc(13px * var(--tavern-btn-scale)),
    calc(100% - 77px * var(--tavern-btn-scale)) 0,
    100% 0,
    calc(100% - 61px * var(--tavern-btn-scale)) calc(61px * var(--tavern-btn-scale)),
    calc(100% - 82.5px * var(--tavern-btn-scale)) calc(39.5px * var(--tavern-btn-scale)),
    calc(100% - 61px * var(--tavern-btn-scale)) calc(18px * var(--tavern-btn-scale)),
    calc(100% - 52px * var(--tavern-btn-scale)) calc(29px * var(--tavern-btn-scale)),
    calc(100% - 37px * var(--tavern-btn-scale)) calc(44px * var(--tavern-btn-scale)),
    calc(100% - 24.5px * var(--tavern-btn-scale)) calc(56.5px * var(--tavern-btn-scale)),
    calc(100% - 32.5px * var(--tavern-btn-scale)) calc(64.5px * var(--tavern-btn-scale)),
    calc(100% - 32.5px * var(--tavern-btn-scale)) calc(100% - 64.5px * var(--tavern-btn-scale)),
    calc(100% - 24.5px * var(--tavern-btn-scale)) calc(100% - 56.5px * var(--tavern-btn-scale)),
    calc(100% - 37px * var(--tavern-btn-scale)) calc(100% - 44px * var(--tavern-btn-scale)),
    calc(100% - 52px * var(--tavern-btn-scale)) calc(100% - 29px * var(--tavern-btn-scale)),
    calc(100% - 61px * var(--tavern-btn-scale)) calc(100% - 18px * var(--tavern-btn-scale)),
    calc(100% - 82.5px * var(--tavern-btn-scale)) calc(100% - 39.5px * var(--tavern-btn-scale)),
    calc(100% - 61px * var(--tavern-btn-scale)) calc(100% - 61px * var(--tavern-btn-scale)),
    100% 100%,
    calc(100% - 77px * var(--tavern-btn-scale)) 100%,
    calc(100% - 90px * var(--tavern-btn-scale)) calc(100% - 13px * var(--tavern-btn-scale)),
    calc(100% - 103px * var(--tavern-btn-scale)) 100%,
    calc(103px * var(--tavern-btn-scale)) 100%,
    calc(90px * var(--tavern-btn-scale)) calc(100% - 13px * var(--tavern-btn-scale)),
    calc(77px * var(--tavern-btn-scale)) 100%,
    0 100%,
    calc(61px * var(--tavern-btn-scale)) calc(100% - 61px * var(--tavern-btn-scale)),
    calc(82.5px * var(--tavern-btn-scale)) calc(100% - 39.5px * var(--tavern-btn-scale)),
    calc(61px * var(--tavern-btn-scale)) calc(100% - 18px * var(--tavern-btn-scale)),
    calc(52px * var(--tavern-btn-scale)) calc(100% - 29px * var(--tavern-btn-scale)),
    calc(37px * var(--tavern-btn-scale)) calc(100% - 44px * var(--tavern-btn-scale)),
    calc(24.5px * var(--tavern-btn-scale)) calc(100% - 56.5px * var(--tavern-btn-scale)),
    calc(32.5px * var(--tavern-btn-scale)) calc(100% - 64.5px * var(--tavern-btn-scale)),
    calc(32.5px * var(--tavern-btn-scale)) calc(64.5px * var(--tavern-btn-scale)),
    calc(24.5px * var(--tavern-btn-scale)) calc(56.5px * var(--tavern-btn-scale)),
    calc(37px * var(--tavern-btn-scale)) calc(44px * var(--tavern-btn-scale)),
    calc(45px * var(--tavern-btn-scale)) calc(52px * var(--tavern-btn-scale)),
    calc(41px * var(--tavern-btn-scale)) calc(56px * var(--tavern-btn-scale)),
    calc(50px * var(--tavern-btn-scale)) calc(66px * var(--tavern-btn-scale)),
    calc(40.5px * var(--tavern-btn-scale)) calc(75.5px * var(--tavern-btn-scale)),
    calc(40.5px * var(--tavern-btn-scale)) calc(100% - 75.5px * var(--tavern-btn-scale)),
    calc(50px * var(--tavern-btn-scale)) calc(100% - 66px * var(--tavern-btn-scale)),
    calc(41px * var(--tavern-btn-scale)) calc(100% - 56px * var(--tavern-btn-scale)),
    calc(45px * var(--tavern-btn-scale)) calc(100% - 52px * var(--tavern-btn-scale)),
    calc(37px * var(--tavern-btn-scale)) calc(100% - 44px * var(--tavern-btn-scale)),
    calc(52px * var(--tavern-btn-scale)) calc(100% - 29px * var(--tavern-btn-scale)),
    calc(59.5px * var(--tavern-btn-scale)) calc(100% - 36.5px * var(--tavern-btn-scale)),
    calc(61px * var(--tavern-btn-scale)) calc(100% - 35px * var(--tavern-btn-scale)),
    calc(65.5px * var(--tavern-btn-scale)) calc(100% - 39.5px * var(--tavern-btn-scale)),
    calc(61px * var(--tavern-btn-scale)) calc(100% - 44px * var(--tavern-btn-scale)),
    calc(25px * var(--tavern-btn-scale)) calc(100% - 8px * var(--tavern-btn-scale)),
    calc(72.5px * var(--tavern-btn-scale)) calc(100% - 8px * var(--tavern-btn-scale)),
    calc(90px * var(--tavern-btn-scale)) calc(100% - 25.5px * var(--tavern-btn-scale)),
    calc(107.5px * var(--tavern-btn-scale)) calc(100% - 8px * var(--tavern-btn-scale)),
    calc(100% - 107.5px * var(--tavern-btn-scale)) calc(100% - 8px * var(--tavern-btn-scale)),
    calc(100% - 90px * var(--tavern-btn-scale)) calc(100% - 25.5px * var(--tavern-btn-scale)),
    calc(100% - 72.5px * var(--tavern-btn-scale)) calc(100% - 8px * var(--tavern-btn-scale)),
    calc(100% - 25px * var(--tavern-btn-scale)) calc(100% - 8px * var(--tavern-btn-scale)),
    calc(100% - 61px * var(--tavern-btn-scale)) calc(100% - 44px * var(--tavern-btn-scale)),
    calc(100% - 65.5px * var(--tavern-btn-scale)) calc(100% - 39.5px * var(--tavern-btn-scale)),
    calc(100% - 61px * var(--tavern-btn-scale)) calc(100% - 35px * var(--tavern-btn-scale)),
    calc(100% - 59.5px * var(--tavern-btn-scale)) calc(100% - 36.5px * var(--tavern-btn-scale)),
    calc(100% - 52px * var(--tavern-btn-scale)) calc(100% - 29px * var(--tavern-btn-scale)),
    calc(100% - 37px * var(--tavern-btn-scale)) calc(100% - 44px * var(--tavern-btn-scale)),
    calc(100% - 45px * var(--tavern-btn-scale)) calc(100% - 52px * var(--tavern-btn-scale)),
    calc(100% - 41px * var(--tavern-btn-scale)) calc(100% - 56px * var(--tavern-btn-scale)),
    calc(100% - 50px * var(--tavern-btn-scale)) calc(100% - 66px * var(--tavern-btn-scale)),
    calc(100% - 40.5px * var(--tavern-btn-scale)) calc(100% - 75.5px * var(--tavern-btn-scale)),
    calc(100% - 40.5px * var(--tavern-btn-scale)) calc(75.5px * var(--tavern-btn-scale)),
    calc(100% - 50px * var(--tavern-btn-scale)) calc(66px * var(--tavern-btn-scale)),
    calc(100% - 41px * var(--tavern-btn-scale)) calc(56px * var(--tavern-btn-scale)),
    calc(100% - 45px * var(--tavern-btn-scale)) calc(52px * var(--tavern-btn-scale)),
    calc(100% - 37px * var(--tavern-btn-scale)) calc(44px * var(--tavern-btn-scale)),
    calc(100% - 52px * var(--tavern-btn-scale)) calc(29px * var(--tavern-btn-scale)),
    calc(100% - 59.5px * var(--tavern-btn-scale)) calc(36.5px * var(--tavern-btn-scale)),
    calc(100% - 61px * var(--tavern-btn-scale)) calc(35px * var(--tavern-btn-scale)),
    calc(100% - 65.5px * var(--tavern-btn-scale)) calc(39.5px * var(--tavern-btn-scale)),
    calc(100% - 61px * var(--tavern-btn-scale)) calc(44px * var(--tavern-btn-scale)),
    calc(100% - 25px * var(--tavern-btn-scale)) calc(8px * var(--tavern-btn-scale)),
    calc(100% - 72.5px * var(--tavern-btn-scale)) calc(8px * var(--tavern-btn-scale)),
    calc(100% - 90px * var(--tavern-btn-scale)) calc(25.5px * var(--tavern-btn-scale)),
    calc(100% - 107.5px * var(--tavern-btn-scale)) calc(8px * var(--tavern-btn-scale)),
    calc(107.5px * var(--tavern-btn-scale)) calc(8px * var(--tavern-btn-scale)),
    calc(90px * var(--tavern-btn-scale)) calc(25.5px * var(--tavern-btn-scale)),
    calc(72.5px * var(--tavern-btn-scale)) calc(8px * var(--tavern-btn-scale)),
    calc(25px * var(--tavern-btn-scale)) calc(8px * var(--tavern-btn-scale)),
    calc(61px * var(--tavern-btn-scale)) calc(44px * var(--tavern-btn-scale)),
    calc(65.5px * var(--tavern-btn-scale)) calc(39.5px * var(--tavern-btn-scale)),
    calc(61px * var(--tavern-btn-scale)) calc(35px * var(--tavern-btn-scale)),
    calc(59.5px * var(--tavern-btn-scale)) calc(36.5px * var(--tavern-btn-scale)),
    calc(52px * var(--tavern-btn-scale)) calc(29px * var(--tavern-btn-scale)),
    calc(37px * var(--tavern-btn-scale)) calc(44px * var(--tavern-btn-scale))
  );
  filter:
    drop-shadow(0 10px 12px rgba(0, 0, 0, 0.34))
    drop-shadow(0 0 8px rgba(212, 175, 96, 0.10));
  transition:
    background 0.16s ease,
    filter 0.16s ease,
    opacity 0.16s ease;
}

.tavernExitButton {
  --tavern-btn-inlay:
    radial-gradient(
      at center 145%,
      rgba(224, 236, 255, 0.28),
      transparent 35%
    ) 50% 0% / 150% 28% no-repeat,
    linear-gradient(
      to bottom,
      #202938,
      #3d4c66 23%,
      #29364b 27% 49%,
      #192334 51% 74%,
      #0c121d 78%,
      #131c29
    );
}

.tavernTalesButton {
  --tavern-btn-text: #dfd1b3;
  --tavern-btn-inlay:
    radial-gradient(
      at center 145%,
      rgba(255, 244, 218, 0.48),
      transparent 35%
    ) 50% 0% / 150% 28% no-repeat,
    radial-gradient(
      at center -22%,
      rgba(122, 35, 18, 0.88),
      transparent 38%
    ) 50% 100% / 150% 28% no-repeat,
    linear-gradient(
      to bottom,
      #39231c,
      #8b5041 23%,
      #4c281e 27% 49%,
      #2d160e 51% 74%,
      #180704 78%,
      #230a04
    );
}

.tavernActionButton:hover,
.tavernActionButton:focus-visible {
  color: var(--tavern-btn-text-hover);
  filter: brightness(1.08);
  transform: translateY(-2px);
}

.tavernActionButton:hover::before,
.tavernActionButton:focus-visible::before {
  filter: saturate(1.08) brightness(1.08);
}

.tavernActionButton:hover::after,
.tavernActionButton:focus-visible::after {
  background: var(--tavern-btn-border-hover);
  filter:
    drop-shadow(0 12px 14px rgba(0, 0, 0, 0.38))
    drop-shadow(0 0 12px rgba(102, 154, 255, 0.28))
    drop-shadow(0 0 8px rgba(229, 188, 95, 0.14));
}

.tavernActionButton:focus,
.tavernActionButton:focus-visible {
  outline: none;
  box-shadow: none;
}

.tavernActionButton:active {
  transform: translateY(1px) scale(0.988);
}

.tavernActionButton:disabled {
  cursor: var(--cursor-not-allowed, not-allowed);
  filter: grayscale(0.48) brightness(0.72);
  opacity: 0.62;
  transform: none;
}

@media (max-width: 640px) {
  .tavernActionRow {
    align-items: stretch;
    flex-direction: column;
  }

  .tavernActionButton {
    width: 100%;
    min-width: 0;
  }
}


.tavernVideoStage {
  position: relative;
  width: 100%;
}

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

.tavernRewardPopup {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(10, 8, 5, 0.58);
  backdrop-filter: blur(3px);
}

.tavernTitlePickPopup {
  position: fixed;
  inset: 0;
  z-index: 220;
  min-height: 100vh;
  place-items: center;
  padding: 0;
}

.tavernRewardCard {
  position: relative;
  width: min(460px, calc(100% - 32px));
  padding: clamp(24px, 4vw, 40px);
  border: 1px solid rgba(247, 217, 138, 0.58);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), transparent 32%),
    linear-gradient(145deg, rgba(49, 39, 24, 0.98), rgba(24, 20, 15, 0.98));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.045),
    0 24px 70px rgba(0, 0, 0, 0.52),
    0 0 28px rgba(214, 164, 61, 0.12);
  color: #f7edd8;
  text-align: center;
}

.tavernRewardPopup.isBundleReward .tavernRewardCard {
  width: min(760px, calc(100% - 32px));
}

.tavernPullChoiceCard {
  width: min(520px, calc(100% - 32px));
}

.tavernTitlePickCard {
  position: relative;
  width: min(820px, calc(100% - 32px));
  max-height: min(620px, calc(100dvh - 72px));
  overflow: auto;
  scrollbar-color: #dfc35f rgba(13, 10, 7, 0.88);
  scrollbar-width: auto;
}

.tavernTitlePickCard.isConfirming {
  overflow: hidden;
}

.tavernPullChoiceCloseButton {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  color: rgba(255, 244, 200, 0.76);
  background: transparent;
  font-size: 17px;
  font-weight: 800;
  line-height: 1;
}

.tavernPullChoiceCloseButton:hover,
.tavernPullChoiceCloseButton:focus-visible {
  color: #fff4c8;
  background: transparent;
}

.tavernRewardKicker {
  color: rgba(238, 199, 116, 0.92);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.tavernPullChoiceCost {
  margin: 34px auto 10px;
  color: #fff4c8;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(18px, 2.4vw, 24px);
  font-weight: 800;
}

.tavernPullChoicePity {
  margin: 0 auto 34px;
  color: rgba(255, 244, 200, 0.72);
  font-size: 13px;
  font-weight: 400;
}

.tavernTitlePickSubtitle {
  margin: 18px auto 26px;
  color: rgba(255, 244, 200, 0.76);
  font-size: 13px;
  font-weight: 400;
}

.tavernTitlePickList {
  display: grid;
  gap: 22px;
  text-align: left;
}

.tavernTitlePickGroup {
  display: grid;
  gap: 10px;
}

.tavernTitlePickGroupHeader {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff4c8;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.tavernTitlePickGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

.tavernTitlePickRadio {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.tavernTitlePickOption {
  display: grid;
  place-items: center;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid rgba(247, 217, 138, 0.24);
  border-radius: 999px;
  color: #fff4c8;
  background: rgba(10, 8, 5, 0.34);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
}

.tavernTitlePickOption:hover,
.tavernTitlePickRadio:focus-visible + .tavernTitlePickOption {
  border-color: rgba(247, 217, 138, 0.58);
  background: rgba(247, 217, 138, 0.12);
}

.tavernTitlePickRadio:checked + .tavernTitlePickOption {
  border-color: rgba(255, 225, 134, 0.88);
  color: #3c2812;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.58), transparent 42%),
    linear-gradient(135deg, #f5dc91, #bd8428 72%, #f8e5a4);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.32),
    0 8px 18px rgba(0, 0, 0, 0.22);
}

.tavernTitlePickFooter {
  display: flex;
  justify-content: center;
  margin: 28px auto 0;
}

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

.tavernTitlePickConfirm {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 20;
  display: grid;
  place-items: center;
  width: min(460px, calc(100vw - 48px));
  padding: 0;
  transform: translateX(-50%);
  background: transparent;
  backdrop-filter: none;
}

.tavernTitlePickConfirmCard {
  width: 100%;
  padding: 24px;
  border: 1px solid rgba(247, 217, 138, 0.52);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), transparent 32%),
    linear-gradient(145deg, rgba(49, 39, 24, 0.98), rgba(24, 20, 15, 0.98));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.045),
    0 20px 58px rgba(0, 0, 0, 0.54);
  color: #f7edd8;
  text-align: center;
}

.tavernTitlePickConfirmCard p {
  margin: 24px auto 26px;
  color: #fff4c8;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(18px, 2.4vw, 24px);
  font-weight: 800;
  line-height: 1.2;
}

.tavernPullChoiceOption {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.tavernPullChoicePopup .tavernRewardActionRow {
  align-items: flex-start;
}

.tavernPullButtonSubtext {
  display: block;
  margin: 0;
  color: rgba(255, 244, 200, 0.74);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.1;
}

.tavernRewardName {
  display: block;
  margin: 48px 0 52px;
}

.tavernRewardTitleCluster {
  position: relative;
  display: inline-block;
}

.tavernRewardTitleText {
  color: #fff4c8;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 800;
}

.tavernRewardRarity {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  left: calc(100% + 8px);
  min-width: 32px;
  min-height: 16px;
  margin: 0;
  padding: 1px 8px;
  border: 1px solid rgba(247, 217, 138, 0.34);
  border-radius: 999px;
  color: #ffffff;
  background: rgba(10, 8, 5, 0.42);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
  transform: translateY(-50%);
  white-space: nowrap;
}

.tavernRewardRarity[hidden] {
  display: none;
}

.tavernRewardFlavorText[hidden] {
  display: none;
}

.tavernRewardExpandButton[hidden],
.tavernRewardMultiList[hidden] {
  display: none !important;
}

.tavernRewardFlavorText {
  max-width: min(520px, 86%);
  margin: 0 auto 44px;
  color: rgba(255, 244, 200, 0.82);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(13px, 1.45vw, 16px);
  font-style: italic;
  font-weight: 400;
  line-height: 1.35;
  text-align: center;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.42);
}

.tavernRewardExpandButton {
  display: block;
  margin: 10px auto 0;
  padding: 0;
  border: 0;
  color: #f6df96;
  background: transparent;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 14px;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.tavernRewardExpandButton:hover,
.tavernRewardExpandButton:focus-visible {
  color: #fff4c8;
  background: transparent;
}

.tavernRewardMultiList {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px 0;
  margin: -22px auto 34px;
  max-width: min(700px, 94%);
}

.tavernRewardMultiItem {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 0 14px;
  color: #fff4c8;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(13px, 1.45vw, 16px);
  font-weight: 800;
  line-height: 1.15;
}

.tavernRewardMultiItem:not(:nth-child(5n))::after {
  content: "|";
  position: absolute;
  top: 2px;
  right: -2px;
  color: rgba(247, 217, 138, 0.42);
}

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

  .tavernRewardMultiItem:not(:nth-child(5n))::after {
    content: none;
  }

  .tavernRewardMultiItem:not(:nth-child(3n))::after {
    content: "|";
  }
}

.tavernRewardMiniRarity {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 16px;
  padding: 1px 8px;
  border: 1px solid rgba(247, 217, 138, 0.34);
  border-radius: 999px;
  color: #ffffff;
  background: rgba(10, 8, 5, 0.42);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.tavernRewardRarity[data-rarity="uncommon"] {
  color: #74e17a;
}

.tavernRewardRarity[data-rarity="rare"] {
  color: #71b8ff;
}

.tavernRewardRarity[data-rarity="epic"] {
  color: #c78aff;
}

.tavernRewardRarity[data-rarity="legendary"] {
  color: #ffd75a;
}

.tavernRewardMiniRarity[data-rarity="uncommon"] {
  color: #74e17a;
}

.tavernRewardMiniRarity[data-rarity="rare"] {
  color: #71b8ff;
}

.tavernRewardMiniRarity[data-rarity="epic"] {
  color: #c78aff;
}

.tavernRewardMiniRarity[data-rarity="legendary"] {
  color: #ffd75a;
}

.tavernRewardActionRow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  max-width: 100%;
}

.tavernRewardCloseButton {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 150px;
  padding: 12px 20px;
  border: 1px solid rgba(247, 217, 138, 0.48);
  border-radius: 999px;
  color: #111111;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.64), transparent 42%),
    linear-gradient(135deg, #f2d78a, #b98225 72%, #f5de9a);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.38),
    0 10px 24px rgba(0, 0, 0, 0.26);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px;
  font-weight: 800;
}

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

.tavernRewardSecondaryButton {
  color: #f7edd8;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 42%),
    linear-gradient(135deg, rgba(61, 43, 25, 0.98), rgba(31, 23, 16, 0.98));
}

.tavernRewardCloseButton:hover {
  filter: brightness(1.06);
}

.tavernRewardCloseButton:disabled {
  cursor: var(--cursor-not-allowed, not-allowed);
  filter: grayscale(0.5) brightness(0.72);
  opacity: 0.62;
}


.tavernActionRow .tavernActionButton:hover,
.tavernActionRow .tavernActionButton:focus,
.tavernActionRow .tavernActionButton:focus-visible,
.tavernActionRow .tavernActionButton:active {
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
}