/* The rank booklet is a single folio: one featured rank, one continuous route, one record rail. */
#rank-detail-panel.rank-booklet-v2 {
  position: fixed !important;
  inset: 0 !important;
  display: grid;
  place-items: center;
  width: 100vw !important;
  height: 100dvh !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  background: rgba(28, 20, 14, .74) !important;
  color: #4d3223;
  box-sizing: border-box;
}

#rank-detail-panel.rank-booklet-v2,
#rank-detail-panel.rank-booklet-v2 * {
  box-sizing: border-box;
}

.rank-booklet-v2-shell {
  position: relative;
  display: flex !important;
  flex-direction: column;
  width: min(100%, 100vw, var(--rank-booklet-stage-width, var(--portrait-stage-width, 543px)));
  max-width: 100%;
  min-width: 0;
  height: min(760px, calc(100dvh - 20px));
  max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 20px) !important;
  margin: auto !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 2px solid #95683e;
  border-radius: 20px;
  background: linear-gradient(145deg, #fff4d5 0%, #f0d8a9 56%, #dfbd85 100%);
  box-shadow: 0 20px 58px rgba(0, 0, 0, .4), inset 0 0 0 5px rgba(255, 244, 211, .72), inset 0 0 0 7px rgba(133, 87, 49, .32);
}

.rank-booklet-v2 .rank-detail-header {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  min-height: 66px;
  padding: 7px 68px;
  border-bottom: 1px solid rgba(121, 78, 45, .3);
  background: linear-gradient(180deg, rgba(255, 250, 230, .92), rgba(245, 223, 180, .52));
}

.rank-booklet-v2-heading { display: grid; justify-items: center; gap: 2px; }
.rank-booklet-v2-heading h2 {
  margin: 0 !important;
  color: #563627;
  font: 700 clamp(24px, 3.5vw, 30px)/1.05 "Kaiti SC", KaiTi, "STKaiti", serif;
  letter-spacing: .14em;
  text-shadow: 0 1px #fff0c5;
}
.rank-booklet-v2-heading small { color: #765538; font: 600 10px/1.2 system-ui, sans-serif; letter-spacing: .15em; }

.rank-booklet-v2 #rank-detail-close {
  position: absolute;
  z-index: 5;
  top: 8px;
  right: 8px;
  display: grid;
  width: 48px !important;
  min-width: 48px !important;
  height: 48px !important;
  min-height: 48px !important;
  margin: 0;
  padding: 0;
  border-radius: 10px;
  border: 1px solid #67352b;
  background: linear-gradient(180deg, #d46a4e, #933a30);
  box-shadow: inset 0 1px #ffdaa2a6, 0 3px 0 #622d27;
  color: #fff4ce;
  font: 700 28px/1 system-ui, sans-serif;
  cursor: pointer;
  place-items: center;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.rank-booklet-v2 #rank-detail-close::before { content: none; }
.rank-booklet-v2 #rank-detail-close:active { transform: translateY(1px); }
.rank-booklet-v2 #rank-detail-close:focus-visible { outline: 3px solid #2f6d72; outline-offset: 2px; }

.rank-booklet-v2-content {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: max-content minmax(0, 1fr) max-content;
  align-content: stretch;
  justify-items: stretch;
  gap: 8px;
  min-height: 0;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 9px clamp(10px, 2.8vw, 17px) 11px !important;
  overflow-x: hidden;
  overflow-y: hidden;
  overscroll-behavior: contain;
  background: transparent;
  touch-action: manipulation;
  scrollbar-width: thin;
  scrollbar-color: #ad8052 transparent;
}
.rank-booklet-v2-content::-webkit-scrollbar { width: 5px; }
.rank-booklet-v2-content::-webkit-scrollbar-thumb { border-radius: 8px; background: rgba(143, 98, 55, .58); }

.rank-booklet-v2-current {
  position: relative;
  display: grid;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  grid-template-columns: minmax(76px, 96px) minmax(0, .92fr) minmax(104px, 1.08fr);
  grid-template-rows: auto auto auto auto auto auto auto;
  align-items: center;
  justify-items: stretch;
  column-gap: 12px;
  row-gap: 2px;
  padding: 12px 15px 10px;
  border: 1px solid rgba(133, 87, 48, .46);
  border-radius: 16px;
  background: linear-gradient(130deg, rgba(255, 249, 227, .96), rgba(241, 220, 180, .8));
  box-shadow: inset 0 1px rgba(255, 255, 255, .9), 0 4px 11px rgba(90, 57, 29, .12);
  text-align: left;
}
.rank-booklet-v2-eyebrow {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  padding: 0 0 3px;
  color: #8a6846;
  font: 700 10px/1.2 system-ui, sans-serif;
  letter-spacing: .14em;
}
.rank-booklet-v2-badge {
  position: relative;
  display: grid;
  grid-column: 1;
  grid-row: 1 / 5;
  justify-self: center;
  align-self: center;
  width: 96px;
  height: 96px;
  margin: 0 auto;
  place-items: center;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.rank-booklet-v2 #rank-detail-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 128px;
  height: 128px;
  max-width: none;
  --rank-detail-visual-scale: .96;
  object-fit: contain;
  transform-origin: center;
  transform: translate(calc(-50% + var(--rank-detail-icon-final-shift-x, var(--rank-detail-icon-shift-x, 0px))), calc(-50% + var(--rank-detail-icon-final-shift-y, var(--rank-detail-icon-shift-y, 0px)))) scale(calc(var(--rank-detail-icon-scale, 1) * var(--rank-detail-visual-scale)));
}
.rank-booklet-v2-name { grid-column: 2; grid-row: 2; align-self: end; margin: 0; color: #57392a; font: 700 23px/1.08 "Kaiti SC", KaiTi, "STKaiti", serif; letter-spacing: .06em; }
.rank-booklet-v2-state { grid-column: 2; grid-row: 3; align-self: start; margin: 1px 0 0; color: #765638; font: 600 12px/1.25 system-ui, sans-serif; }
.rank-booklet-v2-stars { grid-column: 2; grid-row: 4; align-self: center; display: flex; gap: 6px; margin: 4px 0 0; color: #99896d; font: 18px/1 system-ui, sans-serif; }
.rank-booklet-v2-stars i { font-style: normal; text-shadow: 0 1px rgba(255, 255, 255, .7); }
.rank-booklet-v2-stars i.is-filled { color: #d89a30; text-shadow: 0 1px #fff0bb, 0 0 8px rgba(218, 158, 45, .35); }
.rank-booklet-v2-record { display: grid; grid-column: 3; grid-row: 1 / 5; align-self: center; grid-template-columns: minmax(0, 1fr); align-items: center; height: auto; padding: 4px 0 4px 10px; border: 0; border-left: 1px solid rgba(133, 87, 48, .29); }
.rank-booklet-v2-record > span { display: flex; align-items: baseline; justify-content: space-between; gap: 5px; padding: 4px 2px; border-right: 0; border-bottom: 1px solid rgba(133, 87, 48, .16); }
.rank-booklet-v2-record > span:last-child { border-bottom: 0; }
.rank-booklet-v2-record small { color: #765638; font: 500 9px/1.2 system-ui, sans-serif; white-space: nowrap; }
.rank-booklet-v2-record b { color: #63432c; font: 700 15px/1 Georgia, serif; font-variant-numeric: tabular-nums; }
.rank-booklet-v2-progress-meta { grid-column: 1 / -1; grid-row: 5; display: flex; justify-content: space-between; width: 100%; margin-top: 5px; color: #715437; font: 600 10px/1.25 system-ui, sans-serif; }
.rank-booklet-v2-progress-meta b { color: #60412c; }
.rank-booklet-v2-progress-track { grid-column: 1 / -1; grid-row: 6; width: 100%; height: 7px; margin-top: 2px; overflow: hidden; border: 1px solid rgba(115, 76, 42, .52); border-radius: 99px; background: #cdb58d; box-shadow: inset 0 1px 2px rgba(63, 43, 26, .22); }
.rank-booklet-v2-progress-track > b { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #b37b35, #f2ce6c); box-shadow: 0 0 8px rgba(207, 158, 60, .5); }
.rank-booklet-v2-tip { grid-column: 1 / -1; grid-row: 7; justify-self: center; margin-top: 3px; color: #715437; font: 500 10px/1.25 system-ui, sans-serif; text-align: center; }

.rank-booklet-v2-journey {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 2px 4px 0;
}
.rank-booklet-v2-section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 4px 7px;
  border-bottom: 1px solid rgba(133, 87, 48, .33);
}
.rank-booklet-v2-section-heading h3 { margin: 0; color: #62432e; font: 700 17px/1.15 "Kaiti SC", KaiTi, "STKaiti", serif; letter-spacing: .06em; }
.rank-booklet-v2-section-heading small { color: #765638; font: 500 10px/1.2 system-ui, sans-serif; }
.rank-booklet-v2-route { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(4, minmax(0, 1fr)); align-content: stretch; gap: 0; width: 100%; max-width: 100%; min-width: 0; max-height: none; min-height: 0; margin: 0; padding-top: 3px; }
.rank-booklet-v2-track { height: 100%; }
.rank-booklet-v2-chapter,
.rank-detail-stage {
  position: relative;
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  align-items: center;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  min-height: 0;
  padding: 3px 7px;
  border: 0;
  border-bottom: 1px solid rgba(133, 87, 48, .22);
  border-radius: 0;
  background: transparent;
}
.rank-booklet-v2-chapter:last-child,
.rank-detail-stage:last-child { border-bottom: 0; }
.rank-booklet-v2-chapter.is-current-chapter,
.rank-detail-stage.is-current-chapter { border-color: rgba(153, 100, 43, .35); border-radius: 9px; background: linear-gradient(90deg, rgba(255, 239, 196, .72), rgba(255, 246, 222, .12)); }
.rank-booklet-v2-chapter-heading { display: grid; justify-items: start; gap: 3px; min-width: 0; padding-left: 1px; }
.rank-booklet-v2-chapter-title,
.rank-detail-stage > h4 { margin: 0; color: #694a32; font: 700 12px/1.2 "Kaiti SC", KaiTi, "STKaiti", serif; }
.rank-booklet-v2-chapter-status { color: #8b6b48; font: 600 9px/1.1 system-ui, sans-serif; }
.rank-booklet-v2-chapter-status.is-locked { color: #857c6a; }
.rank-booklet-v2-track,
.rank-detail-stage-track { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; align-content: center; align-items: center; width: 100%; max-width: 100%; min-width: 0; min-height: 0; margin: 0; padding: 0; list-style: none; }
.rank-booklet-v2-track::before,
.rank-detail-stage-track::before { position: absolute; top: 35px; right: 17%; left: 17%; height: 1px; content: ''; background: linear-gradient(90deg, rgba(168, 127, 71, .32), rgba(153, 113, 61, .58), rgba(168, 127, 71, .32)); }
.rank-booklet-v2-node,
.rank-detail-node { position: relative; z-index: 1; display: grid; grid-template-rows: 72px auto auto; justify-items: center; align-content: center; width: 100%; max-width: 100%; min-width: 0; text-align: center; }
.rank-detail-node.is-locked { opacity: .62; filter: grayscale(.28); }
.rank-booklet-v2-node-art,
.rank-detail-node-art { position: relative; display: grid; box-sizing: border-box; width: 70px; height: 70px; aspect-ratio: 1; align-self: center; justify-self: center; place-items: center; overflow: visible; border: 0; border-radius: 50%; background: transparent; box-shadow: none; }
.rank-booklet-v2-node.is-current .rank-booklet-v2-node-art,
.rank-detail-node.is-current .rank-detail-node-art { border: 2px solid #bd842f; background: radial-gradient(circle at 44% 34%, rgba(255, 251, 233, .8), rgba(223, 196, 148, .48)); box-shadow: 0 0 0 2px rgba(226, 181, 92, .24), inset 0 0 0 2px rgba(255, 248, 220, .8), 0 2px 6px rgba(73, 47, 26, .18); }
.rank-booklet-v2-node.is-locked .rank-booklet-v2-node-art,
.rank-detail-node.is-locked .rank-detail-node-art { filter: saturate(.65); }
.rank-booklet-v2-node-icon { position: absolute; top: 50%; left: 50%; width: 76px; height: 76px; max-width: none; --rank-detail-node-visual-scale: .88; object-fit: contain; transform: translate(calc(-50% + var(--rank-detail-node-final-shift-x, var(--rank-detail-node-shift-x, 0))), calc(-50% + var(--rank-detail-node-final-shift-y, var(--rank-detail-node-shift-y, 0)))) scale(calc(var(--rank-detail-node-scale, 1) * var(--rank-detail-node-visual-scale))); }
.rank-detail-node-art img { width: 76px; height: 76px; max-width: none; align-self: center; justify-self: center; --rank-detail-node-visual-scale: .88; object-fit: contain; transform: translate(var(--rank-detail-node-final-shift-x, var(--rank-detail-node-shift-x, 0)), var(--rank-detail-node-final-shift-y, var(--rank-detail-node-shift-y, 0))) scale(calc(var(--rank-detail-node-scale, 1) * var(--rank-detail-node-visual-scale))); }
.rank-booklet-v2-node b,
.rank-detail-node > b { max-width: 100%; margin-top: 2px; overflow: hidden; color: #60432e; font: 700 11px/1.1 "Kaiti SC", KaiTi, "STKaiti", serif; text-overflow: ellipsis; white-space: nowrap; }
.rank-booklet-v2-node small,
.rank-detail-node > small { margin-top: 2px; color: #765638; font: 500 9px/1.1 system-ui, sans-serif; }
.rank-booklet-v2-node.is-locked b,
.rank-booklet-v2-node.is-locked small,
.rank-detail-node.is-locked > b,
.rank-detail-node.is-locked > small { color: #786c59; }
.rank-booklet-v2-node.is-earned b { color: #8a5427; }
.rank-booklet-v2-node.is-earned small:empty { visibility: hidden; }
.rank-booklet-v2-node.is-locked .rank-booklet-v2-node-icon { filter: grayscale(.72) brightness(.78); opacity: .72; }

.rank-detail-record { display: none; }

/* Additive rule rail; leave the approved badge sizes and route intact. */
.rank-booklet-v2-rules {
  min-width: 0;
  padding: 8px 4px 0;
  color: #60432e;
  font: 500 12px/1.6 system-ui, sans-serif;
  overflow-wrap: anywhere;
}
.rank-booklet-v2-heading h2, .rank-booklet-v2-name,
.rank-booklet-v2-section-heading h3, .rank-booklet-v2-chapter-title,
.rank-booklet-v2-node b { font-family: 'Library WenKai', KaiTi, serif; }

@media (max-width: 560px) {
  #rank-detail-panel.rank-booklet-v2 { padding: 0 !important; }
  .rank-booklet-v2-shell { border-radius: 16px; }
  .rank-booklet-v2 .rank-detail-header { min-height: 62px; padding: 6px 60px; }
  .rank-booklet-v2 #rank-detail-close { top: 6px; right: 6px; }
  .rank-booklet-v2-content { gap: 7px; padding: 8px 8px 10px !important; }
  .rank-booklet-v2-current { grid-template-columns: 82px minmax(0, .9fr) minmax(104px, 1.1fr); column-gap: 6px; padding: 10px 10px 9px; }
  .rank-booklet-v2-badge { width: 80px; height: 80px; }
  .rank-booklet-v2 #rank-detail-icon { width: 116px; height: 116px; --rank-detail-visual-scale: .96; }
  .rank-booklet-v2-name { font-size: 21px; }
  .rank-booklet-v2-state { font-size: 11px; }
  .rank-booklet-v2-stars { gap: 5px; font-size: 17px; }
  .rank-booklet-v2-journey { padding: 1px 1px 0; }
  .rank-booklet-v2-section-heading { padding-right: 3px; padding-left: 3px; }
  .rank-booklet-v2-section-heading h3 { font-size: 16px; }
  .rank-booklet-v2-section-heading small { font-size: 9px; }
  .rank-booklet-v2-chapter, .rank-detail-stage { grid-template-columns: 82px minmax(0, 1fr); padding-right: 3px; padding-left: 4px; }
  .rank-booklet-v2-chapter-title, .rank-detail-stage > h4 { font-size: 12px; }
  .rank-booklet-v2-chapter-status { font-size: 9px; }
  .rank-booklet-v2-node { grid-template-rows: 66px auto auto; }
  .rank-booklet-v2-track::before, .rank-detail-stage-track::before { top: 32px; }
  .rank-booklet-v2-node-art, .rank-detail-node-art { width: 64px; height: 64px; }
  .rank-booklet-v2-node-icon, .rank-detail-node-art img { width: 72px; height: 72px; --rank-detail-node-visual-scale: .88; }
  .rank-booklet-v2-node b, .rank-detail-node > b { font-size: 10.5px; }
  .rank-booklet-v2-node small, .rank-detail-node > small { font-size: 9.5px; }
  .rank-booklet-v2-record { padding-left: 7px; }
  .rank-booklet-v2-record small { font-size: 8.5px; }
  .rank-booklet-v2-record b { font-size: 14px; }
}

@media (max-width: 360px) {
  .rank-booklet-v2-current { grid-template-columns: 72px minmax(0, .86fr) minmax(92px, 1.14fr); column-gap: 4px; padding-right: 8px; padding-left: 8px; }
  .rank-booklet-v2-badge { width: 70px; height: 70px; }
  .rank-booklet-v2 #rank-detail-icon { width: 106px; height: 106px; }
  .rank-booklet-v2-chapter, .rank-detail-stage { grid-template-columns: 72px minmax(0, 1fr); }
  .rank-booklet-v2-chapter-title, .rank-detail-stage > h4 { font-size: 10px; }
  .rank-booklet-v2-chapter-status { font-size: 7.5px; }
  .rank-booklet-v2-node b, .rank-detail-node > b { font-size: 9.5px; }
  .rank-booklet-v2-node small, .rank-detail-node > small { font-size: 9px; }
}

@media (max-height: 700px) {
  .rank-booklet-v2-shell { height: calc(100dvh - 14px); }
  .rank-booklet-v2 .rank-detail-header { min-height: 55px; }
  .rank-booklet-v2-content { gap: 5px; padding-top: 5px !important; padding-bottom: 6px !important; }
  .rank-booklet-v2-current { padding-top: 7px; padding-bottom: 6px; }
  .rank-booklet-v2-badge { width: 82px; height: 82px; }
  .rank-booklet-v2 #rank-detail-icon { width: 108px; height: 108px; }
  .rank-booklet-v2-route { padding-top: 1px; }
  .rank-booklet-v2-chapter, .rank-detail-stage { padding-top: 1px; padding-bottom: 1px; }
  .rank-booklet-v2-node { grid-template-rows: 39px auto auto; }
  .rank-booklet-v2-route { grid-template-rows: repeat(4, minmax(0, 1fr)); }
  .rank-booklet-v2-node { grid-template-rows: 48px auto auto; }
  .rank-booklet-v2-node-art, .rank-detail-node-art { width: 46px; height: 46px; }
  .rank-booklet-v2-track::before, .rank-detail-stage-track::before { top: 31px; }
  .rank-booklet-v2-node-icon, .rank-detail-node-art img { width: 56px; height: 56px; }
  .rank-booklet-v2-record, .rank-detail-record { padding-top: 3px; }
}
@media (max-height: 620px) {
  .rank-booklet-v2-current { padding: 6px 8px; }
  .rank-booklet-v2-node { grid-template-rows: 36px auto auto; }
  .rank-booklet-v2-node-art, .rank-detail-node-art { width: 36px; height: 36px; }
  .rank-booklet-v2-node-icon, .rank-detail-node-art img { width: 44px; height: 44px; }
  .rank-booklet-v2-node b { font-size: 10px; }
  .rank-booklet-v2-node small { font-size: 9px; }
  .rank-booklet-v2-chapter-heading { gap: 2px; }
  .rank-booklet-v2-section-heading { padding-bottom: 4px; }
  .rank-booklet-v2-record > span { padding-block: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  .rank-booklet-v2 #rank-detail-close,
  .rank-booklet-v2-progress-track > b { transition: none; }
}