/**
 * [INPUT]: 依赖 account-detail.ts 与 shrine-collection.ts 输出的 A7 首页语义、lore-ui.css 的字体与交互令牌，以及 public/app-assets 的 APK 素材
 * [OUTPUT]: 提供手机优先的身份头、轶闻卡、不对称双列入口、四格藏品与模块状态视觉，不承担弹层内容或业务请求
 * [POS]: public 的账号详情 A7 首页骨架；弹层由 account-detail-panels.css 承接，行为由 account-detail.js 与 account-detail-treasure.js 承接
 * [PROTOCOL]: 变更时更新此头部，然后检查 CLAUDE.md
 */

html,
body {
  background: #f0f2ff;
}

body {
  color: #20222b;
}

.container {
  width: min(100%, 940px);
  margin: 0 auto;
  padding: 0 22px 72px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}

.account-app-header {
  width: 100%;
  min-width: 0;
  grid-column: 1 / -1;
  grid-row: auto;
  justify-self: stretch;
  min-height: 112px;
  padding: 23px 5px 18px;
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgba(106, 116, 155, 0.13);
}

.account-app-back,
.account-app-help {
  width: 34px;
  height: 34px;
  padding: 3px;
  display: grid;
  place-items: center;
  color: #171a22;
  border: 0;
  border-radius: 50%;
  background: transparent;
  text-decoration: none;
  cursor: pointer;
  transition: transform 140ms var(--ease-out), background-color 140ms var(--ease-out);
}

.account-app-back img,
.account-app-help img {
  width: 30px;
  height: 30px;
  display: block;
  object-fit: contain;
}

.account-app-back:active,
.account-app-help:active {
  transform: scale(0.92);
}

.account-app-identity {
  min-width: 0;
}

.account-app-identity .user-name {
  min-width: 0;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
  color: #1e2028;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.18;
  white-space: nowrap;
}

.user-current-title,
.user-account-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-current-title {
  flex: 0 1 auto;
}

.user-account-name {
  flex: 1 1 auto;
}

.user-current-title.level-0,
.user-current-title.level-1 {
  color: #2f92c3;
}

.user-current-title.level-2 {
  color: #41935f;
}

.user-current-title.level-3 {
  color: #cb9e25;
}

.user-current-title.level-4 {
  color: #d55b52;
}

.user-current-title.level-5 {
  color: #9c5db6;
}

.user-title-level {
  min-width: 60px;
  height: 27px;
  padding: 1px 7px 1px 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  gap: 1px;
  color: #5576a4;
  border: 1px solid #a8c6ed;
  border-radius: 14px;
  background: rgba(237, 245, 255, 0.75);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.user-title-level img {
  width: 22px;
  height: 22px;
  display: block;
  object-fit: contain;
}

.account-app-resources {
  min-width: 0;
  margin-top: 4px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 3px 15px;
  color: #74798a;
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1.35;
  white-space: nowrap;
}

.section-card.lore-section {
  width: 100%;
  min-width: 0;
  grid-column: 1 / -1;
  grid-row: auto;
  justify-self: stretch;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid #b7d4ed;
  border-radius: 9px;
  background: #e8f1ff;
  box-shadow: none;
}

.lore-app-content {
  min-width: 0;
  padding: 20px 20px 17px;
}

.lore-app-heading {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  color: #20232b;
  font-family: var(--font-display);
}

.lore-app-heading img {
  width: 25px;
  height: 25px;
  display: block;
  flex: 0 0 auto;
}

.lore-app-heading h2 {
  margin: 0;
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
}

.lore-app-heading > span {
  min-width: 0;
  overflow: hidden;
  color: #333743;
  font-size: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lore-app-copy {
  min-height: 59px;
  margin: 18px 0 0;
  color: #6d7180;
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.55;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.lore-app-copy.is-error {
  color: var(--danger);
}

.lore-section .section-footer {
  min-height: 54px;
  margin: 0;
  padding: 0 20px;
  display: grid;
  place-items: center;
  border-top: 1px solid #b7d4ed;
}

.lore-section .section-footer .btn {
  width: 100%;
  min-height: 52px;
  padding: 0;
  color: #727789;
  border: 0;
  background: transparent;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 400;
}

.shrine-section {
  width: 100%;
  min-width: 0;
  grid-column: 1 / -1;
  grid-row: auto;
  justify-self: stretch;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.shrine-board {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}

.shrine-column {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 12px;
}

.shrine-module {
  width: 100%;
  min-width: 0;
  min-height: 132px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  color: #20222b;
  border: 1px solid rgba(89, 98, 131, 0.09);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 1px 2px rgba(70, 78, 111, 0.025);
  cursor: pointer;
  font: inherit;
  text-align: left;
  text-decoration: none;
  transition: transform 150ms var(--ease-out), border-color 150ms var(--ease-out), box-shadow 150ms var(--ease-out), background-color 150ms var(--ease-out);
}

button.shrine-module {
  appearance: none;
}

article.shrine-module {
  cursor: default;
}

.shrine-module:focus-visible {
  outline: 3px solid rgba(47, 111, 176, 0.5);
  outline-offset: 3px;
}

.shrine-module:active {
  transform: scale(0.985);
}

.shrine-module-heading {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
}

.shrine-module-icon {
  width: 25px;
  height: 25px;
  display: block;
  flex: 0 0 auto;
  object-fit: contain;
}

.shrine-module-title {
  min-width: 0;
  color: #1e2028;
  font-family: var(--font-display);
  font-size: 23px;
  font-weight: 700;
  line-height: 1.15;
}

.shrine-module-trailing {
  margin-left: auto;
  flex: 0 0 auto;
  color: #777b87;
  font-family: var(--font-display);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.shrine-module-divider {
  width: 100%;
  height: 1px;
  margin: 18px 0 16px;
  flex: 0 0 auto;
  background: rgba(53, 61, 83, 0.1);
}

.shrine-module-body {
  min-width: 0;
  color: #626775;
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1.62;
  overflow-wrap: anywhere;
}

.shrine-title-inline {
  color: #d15e58;
}

.shrine-special-inline {
  color: #d15e58;
}

.shrine-wish {
  min-height: 132px;
}

.shrine-treasure-card {
  min-height: 151px;
}

.shrine-heritage {
  min-height: 145px;
}

.shrine-voucher {
  min-height: 143px;
}

.shrine-rumors {
  min-height: 146px;
}

.shrine-collection {
  min-height: 136px;
  padding: 0;
}

.shrine-collection-grid {
  width: 100%;
  height: 100%;
  min-height: 134px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.shrine-collection-cell {
  min-width: 0;
  padding: 0 13px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #1e2028;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
  line-height: 1;
}

.shrine-collection-cell:nth-child(2n) {
  border-left: 1px solid rgba(53, 61, 83, 0.1);
}

.shrine-collection-cell:nth-child(n + 3) {
  border-top: 1px solid rgba(53, 61, 83, 0.1);
}

.shrine-collection-icon {
  width: 24px;
  height: 24px;
  display: block;
  flex: 0 0 auto;
  object-fit: contain;
}

.shrine-collection-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shrine-gambling {
  min-height: 207px;
}

.shrine-pawn {
  min-height: 132px;
}

.shrine-ranking {
  min-height: 132px;
}

.shrine-ranking .shrine-module-body {
  color: #3f414b;
}

.shrine-visually-hidden {
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (hover: hover) and (pointer: fine) {
  .account-app-back:hover,
  .account-app-help:hover {
    background: rgba(255, 255, 255, 0.65);
  }

  button.shrine-module:hover,
  a.shrine-module:hover {
    border-color: rgba(70, 100, 151, 0.24);
    background: #fff;
    box-shadow: 0 7px 18px rgba(54, 68, 102, 0.07);
    transform: translateY(-2px);
  }
}

@media (max-width: 680px) {
  .container {
    padding: 0 18px 58px;
    gap: 14px;
  }

  .account-app-header {
    min-height: 104px;
    padding: 19px 2px 15px;
    grid-template-columns: 31px minmax(0, 1fr) 31px;
    gap: 9px;
  }

  .account-app-back,
  .account-app-help {
    width: 31px;
    height: 31px;
  }

  .account-app-back img,
  .account-app-help img {
    width: 29px;
    height: 29px;
  }

  .account-app-identity .user-name {
    font-size: 20px;
  }

  .user-title-level {
    min-width: 55px;
    height: 25px;
    padding-right: 5px;
    font-size: 11px;
  }

  .user-title-level img {
    width: 20px;
    height: 20px;
  }

  .account-app-resources {
    margin-top: 3px;
    gap: 2px 10px;
    font-size: 12px;
  }

  .lore-app-content {
    padding: 17px 15px 14px;
  }

  .lore-app-heading {
    gap: 7px;
  }

  .lore-app-heading img {
    width: 23px;
    height: 23px;
  }

  .lore-app-heading h2 {
    font-size: 20px;
  }

  .lore-app-heading > span {
    font-size: 17px;
  }

  .lore-app-copy {
    min-height: 49px;
    margin-top: 14px;
    font-size: 16px;
    line-height: 1.55;
  }

  .lore-section .section-footer {
    min-height: 48px;
    padding: 0 15px;
  }

  .lore-section .section-footer .btn {
    min-height: 46px;
    font-size: 16px;
  }

  .shrine-board,
  .shrine-column {
    gap: 10px;
  }

  .shrine-module {
    min-height: 126px;
    padding: 14px;
    border-radius: 8px;
  }

  .shrine-module-heading {
    gap: 7px;
  }

  .shrine-module-icon {
    width: 22px;
    height: 22px;
  }

  .shrine-module-title {
    font-size: 19px;
  }

  .shrine-module-trailing {
    font-size: 14px;
  }

  .shrine-module-divider {
    margin: 14px 0 13px;
  }

  .shrine-module-body {
    font-size: 14px;
    line-height: 1.62;
  }

  .shrine-wish {
    min-height: 127px;
  }

  .shrine-treasure-card {
    min-height: 146px;
  }

  .shrine-heritage,
  .shrine-voucher,
  .shrine-rumors,
  .shrine-pawn,
  .shrine-ranking {
    min-height: 136px;
  }

  .shrine-collection {
    min-height: 130px;
    padding: 0;
  }

  .shrine-collection-grid {
    min-height: 128px;
  }

  .shrine-collection-cell {
    padding: 0 10px;
    gap: 6px;
    font-size: 18px;
  }

  .shrine-collection-icon {
    width: 21px;
    height: 21px;
  }

  .shrine-gambling {
    min-height: 211px;
  }
}

@media (max-width: 390px) {
  .container {
    padding-right: 14px;
    padding-left: 14px;
  }

  .account-app-header {
    grid-template-columns: 28px minmax(0, 1fr) 28px;
    gap: 7px;
  }

  .account-app-back,
  .account-app-help {
    width: 28px;
    height: 28px;
  }

  .account-app-back img,
  .account-app-help img {
    width: 27px;
    height: 27px;
  }

  .account-app-identity .user-name {
    font-size: 18px;
  }

  .user-title-level {
    min-width: 51px;
    height: 23px;
    padding-right: 3px;
    font-size: 10px;
  }

  .user-title-level img {
    width: 18px;
    height: 18px;
  }

  .account-app-resources {
    gap: 2px 7px;
    font-size: 11px;
  }

  .shrine-module {
    padding: 12px;
  }

  .shrine-module-heading {
    gap: 5px;
  }

  .shrine-module-icon {
    width: 20px;
    height: 20px;
  }

  .shrine-module-title {
    font-size: 17px;
  }

  .shrine-module-trailing {
    font-size: 12px;
  }

  .shrine-module-body {
    font-size: 13px;
  }

  .shrine-collection-cell {
    padding: 0 8px;
    font-size: 16px;
  }

  .shrine-collection-icon {
    width: 19px;
    height: 19px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .account-app-back,
  .account-app-help,
  .shrine-module {
    transition: none;
  }
}