.checkin-section {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(420px, 1.1fr);
  gap: clamp(45px, 8vw, 130px);
  align-items: center;
  height: clamp(690px, 89vh, 900px);
  overflow-y: auto;
  padding: 90px clamp(25px, 11vw, 175px) 24px;
  background-image: linear-gradient(90deg, rgba(6, 15, 25, .85) 0%, rgba(6, 15, 25, .5) 45%, rgba(6, 15, 25, .18) 100%), linear-gradient(0deg, rgba(6, 15, 25, .62), transparent 50%), url('/assets/images/wd-bg-tq.jpg');
  background-size: cover;
  background-position: center 38%;
}

.checkin-section[hidden] { display: none; }

.page-track { align-items: flex-start; width: 800vw; }

main { overflow: clip; }

.page-track.show-checkin { transform: translateX(-100vw); }

.page-track.show-events { transform: translateX(-200vw); }


.page-track.show-qibao { transform: translateX(-300vw); }

.page-track.show-games { transform: translateX(-400vw); }
.page-track.show-prizes { transform: translateX(-500vw); }

.page-track.show-cdkey { transform: translateX(-600vw); }

.page-track.show-profile { transform: translateX(-700vw); }

.page-track > section { flex: 0 0 100vw; width: 100vw; }

html.initial-page-checkin .page-track { transform: translateX(-100vw); }

html.initial-page-events .page-track { transform: translateX(-200vw); }


html.initial-page-qibao .page-track { transform: translateX(-300vw); }

html.initial-page-games .page-track { transform: translateX(-400vw); }
html.initial-page-prizes .page-track { transform: translateX(-500vw); }

html.initial-page-cdkey .page-track { transform: translateX(-600vw); }

html.initial-page-profile .page-track { transform: translateX(-700vw); }

body.auth-pending .page-track { transition: none; }

.hero { background: #0a1822; }

.hero-scene { position: absolute; z-index: -2; inset: 0; overflow: hidden; }

.hero-scene > div { position: absolute; inset: -2%; background-repeat: no-repeat; pointer-events: none; }

.hero-scene-bg { background-image: var(--hero-bg-image, url('https://image.gyyxcdn.cn/upload/wd/hd/p/gd/czhd/imagesV4/bg.jpg')); background-position: center; background-size: cover; transform: scale(1.025); }

.hero-scene-role { --hero-role-art-offset: clamp(140px, 14.5vw, 280px); background-image: var(--hero-role-image, url('https://image.gyyxcdn.cn/upload/wd/hd/p/gd/czhd/imagesV4/role.png')); background-position: center top; background-size: cover; transform: translate3d(calc(var(--hero-role-x, 0px) - var(--hero-role-art-offset)), var(--hero-role-y, 0px), 0); }

@media (max-width: 850px) {
  .hero-scene > .hero-scene-role {
    right: calc(-2% - var(--hero-role-art-offset) - 16px);
    background-position: calc(50% - clamp(70px, 7.25vw, 140px)) top;
  }
}

.hero-scene-mask { background-image: var(--hero-mask-image, url('https://image.gyyxcdn.cn/upload/wd/hd/p/gd/czhd/imagesV4/mask.png')); background-position: center; background-size: cover; transform: translate3d(var(--hero-mask-x, 0px), var(--hero-mask-y, 0px), 0); animation: hero-mask-breathe 6s ease-in-out infinite alternate; }

.hero-scrim { z-index: -1; background: linear-gradient(90deg, rgba(6, 15, 25, .78), rgba(6, 15, 25, .28) 52%, rgba(6, 15, 25, .08)), linear-gradient(0deg, rgba(6, 15, 25, .5), transparent 48%); }

@keyframes hero-mask-breathe { from { opacity: .78; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
.hero-scene-role, .hero-scene-mask { animation: none; }
 }


/* Redemption controls. */
.cdkey-redeem-panel { background: transparent; padding: 0; border: 0; }

.cdkey-redeem-form input[type="text"] { height: 46px !important; border: 1px solid rgba(231, 189, 123, .52) !important; border-radius: 2px !important; background: rgba(5, 19, 27, .92) !important; color: #f2f6f2 !important; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .16); }

.cdkey-redeem-form .primary-btn { height: 46px; min-width: 118px; padding: 0 18px; border: 1px solid var(--gold-bright); background: var(--gold-bright); color: var(--ink); font-weight: 700; }

.user-message-list {   scrollbar-gutter: stable; }

.field-hint { display: block; margin-top: 5px; color: rgba(255, 255, 255, .42); font-size: 10px; }

.member-section { display: flex; align-items: center; min-height: 690px; height: 89vh; max-height: 900px; padding: 90px clamp(25px, 11vw, 175px) 30px; color: #f2f6f2; background-image: linear-gradient(90deg, rgba(6, 15, 25, .85), rgba(6, 15, 25, .28)), url('/assets/images/wd-bg-tq.jpg'); background-size: cover; background-position: center 38%; }

.member-section:has(.events-content) { background-image: linear-gradient(90deg, rgba(6, 15, 25, .84), rgba(6, 15, 25, .25)), var(--events-bg-image, url('https://image.gyyxcdn.cn/upload/wd/hd/p/2026/zh/xfxx0715/images/wd_bg01.jpg')); }

.member-section[hidden] { display: none; }

.member-page-content { width: min(100%, 670px); }

.member-page-content .eyebrow { color: var(--gold-bright); }

.member-page-content h2 { margin: 0 0 25px; color: #fff; font: 900 clamp(38px, 4.5vw, 64px) / 1.2 var(--serif); }

.cdkey-redeem-panel { width: min(100%, 760px); max-width: 760px; background: transparent; border: 0; padding: 0; }

.cdkey-redeem-panel > p { margin: 0 0 18px; color: rgba(255, 255, 255, .72); font-size: 13px; }

.cdkey-page-content .cdkey-redeem-form { display: grid; grid-template-columns: minmax(0, 1fr) 132px; width: 100%; align-items: stretch; gap: 12px; }

.cdkey-redeem-form label { display: block; min-width: 0; }

.cdkey-page-content .cdkey-redeem-form input[type="text"] { display: block; width: 100%; min-width: 0; height: 48px; box-sizing: border-box; padding: 0 15px; border: 1px solid rgba(231, 189, 123, .58) !important; border-radius: 2px; background: rgba(5, 19, 27, .94) !important; color: #f2f6f2 !important; font: 14px var(--sans); letter-spacing: .08em; outline: none; color-scheme: dark; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .16); }

.cdkey-redeem-form input:focus-visible { border-color: var(--gold-bright); box-shadow: 0 0 0 2px rgba(231, 189, 123, .15); }

.cdkey-page-content .cdkey-redeem-form .primary-btn { width: 100%; min-width: 0; min-height: 48px; height: 48px; margin: 0; padding: 0 12px; border: 1px solid var(--gold-bright); background: var(--gold-bright); color: var(--ink); white-space: nowrap; }

.member-empty { margin: 0; border-top: 1px solid rgba(231, 189, 123, .4); padding: 24px 0; color: rgba(242, 246, 242, .72); font-size: 14px; }

.member-section:has(.events-content) { align-items: flex-start; overflow-y: auto; }

.events-content { width: min(100%, 1140px); margin: auto 0; padding: 24px 0; }

.event-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-height: min(58vh, 530px); overflow-y: auto; }

.event-grid, .member-section:has(.events-content), .event-modal-content {   scrollbar-gutter: stable; }

.event-card { position: relative; display: flex; align-items: flex-end; min-width: 0; min-height: 220px; aspect-ratio: 4 / 3; overflow: hidden; padding: 22px; text-align: left; color: #fff; background: #122b31; border: 1px solid rgba(231, 189, 123, .35); }

.event-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }

.event-card-no-image { flex-direction: column; align-items: stretch; justify-content: space-between; gap: 18px; background: #153039 var(--events-bg-image, url('https://image.gyyxcdn.cn/upload/wd/hd/p/2026/zh/xfxx0715/images/wd_bg01.jpg')) center / cover no-repeat; }

.event-card-excerpt { position: relative; z-index: 1; display: -webkit-box; min-width: 0; min-height: 0; overflow: hidden; color: rgba(255, 255, 255, .9); font-size: 13px; line-height: 1.6; white-space: pre-line; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }

.event-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(5, 19, 27, .95), rgba(5, 19, 27, .12) 75%); }

.event-card-no-image::after { background: linear-gradient(180deg, rgba(5, 19, 27, .74), rgba(5, 19, 27, .2) 46%, rgba(5, 19, 27, .94)); }

.event-card:hover img, .event-card:focus-visible img { transform: scale(1.04); }

.event-card:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; }

.event-card-copy { position: relative; z-index: 1; display: grid; gap: 5px; min-width: 0; }

.event-card-copy strong { font: 700 22px var(--serif); overflow-wrap: anywhere; }

.event-card-copy small { color: rgba(255, 255, 255, .76); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }

.event-modal-shell { position: relative; width: min(100%, 820px); max-height: min(88vh, 820px); }

.event-modal-content { width: 100%; max-height: inherit; overflow-y: auto; background: #102731; color: #fff; border: 1px solid rgba(231, 189, 123, .55); box-shadow: 0 18px 60px rgba(0, 0, 0, .4); }

/* Activity details are shown in the events page flow, matching the admin
   editor pattern instead of opening a second-layer modal. */
.event-detail-view { width: 100%; min-width: 0; }
.event-detail-view[hidden], #event-list-view[hidden] { display: none; }
.event-detail-back { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; margin: 0 0 16px; padding: 8px 13px; border: 1px solid rgba(231, 189, 123, .48); background: transparent; color: var(--gold-bright); font-size: 12px; }
.event-detail-back:hover, .event-detail-back:focus-visible { border-color: var(--gold-bright); background: rgba(231, 189, 123, .12); color: #fff; outline: none; }
.event-detail-view .event-modal-content { max-height: none; overflow: visible; background: transparent; border: 1px solid rgba(231, 189, 123, .35); box-shadow: none; }

.event-modal-close { z-index: 2; display: grid; place-items: center; width: 38px; height: 38px; top: -16px; right: -16px; background: #102731; color: #fff; border: 1px solid rgba(231, 189, 123, .65); box-shadow: 0 8px 20px rgba(0, 0, 0, .3); }

.event-modal-content > img { display: block; width: 100%; aspect-ratio: 16 / 7; object-fit: cover; }

.event-modal-content > img[hidden] { display: none; }

.event-modal-body { padding: 22px clamp(22px, 5vw, 42px) 26px; }

.event-modal-body .eyebrow { margin-bottom: 10px; }

.event-modal-body h2 { margin: 0; font: 700 30px var(--serif); overflow-wrap: anywhere; }

#event-modal-summary { margin: 8px 0 10px; color: var(--gold-bright); font-size: 14px; }

#event-modal-detail { color: rgba(255, 255, 255, .82); white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; line-height: 1.8; }
#event-modal-detail .asset-release-account-table {
  width: 100%; min-width: 580px; border-collapse: collapse; table-layout: fixed;
  white-space: normal; background: rgba(5, 22, 28, .52); border: 1px solid rgba(231, 189, 123, .25);
}
.asset-release-account-table caption { text-align: left; margin-bottom: 8px; color: var(--gold-bright); }
.asset-release-account-table :is(th, td) { padding: 10px 14px; text-align: left; border-bottom: 1px solid rgba(231, 189, 123, .14); overflow-wrap: anywhere; }
.asset-release-account-table th { background: rgba(231, 189, 123, .09); color: var(--gold-bright); font-weight: 600; }
.asset-release-account-table :is(th, td):first-child { width: 64px; text-align: center; }
.asset-release-account-table :is(th, td):nth-child(2) { width: 24%; }
.asset-release-account-table :is(th, td):nth-child(3),
.asset-release-account-table :is(th, td):nth-child(4) { font-variant-numeric: tabular-nums; }
.asset-release-account-table :is(th, td):last-child { width: 115px; color: var(--gold-bright); }
.asset-release-account-table tfoot { background: rgba(231, 189, 123, .07); color: var(--gold-bright); font-weight: 600; }
.asset-release-account-table tfoot th:first-child { width: auto; text-align: left; }
.asset-release-account-scroll { max-width: 100%; overflow-x: auto; margin: 12px 0 18px; white-space: normal; }
.asset-release-account-scroll:focus-visible { outline: 1px solid var(--gold-bright); outline-offset: 3px; }
@media (max-width: 480px) {
  .asset-release-account-table :is(th, td) { padding: 8px; font-size: 12px; }
  .asset-release-account-table :is(th, td):first-child { width: 42px; }
  .asset-release-account-table :is(th, td):last-child { width: 92px; }
}

#event-lottery[hidden], #event-draw-button[hidden], #event-draw-ten-button[hidden] { display: none; }

#event-lottery { margin-top: 16px; border-top: 1px solid rgba(231, 189, 123, .35); padding-top: 12px; }

#event-lottery h3 { margin: 0; font: 600 20px var(--serif); }

#event-lottery-cost { margin: 6px 0 10px; color: var(--gold-bright); font-size: 12px; }

#event-lottery-status { display: grid; gap: 5px; margin: 12px 0; padding: 16px 18px; border: 1px solid #df9b64; border-left: 4px solid #df9b64; border-radius: 8px; background: #3b2925; color: #ffe1bd; line-height: 1.6; }
#event-lottery-status[hidden] { display: none; }
#event-lottery-status strong { font-size: 20px; font-weight: 700; }
#event-lottery-status span { color: #efd4c0; font-size: 13px; }
.event-card .event-card-badge.event-card-badge-closed { margin-left: 6px; border-color: #df9b64; background: #3b2925; color: #ffe1bd; }

#event-lottery-wheel { display: grid; grid-template: repeat(3, auto) / repeat(4, minmax(0, 1fr)); gap: 7px; width: min(100%, 520px); margin: 10px auto 12px; padding: 7px; border: 1px solid rgba(231, 189, 123, .42); background: rgba(5, 19, 27, .62); }

.event-lottery-cell { display: grid; align-content: center; justify-items: center; min-width: 0; min-height: 66px; padding: 7px 5px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .07); color: rgba(255, 255, 255, .88); text-align: center; transition: border-color .12s ease, background-color .12s ease, color .12s ease, box-shadow .12s ease, transform .12s ease; }

.event-lottery-cell strong { width: 100%; white-space: normal; overflow-wrap: anywhere; font: 600 12px / 1.5 var(--serif); }

.event-lottery-cell small { width: 100%; margin-top: 3px; white-space: normal; overflow-wrap: anywhere; color: rgba(255, 255, 255, .68); font-size: 10px; line-height: 1.5; }

.event-prize-avatar { width: 48px; height: 48px; object-fit: contain; margin-bottom: 5px; }
.event-prize-claim-hint { margin: 10px 0 0; color: rgba(255,255,255,.72); font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
.event-filters { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 18px; }
.event-filters button { min-height: 40px; padding: 0 0 8px; border-bottom: 2px solid transparent; background: transparent; color: rgba(255,255,255,.65); font-size: 13px; }
.event-filters button[aria-pressed=true] { color: var(--gold-bright); border-bottom-color: var(--gold-bright); }
.event-filters button:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; }

.event-lottery-cell.is-empty { color: rgba(255, 255, 255, .45); font-size: 11px; }

.event-lottery-cell.is-selected { border-color: var(--gold-bright); background: rgba(231, 189, 123, .22); color: #fff; box-shadow: 0 0 0 2px rgba(231, 189, 123, .2), 0 0 18px rgba(231, 189, 123, .26); transform: translateY(-2px); }

.event-lottery-cell.is-selected small { color: var(--gold-bright); }

.event-lottery-wheel.is-spinning { box-shadow: 0 0 0 1px rgba(231, 189, 123, .18), 0 0 24px rgba(231, 189, 123, .12); }

.lottery-odds-details { margin: 14px 0 10px; border-top: 1px solid rgba(231, 189, 123, .24); border-bottom: 1px solid rgba(231, 189, 123, .24); color: rgba(255, 255, 255, .76); }

.lottery-odds-details summary { padding: 11px 2px; color: var(--gold-bright); font-size: 12px; cursor: pointer; }

.lottery-odds-details summary:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }

.lottery-odds-details > div { padding: 0 2px 10px; }

.lottery-odds-details #event-lottery-odds-list { padding-top: 4px; }

.lottery-odds-details p { margin: 5px 0; font-size: 11px; line-height: 1.7; }

.event-prize { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid rgba(255, 255, 255, .12); font-size: 13px; }

.event-prize small { color: var(--gold-bright); white-space: nowrap; }

.event-lottery-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 auto 10px; }

.event-lottery-actions .primary-btn { flex: 1 0 80px; min-width: max-content; min-height: 40px; margin: 0; padding: 8px 10px; font-size: 12px; white-space: nowrap; }

.event-lottery-actions .primary-btn:disabled { opacity: .65; cursor: not-allowed; transform: none; }

.lottery-skip-animation { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 0 auto 10px; color: rgba(255, 255, 255, .62); font-size: 11px; cursor: pointer; }

.lottery-skip-animation input { width: 14px; height: 14px; margin: 0; accent-color: var(--gold-bright); }

#event-draw-result, #cdkey-redeem-message { display: none; }

@media (max-width: 900px) {
.event-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 }

@media (max-width: 540px) {
.event-grid { grid-template-columns: 1fr; max-height: 58vh; }

.event-card { min-height: 165px; aspect-ratio: 2 / 1; }
 }

@media (max-width: 540px) {
#event-lottery-wheel { gap: 5px; padding: 5px; }

.event-lottery-cell { min-height: 0; padding: 6px 3px; }

.event-lottery-cell strong { font-size: 11px; }

.event-lottery-cell small { font-size: 9px; }

.event-lottery-actions { gap: 8px; }

.event-lottery-actions .primary-btn { flex: 1 0 80px; min-width: max-content; padding: 8px 10px; }
 }

@media (prefers-reduced-motion: reduce) {
.event-lottery-cell { transition: none; }
 }

@media (max-width: 540px) {
.cdkey-page-content .cdkey-redeem-form { grid-template-columns: 1fr; }

.cdkey-page-content .cdkey-redeem-form .primary-btn { width: 100%; }
 }

.lottery-config-title { display: block; margin: 0 0 16px; padding-bottom: 10px; border-bottom: 1px solid rgba(231, 189, 123, .2); color: #fff; font: inherit; font-weight: 700; }

.checkin-intro h2 {
  font: 900 clamp(38px, 4.5vw, 64px) / 1.2 var(--serif);
  letter-spacing: .03em;
  margin: 0;
  color: #f2f6f2;
}

.checkin-intro h2 em { font-style: normal; color: var(--gold-bright); text-shadow: 0 1px 14px rgba(231, 189, 123, .2); }

.checkin-intro .eyebrow.warm { color: var(--gold-bright); }

.checkin-intro > p:not(.eyebrow) { max-width: 360px; color: rgba(242, 246, 242, .72); font-size: 14px; margin: 22px 0 31px; }

.checkin-stats { display: grid; grid-template-columns: max-content max-content; gap: 16px 36px; }

.checkin-stats div { display: flex; flex-direction: column; border-left: 1px solid rgba(255, 255, 255, .26); padding-left: 14px; }

.checkin-stats strong { font: 600 27px var(--serif); color: #fff; }

.checkin-stats span { font-size: 10px; color: rgba(242, 246, 242, .64); margin-top: 2px; }

.checkin-stats .checkin-earned { grid-column: 1 / -1; min-width: 0; }

.checkin-stats .checkin-earned[hidden] { display: none; }

.checkin-stats .checkin-earned strong { font: 600 15px var(--sans); overflow-wrap: anywhere; }

.currency-label { display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; white-space: nowrap; }

.currency-label::before { content: ''; display: inline-block; flex: none; width: 16px; height: 16px; background: #e7bd7b; -webkit-mask: url('./yuanbao.svg') center / contain no-repeat; mask: url('./yuanbao.svg') center / contain no-repeat; }

.currency-silver::before { background: #b9d2dc; }

.currency-both::before { background: linear-gradient(90deg, #e7bd7b 50%, #b9d2dc 50%); }

.checkin-stats .currency-label { color: #fff; font-size: 13px; }

.checkin-stats .currency-label + .currency-label { margin-left: 12px; }

.account-popover .currency-label { display: inline-flex; }

.currency-select { background-repeat: no-repeat !important; background-position: 11px center !important; background-size: 17px 17px !important; padding-left: 37px !important; }

.currency-select:has(option[value="gold"]:checked), .currency-select:has(option[value="goldCoin"]:checked) { background-image: url('./yuanbao.svg') !important; }

.currency-select:has(option[value="silver"]:checked), .currency-select:has(option[value="silverCoin"]:checked) { background-image: url('./yuanbao-silver.svg') !important; }

.currency-select:has(option[value="dao"]:checked) { background-image: url('./coin.svg') !important; }

.draw-currency-select { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; opacity: 0 !important; pointer-events: none !important; }

.draw-currency-picker { position: relative; display: block; margin-top: 7px; }

.draw-currency-trigger { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 44px; padding: 0 12px; border: 1px solid rgba(231, 189, 123, .4); border-radius: 2px; background: rgba(5, 19, 27, .86); color: #f2f6f2; font: 13px var(--sans); cursor: pointer; }

.draw-currency-trigger:hover, .draw-currency-picker.is-open .draw-currency-trigger, .draw-currency-trigger:focus-visible { border-color: var(--gold-bright); }

.draw-currency-trigger:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }

.draw-currency-chevron { color: var(--gold-bright); font-size: 17px; line-height: 1; }

.draw-currency-picker.is-open .draw-currency-chevron { transform: rotate(180deg); }

.draw-currency-menu { position: absolute; z-index: 35; top: calc(100% + 3px); left: 0; width: 100%; border: 1px solid rgba(231, 189, 123, .48); background: #0b2731; box-shadow: 0 12px 24px rgba(0, 0, 0, .3); }

.draw-currency-menu button { display: flex; align-items: center; width: 100%; min-height: 40px; padding: 8px 11px; border: 0; background: transparent; color: #f2f6f2; font: 13px var(--sans); text-align: left; cursor: pointer; }

.draw-currency-menu button:hover, .draw-currency-menu button:focus-visible { background: rgba(231, 189, 123, .18); outline: none; }

.currency-select:has(option[value="both"]:checked) { background-image: url('./yuanbao-both.svg') !important; }

.currency-select:has(option[value="consumCoin"]:checked) { background-image: url('./yuanbao-both.svg') !important; }

.checkin-panel { background: rgba(8, 25, 33, .72); color: #fff; padding: clamp(25px, 4vw, 42px); border: 1px solid rgba(231, 189, 123, .24); box-shadow: 0 18px 42px rgba(3, 16, 22, .24); }

.checkin-panel-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 8px 20px; padding-bottom: 22px; border-bottom: 1px solid rgba(255, 255, 255, .15); }

.checkin-panel-head > div { display: flex; flex: 0 0 auto; flex-direction: column; white-space: nowrap; }

.panel-kicker { color: var(--gold-bright); font-size: 10px; letter-spacing: .2em; }

.checkin-panel-head strong { font: 600 21px var(--serif); margin-top: 3px; }

.checkin-reward { min-width: 0; max-width: 100%; color: rgba(255, 255, 255, .6); font-size: 11px; white-space: normal; }

.checkin-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; padding: 18px 0 24px; }

.checkin-weekday { text-align: center; color: rgba(255, 255, 255, .65); font-size: 11px; padding-bottom: 7px; }

.checkin-day { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; min-height: 50px; color: rgba(255, 255, 255, .55); }

.checkin-day strong { display: grid; place-items: center; width: min(100%, 34px); aspect-ratio: 1; border: 1px solid rgba(255, 255, 255, .22); font: 600 13px var(--serif); color: #fff; }

.checkin-day span { min-height: 13px; font-size: 10px; line-height: 1.3; }

.checkin-day.is-future:not(.is-holiday):not(.is-weekend) { opacity: .55; }

.checkin-day.is-weekend span { color: var(--gold-bright); }

.checkin-day.is-holiday span { color: #ffe2a5; font-weight: 700; }

.checkin-day.is-holiday strong { border-color: #e7bd7b; }

.checkin-day.is-today strong { outline: 1px solid var(--gold-bright); outline-offset: 2px; color: var(--gold-bright); }

.checkin-day.is-signed strong { background: var(--jade); border-color: var(--jade); color: #fff; }

.checkin-day.is-signed span { color: var(--gold-bright); font-size: 13px; }

.checkin-btn { min-width: 155px; }

.checkin-btn:disabled { background: #56636b; color: rgba(255, 255, 255, .75); cursor: default; transform: none; }

.checkin-message { min-height: 20px; margin: 14px 0 0; color: rgba(255, 255, 255, .57); font-size: 11px; }

@media (max-width: 1100px) {
.checkin-section { grid-template-columns: 1fr; gap: 32px; }

}

@media (max-width: 850px) {
.checkin-section { height: 690px; }

}

@media (max-width: 500px) {
.checkin-section { padding: 78px 20px 20px; }

.checkin-panel-head { align-items: flex-start; flex-direction: column; gap: 8px; }

.checkin-reward { white-space: normal; }

.checkin-panel { padding: 22px 18px; }

.checkin-week { gap: 2px; }

.checkin-day { min-height: 47px; }

}

.account-popover { width: min(250px, calc(100vw - 32px)); right: clamp(16px, 4vw, 45px); }

.account-balance { gap: 12px; }

.account-popover .account-balance strong { flex: 0 0 auto; white-space: nowrap; word-break: normal; font-variant-numeric: tabular-nums; }

.brand-logo { display: block; width: 60px; height: 50px; object-fit: contain; flex: none; }

.footer-brand .brand-logo { width: 48px; height: 38px; }

.brand-copy small, .footer-brand small { letter-spacing: 0; white-space: nowrap; }

@media (max-width: 500px) {
.brand-logo { width: 50px; height: 42px; }

.brand-copy small { font-size: 8px; }

}

.register-modal input[type="text"] {
  display: block;
  width: 100%;
  margin-top: 7px;
  border: 1px solid #ccd5d2;
  padding: 12px 13px;
  background: #fff;
  outline: 0;
  font-size: 13px;
}

.register-modal input[type="text"]:focus { border-color: var(--jade); }

[data-invite-register-field][hidden] { display: none; }

.support-modal-content #support-form select, .support-modal-content #support-form textarea, .support-modal-content #message-form textarea {
  display: block;
  width: 100%;
  margin-top: 7px;
  border: 1px solid #ccd5d2;
  border-radius: 0;
  background: #fff;
  color: var(--ink);
  font: 13px var(--sans);
  outline: 0;
  transition: border-color .18s, box-shadow .18s;
}

.support-modal-content #support-form select {
  height: 44px;
  padding: 0 12px;
  color-scheme: light;
  cursor: pointer;
}

.support-modal-content #support-form textarea {
  min-height: 132px;
  padding: 11px 13px;
  line-height: 1.55;
  resize: vertical;
}

.support-modal-content #support-form select:focus-visible, .support-modal-content #support-form textarea:focus-visible, .support-modal-content #message-form textarea:focus-visible {
  border-color: var(--jade);
  box-shadow: 0 0 0 2px rgba(47, 112, 110, .14);
}

.support-modal-content #message-form textarea {
  min-height: 132px;
  padding: 11px 13px;
  line-height: 1.55;
  resize: vertical;
}

.support-modal-content #support-form textarea::placeholder, .support-modal-content #message-form textarea::placeholder { color: #879394; }

.register-modal input[type="password"] { display:block; width:100%; margin-top:7px; border:1px solid #ccd5d2; padding:12px 13px; background:#fff; outline:0; font-size:13px; }

.register-modal input[type="password"]:focus { border-color:var(--jade); }

.header-auth-btn {
  min-width: 58px;
  padding: 9px 14px;
  border: 1px solid rgba(255, 255, 255, .55);
  background: transparent;
  color: #fff;
  font-size: 12px;
  cursor: pointer;
}

.header-auth-btn:hover, .header-auth-btn:focus-visible { border-color: var(--gold-bright); color: var(--gold-bright); }

.header-login-btn { background: var(--gold-bright); border-color: var(--gold-bright); color: var(--ink); }

.header-login-btn:hover, .header-login-btn:focus-visible { background: #fff; border-color: #fff; color: var(--ink); }

.modal-switch { margin: 16px 0 0; text-align: center; color: #748285; font-size: 12px; }

.modal-switch button { padding: 4px; background: transparent; color: var(--jade); cursor: pointer; }

.modal-switch button:hover, .modal-switch button:focus-visible { text-decoration: underline; }

#login-form .primary-btn { margin-top: 17px; }

.captcha-backdrop { z-index: 30; background: rgba(3, 11, 18, .8); }

.captcha-modal { position: relative; width: min(100%, 410px); padding: 34px 38px 32px; background: var(--paper); box-shadow: 0 20px 70px rgba(0, 0, 0, .38); }

.captcha-modal h2 { margin: 0; color: var(--ink); font: 700 29px var(--serif); }

.captcha-copy { margin: 7px 0 17px; color: #69777a; font-size: 12px; }

.captcha-slots { display: grid; grid-template-columns: repeat(4, 42px); justify-content: center; gap: 10px; min-height: 42px; margin-bottom: 14px; }

.captcha-slot { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid #b9c6c2; background-color: rgba(255, 255, 255, .72); background-size: 300% 300%; color: var(--ink); font: 700 22px var(--serif); }

.captcha-slot.is-filled { border-color: var(--jade); box-shadow: inset 0 -2px var(--jade); }

.captcha-image-wrap { position: relative; width: min(100%, 280px); aspect-ratio: 28 / 9; margin: 0 auto 16px; overflow: hidden; border: 1px solid #c7cfc8; background: #e8e1cf; }

.captcha-image-wrap img { display: block; width: 100%; height: 100%; object-fit: cover; }

.captcha-image-wrap button { position: absolute; right: 6px; top: 6px; display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid rgba(255, 255, 255, .7); background: rgba(7, 25, 31, .7); color: #fff; font-size: 19px; cursor: pointer; }

.captcha-image-wrap button:hover, .captcha-image-wrap button:focus-visible { background: var(--jade); }

.captcha-choices { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); width: min(100%, 270px); aspect-ratio: 3 / 2; margin: 0 auto; border: 1px solid #c8d1ce; background: #e8e1cf; }

.captcha-choices img { position: absolute; inset: 0; width: 100%; height: 100%; }

.captcha-choice { position: relative; z-index: 1; min-width: 0; min-height: 0; border: 1px solid transparent; background: transparent; cursor: pointer; }

.captcha-choice:hover, .captcha-choice:focus-visible { border-color: var(--jade); background: rgba(47, 112, 110, .16); }

.captcha-choice.is-selected:disabled { border-color: var(--jade); background: rgba(47, 112, 110, .28); cursor: default; }

.captcha-message { min-height: 18px; margin: 10px 0 7px; color: #9b4f3d; text-align: center; font-size: 11px; }

.captcha-actions { display: grid; grid-template-columns: 92px 1fr; gap: 9px; }

.captcha-actions button { min-height: 42px; }

.captcha-undo { border: 1px solid #bcc8c4; background: transparent; color: #55676a; cursor: pointer; }

.captcha-undo:hover, .captcha-undo:focus-visible { border-color: var(--jade); color: var(--jade); }

.captcha-actions .primary-btn { width: 100%; }

.captcha-actions .primary-btn:disabled { background: #87928e; color: rgba(255, 255, 255, .75); cursor: default; transform: none; }

.form-message.is-danger { color: #c43f3f; white-space: normal; }

.form-message.is-danger .form-message-reason { display: block; margin-top: 4px; color: #c43f3f; }

@media (max-width: 500px) {
.header-auth-btn { min-width: 44px; padding: 7px 8px; font-size: 11px; }

.captcha-modal { padding: 32px 20px 24px; }

}

[data-setting-pane][hidden] { display: none; }

.account-popover { width: min(290px, calc(100vw - 32px)); }

.account-popover .account-popover-head .account-refresh, .account-popover .account-actions button { display: grid; place-items: center; flex: none; width: 27px; height: 27px; padding: 4px; border: 0; background: transparent; color: var(--gold-bright); }

.account-popover .account-popover-head .account-refresh[hidden] { display: none; }

.account-popover .account-popover-head .account-refresh svg, .account-popover .account-actions svg { width: 17px; height: 17px; }

.account-popover .account-popover-head .account-refresh:hover, .account-popover .account-actions button:hover { border: 0; background: rgba(231, 189, 123, .13); color: #fff; }

.account-popover .account-popover-head .account-refresh:focus-visible, .account-popover .account-actions button:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 1px; }

.account-popover .account-popover-head .account-refresh:disabled { opacity: .65; cursor: wait; }

.account-popover .account-popover-head .account-refresh.is-refreshing svg { animation: account-refresh-spin .8s linear infinite; }

@keyframes account-refresh-spin { to { transform: rotate(360deg); } }
.account-popover .account-account-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 5px 0 0; padding-bottom: 13px; border-bottom: 1px solid rgba(231, 189, 123, .26); }

.account-popover .account-account-row strong { min-width: 0; margin: 0; }

.account-popover .account-actions { display: flex; flex: none; align-items: center; gap: 2px; }

.account-popover .account-actions #account-logout { margin: 0; border-color: transparent; }

.account-popover .account-wallet { padding: 7px 0; }

.account-popover .account-wallet-yuanbao { border-top: 1px solid rgba(231, 189, 123, .2); }

.account-popover .account-balance { min-height: 34px; padding: 4px 0; border-top: 0; }

.account-popover .account-balance-action { display: grid; grid-template-columns: minmax(76px, auto) 1fr auto; }

.account-popover .account-balance-action strong { justify-self: end; }

.account-popover .account-recharge { display: inline-flex; align-items: center; justify-content: center; gap: 4px; width: auto; min-width: 54px; height: 27px; padding: 0 8px; border-color: rgba(231, 189, 123, .45); color: var(--gold-bright); }

.account-popover .account-recharge svg { width: 13px; height: 13px; }

.account-popover .currency-dao::before { width: 17px; height: 17px; }

.account-popover #account-exchange-message { margin: 7px 0 10px; color: var(--gold-bright); font-size: 10px; line-height: 1.5; }

.account-popover #account-exchange-message[hidden] { display: none; }

.exchange-modal-content { max-height: min(90vh, 650px); overflow-y: auto; }

.exchange-settlement { display: grid; gap: 0; margin: 20px 0 13px; border: 1px solid #d6dfdc; background: rgba(244,247,245,.72); }

.exchange-settlement-row { display: grid; grid-template-columns: 88px minmax(0, 1fr); align-items: center; gap: 14px; min-height: 54px; padding: 9px 14px; border-bottom: 1px solid #e0e6e3; color: #526462; font-size: 12px; }

.exchange-settlement-row:last-child { border-bottom: 0; }

.exchange-settlement-row > span { color: #758180; white-space: nowrap; }

.exchange-settlement-row strong { min-width: 0; color: var(--ink); font-size: 13px; font-weight: 600; }

.exchange-settlement-row .currency-label { color: var(--ink); }

.exchange-settlement-row input[type="number"], .exchange-settlement-row select { width: 100%; height: 38px; margin: 0; padding: 0 10px; border: 1px solid #ccd5d2; border-radius: 0; background: #fff; color: var(--ink); font: 13px var(--sans); }

.exchange-settlement-row input[type="number"]:focus, .exchange-settlement-row select:focus { border-color: var(--jade); outline: none; }

.exchange-payment-row select:disabled { color: #526462; opacity: 1; background: #eef2f0; cursor: default; }

.exchange-directions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 20px 0 13px; border: 1px solid #bfcac6; }

.exchange-directions button { min-height: 39px; border-right: 1px solid #bfcac6; background: transparent; color: #415653; font-size: 12px; }

.exchange-directions button:nth-child(even) { border-right: 0; }

.exchange-directions button:disabled { color: #9ca9a6; background: #edf1ef; cursor: not-allowed; }

.exchange-directions button[hidden] { display: none; }

.exchange-directions button.is-active { background: var(--jade); color: #fff; font-weight: 700; }

.exchange-modal-content input[type="number"] { display: block; width: 100%; height: 44px; margin-top: 7px; padding: 0 13px; border: 1px solid #ccd5d2; background: #fff; color: var(--ink); font: 13px var(--sans); }

.exchange-modal-content input[type="number"]:focus { border-color: var(--jade); outline: none; }

#exchange-rate, #exchange-preview { min-height: 20px; margin: 10px 0; color: #526462; font-size: 12px; }

#exchange-preview { margin: 15px 0; }

.exchange-modal-content .primary-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }


.user-inbox-button[hidden] { display: none; }


.user-inbox-button small { position: absolute; top: -7px; right: -7px; display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: #c9342f; color: #fff; font: 700 10px var(--sans); }

.user-inbox-button small[hidden] { display: none; }

.prize-inventory-button { position: relative; display: grid; place-items: center; flex-shrink: 0; width: 34px; height: 34px; padding: 0; border: 1px solid rgba(231,189,123,.7); border-radius: 50%; background: rgba(8,20,29,.3); color: var(--gold-bright); }
.prize-inventory-button[hidden], .prize-inventory-button small[hidden] { display: none; }
.prize-inventory-button svg { width: 20px; height: 20px; }
.prize-inventory-button:hover, .prize-inventory-button[aria-current=page] { background: rgba(231,189,123,.16); }
.prize-inventory-button:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; }
.prize-inventory-button small { position: absolute; top: -7px; right: -7px; display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: #c9342f; color: #fff; font: 700 10px var(--sans); }
:is(.site-notification-button, .user-inbox-button, .admin-inbox-button) svg { transform-origin: 50% 15%; }
:is(.site-notification-button, .user-inbox-button, .admin-inbox-button).is-ringing svg { animation: site-bell-ring 1.1s ease-in-out; }
@keyframes site-bell-ring {
  0%, 100% { transform: rotate(0); }
  12% { transform: rotate(20deg); }
  25% { transform: rotate(-18deg); }
  38% { transform: rotate(15deg); }
  51% { transform: rotate(-12deg); }
  64% { transform: rotate(8deg); }
  77% { transform: rotate(-5deg); }
  90% { transform: rotate(2deg); }
}
@media (prefers-reduced-motion: reduce) { :is(.site-notification-button, .user-inbox-button, .admin-inbox-button).is-ringing svg { animation: none; } }
.site-notification-panel { position: absolute; right: 0; top: calc(100% + 14px); width: min(360px, calc(100vw - 32px)); padding: 14px; border: 1px solid rgba(231,189,123,.45); background: #10232e; color: #edf2ec; box-shadow: 0 12px 32px rgba(0,0,0,.35); z-index: 40; }
.site-notification-panel[hidden] { display: none; }
.site-notification-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid rgba(231,189,123,.2); }
.site-notification-heading strong { font: 600 16px var(--serif); color: var(--gold-bright); }
.site-notification-heading button { padding: 5px 8px; background: transparent; border: 1px solid rgba(231,189,123,.3); color: var(--gold-bright); font-size: 11px; }
.site-notification-heading button:disabled { opacity: .45; }
.site-notification-list { max-height: min(420px, 65vh); overflow-y: auto; font-size: 12px; }
.site-notification-entry { position: relative; display: grid; gap: 4px; padding: 12px 10px 12px 16px; border-bottom: 1px solid rgba(231,189,123,.12); color: #edf2ec; overflow-wrap: anywhere; }
.site-notification-entry small { color: #afbbb8; font-size: 10px; }
.site-notification-entry:hover { background: rgba(231,189,123,.08); }
.site-notification-entry.is-unread::before { content: ''; position: absolute; left: 3px; top: 18px; width: 5px; height: 5px; border-radius: 50%; background: var(--gold-bright); }
.site-notification-entry:focus-visible { outline: 1px solid var(--gold-bright); outline-offset: -1px; }
.auth-pending .prize-inventory-button { visibility: hidden; }

.message-modal-content { width: min(100%, 560px); max-height: min(88vh, 760px); overflow-y: auto; }

#register-modal .register-modal, #support-modal .support-modal-content {
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  
  
}

#register-modal, #support-modal { padding: 16px; }

#register-modal .register-modal, #support-modal .support-modal-content { padding-top: 28px; padding-bottom: 24px; }

#register-modal .register-modal .eyebrow, #support-modal .support-modal-content .eyebrow { margin-bottom: 10px; }

#register-modal .register-modal .modal-copy, #support-modal .support-modal-content .modal-copy { margin-bottom: 14px; }

#register-modal .register-modal label, #support-modal .support-modal-content label { margin-top: 10px; margin-bottom: 10px; }

#register-modal .register-modal .check-label { margin-top: 14px !important; margin-bottom: 14px !important; }

#support-modal .support-modal-content #support-form textarea { min-height: 96px; }

#support-modal .support-modal-content .ticket-code-lookup { margin-top: 14px; }

#support-modal .support-modal-content, #message-modal .support-modal-content, #user-message-detail-modal .support-modal-content {
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.modal-backdrop:has(.support-modal-content) { padding: 16px; }

.user-message-list { display: grid; gap: 8px; max-height: 260px; overflow-y: auto; margin: 18px 0; padding-right: 5px; color: #667679; font-size: 12px; }

.user-message-item { display: grid; gap: 3px; padding: 11px 12px; border: 1px solid #d8dfdc; background: rgba(255, 255, 255, .52); }

.user-message-item.is-unread { border-color: var(--gold); }

.user-message-item strong { color: var(--ink); font: 600 14px var(--serif); }

.user-message-item span { color: #7d898b; font-size: 10px; }

.user-message-item p { margin: 2px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }

.message-list-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; color: var(--ink); font: 600 14px var(--serif); }

.message-command, .message-back, #support-ticket-view, #user-message-detail-cancel { width: auto; min-height: 34px; padding: 7px 12px; border: 1px solid #bd9a60; border-radius: 2px; background: transparent; color: #725729; font: 12px var(--sans); cursor: pointer; }

.message-command:hover, .message-command:focus-visible, .message-back:hover, .message-back:focus-visible, #support-ticket-view:hover:not(:disabled), #support-ticket-view:focus-visible, #user-message-detail-cancel:hover:not(:disabled), #user-message-detail-cancel:focus-visible { background: #bd9a60; color: #fff; outline: none; }

#support-ticket-view:disabled, #user-message-detail-cancel:disabled { opacity: .5; cursor: not-allowed; }

.ticket-code-lookup { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 20px; }

.ticket-code-lookup[hidden] { display: none; }

.ticket-code-lookup label { min-width: 0; }

#support-ticket-view { width: 100%; min-height: 44px; padding: 10px 16px; white-space: nowrap; }

.user-message-list { max-height: min(48vh, 410px); margin: 12px 0; }

.user-message-item { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; }

.user-message-item strong, .user-message-item span { grid-column: 1; overflow-wrap: anywhere; }

.user-message-item small { grid-column: 1; color: #847456; font-size: 11px; }

.user-message-item .message-command { grid-column: 2; grid-row: 1 / span 3; }

.user-message-detail-meta { margin: 6px 0 18px; color: #758180; font-size: 11px; overflow-wrap: anywhere; }

.user-message-detail-body { min-height: 110px; padding: 14px; border: 1px solid #d8dfdc; background: rgba(255,255,255,.52); color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; line-height: 1.75; }

#user-message-detail-modal :is(.message-modal-content, .user-message-detail-body, textarea) {   scrollbar-gutter: stable; }

.message-thread-item { display: grid; gap: 3px; align-self: flex-start; width: fit-content; min-width: 0; max-width: 85%; margin: 0; padding: 6px 12px; border: 1px solid #d8dfdc; border-radius: 2px 8px 8px 8px; background: rgba(255,255,255,.52); white-space: normal; }

.message-thread-item.is-self { align-self: flex-end; border-radius: 8px 2px 8px 8px; background: rgba(189,154,96,.12); border-color: rgba(189,154,96,.65); }

.message-thread-item small { color: #758180; font-size: 10px; line-height: 1.4; overflow-wrap: anywhere; }

.message-thread-item p { margin: 0; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }

.user-message-detail-body { display: flex; flex-direction: column; gap: 14px; max-height: min(42vh, 360px); overflow-y: auto; white-space: normal; }

.user-message-detail-body .message-thread-item { flex: none; }

#user-message-detail-reply-form[hidden], #user-message-detail-cancel[hidden] { display: none; }

#user-message-detail-reply-form { display: grid; gap: 10px; margin-top: 16px; }

#user-message-detail-reply-form textarea { width: 100%; min-height: 82px; resize: vertical; padding: 10px; border: 1px solid #d8dfdc; background: rgba(255,255,255,.66); color: var(--ink); font: 12px/1.6 var(--sans); }

#user-message-detail-reply-form textarea:disabled { background: #eceeea; color: #758180; cursor: not-allowed; }

#user-message-detail-reply-form textarea:disabled::placeholder { color: #758180; opacity: 1; }

#user-message-detail-reply-form .primary-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.user-ticket-header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-bottom: 18px; }

.user-ticket-header-actions .modal-close { position: static; flex: none; width: 34px; height: 34px; padding: 0; }

#user-message-detail-cancel { margin: 0; }

#user-message-detail-back { margin-top: 18px; }

#user-message-overview[hidden], #user-message-compose[hidden] { display: none; }

#user-message-compose .message-back { margin: 18px 0 4px; }

.message-pagination { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 12px; color: #758180; font-size: 12px; }

.message-pagination[hidden] { display: none; }

.message-pagination button { padding: 7px 11px; border: 1px solid #bd9a60; border-radius: 2px; background: transparent; color: #725729; font: 12px var(--sans); cursor: pointer; }

.message-pagination button:hover:not(:disabled), .message-pagination button:focus-visible { background: #bd9a60; color: #fff; outline: none; }

.message-pagination button:disabled { opacity: .45; cursor: default; }

@media (max-width: 480px) {
.user-message-item { column-gap: 7px; padding: 10px; }

.user-message-item .message-command { padding: 7px 9px; }
 }


/* CDKEY redemption is an unframed form over the page background. */
#cdkey .cdkey-page-content, #cdkey .cdkey-redeem-panel { width: min(100%, 760px); max-width: 760px; background: transparent !important; border: 0 !important; box-shadow: none !important; padding-left: 0; padding-right: 0; }

#cdkey #cdkey-redeem-form { display: grid !important; grid-template-columns: minmax(0, 1fr) 144px; align-items: stretch; gap: 12px; width: 100%; margin: 0; }

#cdkey #cdkey-redeem-form input[name="code"] { display: block !important; width: 100% !important; min-width: 0; height: 52px !important; margin: 0 !important; padding: 0 16px !important; border: 1px solid rgba(231, 189, 123, .62) !important; border-radius: 2px !important; background: rgba(5, 19, 27, .94) !important; color: #f2f6f2 !important; font: 14px var(--sans) !important; letter-spacing: .08em; color-scheme: dark; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .16) !important; }

#cdkey #cdkey-redeem-form input[name="code"]::placeholder { color: rgba(242, 246, 242, .42); }

#cdkey #cdkey-redeem-form input[name="code"]:focus-visible { border-color: var(--gold-bright) !important; outline: 0; box-shadow: 0 0 0 2px rgba(231, 189, 123, .18) !important; }

#cdkey #cdkey-redeem-form .primary-btn { display: block; width: 100%; min-width: 0; height: 52px; margin: 0; padding: 0 12px; border: 1px solid var(--gold-bright); background: var(--gold-bright); color: var(--ink); white-space: nowrap; }

@media (max-width: 540px) {
#cdkey #cdkey-redeem-form { grid-template-columns: minmax(0, 1fr); }
 }


/* Responsive slide widths stay independent of section scrollbars. */
main {
  overflow-x: clip;
  overflow-y: visible;
}

.page-track {
  width: 800vw;
}

.page-track > section {
  flex: 0 0 100vw;
  width: 100vw;
}

.page-track.show-checkin { transform: translateX(-100vw); }

.page-track.show-events { transform: translateX(-200vw); }


.page-track.show-qibao { transform: translateX(-300vw); }

.page-track.show-prizes { transform: translateX(-500vw); }

.page-track.show-cdkey { transform: translateX(-600vw); }

.page-track.show-profile { transform: translateX(-700vw); }

.page-track > section {
  min-width: 0;
}

.site-footer, .footer-brand, .footer-links {
  min-width: 0;
}

.footer-links {
  flex-wrap: wrap;
}


/* Do not leave an empty dark menu strip when all links are hidden (for
   example, on the unauthenticated home page). */
@media (max-width: 850px) {
.auth-pending .main-nav.open, .main-nav.open:not(:has(a:not([hidden]))) {
    display: none;
  }

}

@media (max-width: 1100px) {
.hero {
    height: auto;
    min-height: 680px;
    max-height: none;
  }

.checkin-section, .member-section {
    height: auto;
    min-height: 690px;
    max-height: none;
  }

.checkin-section {
    align-items: start;
    overflow: visible;
    padding-bottom: 42px;
  }

.member-section {
    align-items: flex-start;
    overflow: visible;
    padding-bottom: 42px;
  }

.member-page-content, .events-content {
    width: 100%;
    max-width: none;
  }

.events-content {
    margin: 0 auto;
    padding-top: 24px;
    padding-bottom: 30px;
  }

.event-grid {
    max-height: none;
    overflow: visible;
  }

}

/* The grid rule below intentionally sets display:grid; keep the native hidden
   state stronger so a news/announcement detail never renders the lottery UI. */
#event-lottery[hidden] { display: none !important; }

@media (max-width: 540px) {
.checkin-section {
    min-height: 0;
    padding-top: 78px;
    padding-bottom: 32px;
    gap: 28px;
  }

.checkin-intro, .checkin-panel {
    min-width: 0;
  }

.checkin-panel {
    padding: 22px 16px;
  }

.checkin-week {
    gap: 2px;
    padding-top: 16px;
    padding-bottom: 20px;
  }

.checkin-day {
    min-height: 47px;
  }

.member-section {
    min-height: 0;
    padding: 78px 20px 32px;
  }

.member-page-content h2 {
    font-size: clamp(34px, 11vw, 52px);
  }

.events-content {
    padding-top: 16px;
  }

.event-grid {
    gap: 12px;
  }

.event-card {
    min-height: 165px;
    aspect-ratio: 2 / 1;
  }

.cdkey-page-content .cdkey-redeem-form, #cdkey #cdkey-redeem-form {
    grid-template-columns: minmax(0, 1fr);
  }

.cdkey-page-content .cdkey-redeem-form input[type="text"], #cdkey #cdkey-redeem-form input[name="code"], .cdkey-page-content .cdkey-redeem-form .primary-btn, #cdkey #cdkey-redeem-form .primary-btn {
    width: 100%;
  }

.site-footer {
    align-items: flex-start;
    gap: 16px;
    padding: 24px 20px;
  }

.site-footer > p {
    width: 100%;
  }

.footer-links {
    width: 100%;
    margin-left: 0;
    gap: 12px 18px;
  }

}


/* Keep intermediate-width layouts from clipping the footer or content. */
@media (max-width: 1100px) {
.site-footer {
    flex-wrap: wrap;
  }

.site-footer > p {
    order: 3;
    width: 100%;
  }

.footer-links {
    margin-left: auto;
  }

}

@media (max-width: 540px) {
.cdkey-page-content, .cdkey-redeem-panel, .cdkey-redeem-form, .cdkey-redeem-form label {
    min-width: 0;
  }

.site-footer {
    padding-left: 20px;
    padding-right: 20px;
  }

.footer-links {
    margin-left: 0;
  }

}


/* Header and footer own separate rows; only the middle slides can scroll. */
html, body {
  height: 100%;
  overflow: hidden;
}

body {
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  display: flex;
  flex-direction: column;
  /* Match each page's scrim behind the transparent navigation as well. */
  background-color: #0b151f;
  background-image: linear-gradient(90deg, rgba(6, 15, 25, .78), rgba(6, 15, 25, .28) 52%, rgba(6, 15, 25, .08)), linear-gradient(0deg, rgba(6, 15, 25, .5), transparent 48%), var(--hero-bg-image, url('https://image.gyyxcdn.cn/upload/wd/hd/p/gd/czhd/imagesV4/bg.jpg'));
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
}

body.checkin-active, html:is(.initial-page-checkin, .initial-page-qibao, .initial-page-prizes, .initial-page-cdkey, .initial-page-profile) body {
  background-image: linear-gradient(90deg, rgba(6, 15, 25, .85), rgba(6, 15, 25, .28)), url('/assets/images/wd-bg-tq.jpg');
}

body:has(.page-track.show-checkin), html.initial-page-checkin body {
  background-image: linear-gradient(90deg, rgba(6, 15, 25, .85) 0%, rgba(6, 15, 25, .5) 45%, rgba(6, 15, 25, .18) 100%), linear-gradient(0deg, rgba(6, 15, 25, .62), transparent 50%), url('/assets/images/wd-bg-tq.jpg');
}

body:has(.page-track.show-events), html.initial-page-events body {
  background-image: linear-gradient(90deg, rgba(6, 15, 25, .85) 0%, rgba(6, 15, 25, .5) 45%, rgba(6, 15, 25, .18) 100%), linear-gradient(0deg, rgba(6, 15, 25, .62), transparent 50%), url('/assets/images/wd-bg-tq.jpg');
}

.site-header {
  position: absolute;
  inset: 0 0 auto;
  width: 100%;
  z-index: 8;
  flex: none;
  background: transparent;
  border-bottom-color: transparent;
  text-shadow: 0 1px 3px #0b151f, 0 0 8px rgba(3, 11, 18, .7);
  transition: transform .22s ease, opacity .18s ease, background .3s ease, color .3s ease;
}

.checkin-active .site-header {
  background: transparent;
}

main {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  overflow: clip;
}

.page-track {
  flex: 0 0 auto;
  height: 100%;
  min-height: 0;
  overflow: clip;
}

.page-track > section {
  align-self: stretch;
  height: 100%;
  min-height: 0;
  max-height: none;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  
  
}

.checkin-section, .member-section {
  padding-top: 90px;
  padding-bottom: 32px;
  /* The active page background is owned by body so the transparent header
     and the content area share one continuous image layer. */
  background: transparent;
}

.member-section:has(.events-content) {
  background: transparent;
}

.checkin-section {
  align-content: safe center;
  align-items: safe center;
}

.member-section {
  align-items: safe center;
}

.member-section > .member-page-content {
  flex-shrink: 0;
}

.event-grid {
  max-height: none;
  overflow: visible;
}

.hero {
  display: flex;
  flex-direction: column;
  justify-content: safe center;
  padding: 40px clamp(25px, 11vw, 175px);
}

.hero-content {
  position: relative;
  flex-shrink: 0;
  left: auto;
  right: auto;
  top: auto;
  transform: none;
}

#profile { background: transparent; }

#profile .profile-page-content { width: min(100%, 1040px); }

.profile-panel { margin-top: 26px; padding: 21px 0 24px; border-top: 1px solid rgba(231, 189, 123, .34); color: #f2f6f2; }

.profile-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.profile-inventory-query-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; max-width: 100%; }
.profile-inventory-query-actions > button { flex: none; }

.profile-panel h3 { margin: 0 0 18px; color: var(--gold-bright); font: 600 18px var(--serif); }

.profile-panel-heading h3 { margin-bottom: 0; }

.profile-refresh { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border: 1px solid rgba(231, 189, 123, .5); background: transparent; color: var(--gold-bright); }

.profile-refresh svg { width: 19px; height: 19px; }

.profile-refresh:hover, .profile-refresh:focus-visible { border-color: var(--gold-bright); background: rgba(231, 189, 123, .13); color: #fff; outline: none; }

.profile-data { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, .8fr); gap: 24px; margin-top: 20px; }

.profile-data-group { min-width: 0; padding-right: 24px; border-right: 1px solid rgba(231, 189, 123, .22); }

.profile-data-group:last-child { padding-right: 0; border-right: 0; }

.profile-data-group h4 { margin: 0 0 12px; color: rgba(242, 246, 242, .9); font: 600 13px var(--serif); }

.profile-data-group dl { display: grid; gap: 8px; margin: 0; }

.profile-data-group dl > div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; min-width: 0; }

.profile-data-group dt { flex: none; color: rgba(242, 246, 242, .58); font-size: 12px; }

.profile-data-group dd { min-width: 0; margin: 0; color: #fff; font-size: 13px; text-align: right; overflow-wrap: anywhere; }

.profile-inline-value { display: inline-flex; justify-content: flex-end; align-items: baseline; flex-wrap: wrap; gap: 8px; }

.profile-inline-action { padding: 0; background: transparent; color: var(--gold-bright); font-size: 12px; border: 0; border-bottom: 1px solid currentColor; cursor: pointer; }

.profile-inline-action:hover, .profile-inline-action:focus-visible { color: #fff; outline: none; }

.profile-data-group .profile-actions { margin-top: 18px; }

.profile-data-group .profile-actions button { min-width: 0; }

.profile-character-select { display: flex; align-items: center; gap: 10px; color: rgba(242, 246, 242, .72); font-size: 13px; }
.profile-character-select select { min-width: 150px; max-width: min(56vw, 300px); height: 38px; padding: 0 10px; border: 1px solid rgba(231, 189, 123, .48); border-radius: 2px; color: #fff; background: #10242b; font: 13px var(--sans); }
.profile-character-select .profile-character-native-select { position: absolute; width: 1px; height: 1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.profile-character-picker { position: relative; min-width: min(260px, 56vw); }
.profile-character-picker-toggle { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 42px; padding: 5px 9px; border: 1px solid rgba(231, 189, 123, .48); border-radius: 2px; background: #10242b; color: #fff; font: 13px var(--sans); text-align: left; cursor: pointer; }
.profile-character-picker-toggle:hover, .profile-character-picker-toggle:focus-visible { border-color: var(--gold-bright); outline: none; }
.profile-character-picker-toggle > :last-child { margin-left: auto; color: var(--gold-bright); font-size: 16px; }
.profile-character-picker-list { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; right: 0; display: grid; gap: 3px; max-height: 260px; overflow-y: auto; padding: 4px; border: 1px solid rgba(231, 189, 123, .65); background: #10242b; box-shadow: 0 12px 28px rgba(0, 0, 0, .45); }
.profile-character-picker-list[hidden] { display: none; }
.profile-character-picker-option { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 42px; padding: 5px; border: 1px solid transparent; background: transparent; color: #f2f6f2; font: 12px var(--sans); text-align: left; cursor: pointer; }
.profile-character-picker-option:hover, .profile-character-picker-option:focus-visible, .profile-character-picker-option[aria-selected="true"] { border-color: rgba(231, 189, 123, .58); background: rgba(231, 189, 123, .14); outline: none; }
.profile-character-picker-avatar { display: grid; place-items: center; flex: none; width: 32px; height: 32px; overflow: hidden; border: 1px solid rgba(231, 189, 123, .4); color: #e7cf80; font: 16px var(--serif); }
.profile-character-picker-avatar > * { grid-area: 1 / 1; }
.profile-character-picker-avatar img { width: 30px; height: 30px; object-fit: cover; }
.profile-character-picker-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-character-large { display: grid; place-items: center; width: 100%; min-height: 190px; margin: 12px 0 16px; overflow: hidden; border: 1px solid rgba(231, 189, 123, .42); background: radial-gradient(circle at 50% 20%, rgba(93, 142, 141, .3), rgba(2, 11, 15, .75)); color: #e7cf80; font: 42px var(--serif); }
.profile-character-large > * { grid-area: 1 / 1; }
.profile-character-large-image { width: 100%; height: 210px; object-fit: contain; object-position: center bottom; }
.profile-companion-large { display: grid; place-items: center; width: 100%; min-height: 165px; margin: 12px 0 14px; overflow: hidden; border: 1px solid rgba(231, 189, 123, .42); background: radial-gradient(circle at 50% 20%, rgba(93, 142, 141, .3), rgba(2, 11, 15, .75)); color: #e7cf80; font: 38px var(--serif); }
.profile-companion-large > * { grid-area: 1 / 1; }
.profile-companion-large-image { width: 100%; height: 185px; object-fit: contain; object-position: center bottom; }
.profile-companion-avatar-image { width: 38px; height: 38px; object-fit: cover; }
.profile-inventory-canvas { width: 100%; margin-top: 18px; }
.profile-inventory-tabs { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.profile-inventory-tabs button { min-height: 30px; padding: 4px 12px; border: 1px solid rgba(231, 189, 123, .45); border-radius: 2px; background: rgba(5, 19, 27, .88); color: #e5d6ad; font: 12px var(--sans); cursor: pointer; }
.profile-inventory-tabs button:hover, .profile-inventory-tabs button:focus-visible, .profile-inventory-tabs button[aria-selected="true"] { border-color: var(--gold-bright); background: rgba(231, 189, 123, .17); color: #fff1bd; outline: none; }
.profile-inventory-status { min-height: 18px; margin: 0 0 12px; color: rgba(242, 246, 242, .72); font: 12px var(--sans); }
.profile-inventory-content { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.profile-inventory-content:not(:has(.profile-inventory-aside:not([hidden]))) .profile-inventory-list { grid-column: 1 / -1; }
.profile-inventory-list, .profile-inventory-aside { min-width: 0; min-height: 248px; padding: 14px; border: 1px solid rgba(231, 189, 123, .65); background: rgba(7, 22, 25, .94); color: #f2f6f2; }
.profile-inventory-list[hidden], .profile-inventory-list:empty { display: none; }
.profile-inventory-list.is-empty-state { min-height: 0; padding: 0; border: 0; background: transparent; }
.profile-inventory-aside[hidden] { display: none; }
/* Let the role summary set the row height; skill contents scroll inside it. */
.is-role-view .profile-inventory-aside:not([hidden]) { display: flex; flex-direction: column; min-height: 0; contain: size; }
.is-role-view .profile-inventory-aside > h4, .is-role-view .profile-pet-skill-tabs { flex-shrink: 0; }
.profile-role-skill-panel { flex: 1; height: 0; min-height: 0; overflow-y: auto; padding-right: 5px; scrollbar-gutter: stable;   }
.profile-inventory-list h4, .profile-inventory-aside h4 { margin: 0 0 10px; color: var(--gold-bright); font: 600 15px var(--serif); }
.profile-inventory-aside h4:not(:first-child) { margin-top: 18px; padding-top: 12px; border-top: 1px solid rgba(231, 189, 123, .24); }
.profile-inventory-summary-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; min-height: 62px; margin-bottom: 10px; padding: 10px; border: 1px solid rgba(231, 189, 123, .48); }
.profile-inventory-summary-heading h4 { margin: 0; }
.profile-inventory-summary-heading span { color: #74dcef; font-size: 12px; }
.profile-role-summary { width: min(100%, 420px); }
.profile-role-overview { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin-bottom: 10px; }
.profile-role-large { display: grid; place-items: center; min-width: 0; min-height: 218px; overflow: hidden; border: 1px solid rgba(231, 189, 123, .48); background: radial-gradient(circle at 50% 25%, rgba(93, 142, 141, .38), rgba(2, 11, 15, .9)); color: #e7cf80; font: 42px var(--serif); }
.profile-role-large > * { grid-area: 1 / 1; }
.profile-role-large img { width: 100%; height: 216px; object-fit: contain; object-position: center bottom; }
.profile-role-meta, .profile-role-overview-list { display: grid; gap: 4px; min-width: 0; margin: 0; }
.profile-role-meta { align-content: start; }
.profile-role-meta > div, .profile-role-overview-list > div { display: flex; align-items: baseline; justify-content: space-between; gap: 7px; min-width: 0; min-height: 25px; padding: 3px 6px; border: 1px solid rgba(231, 189, 123, .38); background: rgba(2, 11, 15, .72); font-size: 12px; }
.profile-role-meta dt, .profile-role-overview-list dt { color: #e7cf80; }
.profile-role-meta dd, .profile-role-overview-list dd { min-width: 0; margin: 0; color: #70d9ec; text-align: right; overflow-wrap: anywhere; }
.profile-role-meta-name dd { color: #f5df53; font-weight: 600; }
.profile-role-meta-title dd { color: #d6c27a; }
.profile-role-combat-stats, .profile-role-basic-stats { grid-column: span 1; }
.profile-role-combat-stats > div:nth-child(-n+2) { border-color: rgba(112, 217, 236, .38); }
.profile-role-identity { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 10px; align-items: center; min-height: 84px; margin-bottom: 10px; padding: 7px; border: 1px solid rgba(231, 189, 123, .48); background: rgba(2, 11, 15, .72); }
.profile-role-avatar { display: grid; place-items: center; width: 76px; height: 76px; overflow: hidden; border: 1px solid rgba(231, 189, 123, .5); background: radial-gradient(circle at 50% 35%, rgba(93, 142, 141, .38), rgba(2, 11, 15, .88)); color: #e7cf80; font: 30px var(--serif); }
.profile-role-avatar > * { grid-area: 1 / 1; }
.profile-role-avatar img { width: 74px; height: 74px; object-fit: cover; }
.profile-role-identity-details { min-width: 0; }
.profile-role-name { margin: 0 0 8px !important; color: #f5df53 !important; font-size: 16px !important; overflow-wrap: anywhere; }
.profile-role-level { margin: 0; color: #70d9ec; font-size: 12px; }
.profile-role-resources { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 8px; margin: 0 0 9px; }
.profile-role-resources > div { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; min-height: 24px; padding: 3px 6px; border: 1px solid rgba(231, 189, 123, .38); background: rgba(2, 11, 15, .72); font-size: 12px; }
.profile-role-resources > div:nth-child(-n+2) { grid-column: 1 / -1; }
.profile-role-resources dt { color: #e7cf80; }
.profile-role-resources dd { min-width: 0; margin: 0; color: #70d9ec; text-align: right; overflow-wrap: anywhere; }
.profile-role-stat-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; margin-bottom: 7px; border-bottom: 1px solid rgba(231, 189, 123, .38); }
.profile-role-stat-tabs button { min-width: 0; min-height: 28px; padding: 3px 5px; border: 1px solid rgba(231, 189, 123, .4); border-bottom: 0; border-radius: 2px 2px 0 0; background: rgba(5, 19, 27, .74); color: #b9c2bc; font-size: 11px; cursor: pointer; }
.profile-role-stat-tabs button:hover, .profile-role-stat-tabs button:focus-visible, .profile-role-stat-tabs button[aria-selected="true"] { border-color: rgba(231, 189, 123, .72); background: rgba(231, 189, 123, .18); color: #fff1bd; outline: none; }
.profile-role-stat-panel { min-height: 50px; }
.profile-role-stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 8px; margin: 0; }
.profile-role-stat { display: flex; align-items: baseline; justify-content: space-between; gap: 7px; min-width: 0; min-height: 25px; padding: 3px 6px; border: 1px solid rgba(231, 189, 123, .38); background: rgba(2, 11, 15, .72); font-size: 12px; }
.profile-role-stat-life, .profile-role-stat-mana, .profile-role-stat-exp { grid-column: 1 / -1; }
.profile-role-stat dt { color: #e7cf80; }
.profile-role-stat dd { min-width: 0; margin: 0; color: #f2f6f2; text-align: right; overflow-wrap: anywhere; }
.profile-role-stat-life dd, .profile-role-stat-mana dd { color: #70d9ec; }
.profile-role-stats-empty { margin: 8px 0; color: rgba(242, 246, 242, .62); font-size: 12px; text-align: center; }
.profile-inventory-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 10px; margin: 0; }
.profile-inventory-fields > div { display: flex; justify-content: space-between; gap: 8px; min-width: 0; min-height: 28px; padding: 5px 8px; border: 1px solid rgba(231, 189, 123, .4); background: rgba(2, 11, 15, .7); font-size: 12px; }
.profile-inventory-fields dt { color: #e7cf80; }
.profile-inventory-fields dd { min-width: 0; margin: 0; color: #70d9ec; text-align: right; overflow-wrap: anywhere; }
.profile-inventory-skills { display: grid; gap: 5px; }
.profile-inventory-skills details { border: 1px solid rgba(231, 189, 123, .4); background: rgba(2, 11, 15, .7); color: #e7cf80; font-size: 12px; }
.profile-inventory-skills summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 28px; padding: 5px 8px; cursor: pointer; list-style: none; }
.profile-inventory-skills summary::-webkit-details-marker { display: none; }
.profile-inventory-skills summary::before { content: '›'; flex: none; color: #70d9ec; transition: transform .15s ease; }
.profile-inventory-skills details[open] summary::before { transform: rotate(90deg); }
.profile-inventory-skills summary span { min-width: 0; overflow-wrap: anywhere; }
.profile-inventory-skills summary span:first-of-type { flex: 1; }
.profile-inventory-skills summary span:last-of-type { color: #70d9ec; text-align: right; }
.profile-inventory-skills .profile-inventory-skill-description { margin: 0; padding: 0 8px 7px 25px; color: #b9c2bc; line-height: 1.5; }
.profile-inventory-empty { color: rgba(242, 246, 242, .65); font-size: 12px; }
.profile-inventory-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); gap: 8px; }
.profile-inventory-choice { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 54px; padding: 6px; border: 1px solid rgba(231, 189, 123, .36); border-radius: 2px; background: rgba(2, 11, 15, .68); color: #f2f6f2; text-align: left; cursor: pointer; }
.profile-inventory-choice:hover, .profile-inventory-choice:focus-visible, .profile-inventory-choice[aria-pressed="true"] { border-color: var(--gold-bright); background: rgba(231, 189, 123, .13); outline: none; }
.profile-inventory-choice > span:nth-child(2) { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.profile-inventory-choice small { color: #70d9ec; white-space: nowrap; }
.profile-inventory-choice-art { display: grid; place-items: center; flex: none; width: 38px; height: 38px; color: #e7cf80; font: 20px var(--serif); }
.profile-inventory-choice-art > *, .profile-inventory-slot-mark > *, .profile-inventory-preview > * { grid-area: 1 / 1; }
.profile-inventory-choice-art img { width: 38px; height: 38px; object-fit: contain; }
.profile-inventory-grid { display: grid; grid-template-columns: repeat(auto-fill, 56px); gap: 3px; }
.profile-inventory-grid.is-four-column { width: min(100%, 233px); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.profile-inventory-grid.is-five-column { width: min(100%, 292px); grid-template-columns: repeat(5, minmax(0, 1fr)); }
.profile-inventory-equipment-group { margin-bottom: 18px; }
.profile-inventory-equipment-group > .profile-inventory-grid { margin-inline: auto; }
.profile-inventory-equipment-group .profile-inventory-choice-group { margin-bottom: 8px; }
.profile-inventory-equipment-group .profile-inventory-slot.is-empty { cursor: default; opacity: .55; }
.profile-inventory-currencies { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.profile-inventory-currencies > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; min-width: min(100%, 142px); padding: 7px 9px; border: 1px solid rgba(231, 189, 123, .4); background: rgba(2, 11, 15, .7); font-size: 12px; }
.profile-inventory-currencies dt { color: #e7cf80; }
.profile-inventory-currencies dd { margin: 0; color: #b9c2bc; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.profile-inventory-equipment-group + .profile-inventory-currencies { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.profile-inventory-equipment-group + .profile-inventory-currencies > div { min-width: 0; gap: 5px; padding: 7px 6px; }
.profile-inventory-equipment-group + .profile-inventory-currencies :is(dt, dd) { white-space: nowrap; }
.profile-inventory-currencies .is-amount-white { color: #fff; }
.profile-inventory-currencies .is-amount-green { color: #58df72; }
.profile-inventory-currencies .is-amount-magenta { color: #f36bf4; }
.profile-inventory-currencies .is-amount-yellow { color: #ffe45b; }
.profile-inventory-currencies .is-amount-red { color: #ff6666; }
.profile-inventory-currencies .is-amount-cyan { color: #42eff5; }
.profile-inventory-warehouse-group { margin-top: 0; }
.profile-inventory-warehouse-group .profile-inventory-choice-group { margin-bottom: 8px; }
.is-warehouse-grid .profile-inventory-slot.is-empty { cursor: default; opacity: .5; }
.is-warehouse-grid .profile-inventory-slot.is-empty:hover { border-color: rgba(231, 189, 123, .36); background: rgba(2, 11, 15, .68); }
.is-bag-grid .profile-inventory-slot.is-empty { cursor: default; opacity: .55; }
.is-bag-grid .profile-inventory-slot.is-empty:hover { border-color: rgba(231, 189, 123, .36); background: rgba(2, 11, 15, .68); }
.profile-inventory-slot-position { display: none; }
.profile-inventory-pages { display: flex; justify-content: flex-start; flex-wrap: wrap; width: min(100%, 292px); gap: 6px; margin: 0 0 10px; }
.profile-inventory-pages button { min-width: 32px; height: 30px; border: 1px solid rgba(231, 189, 123, .45); border-radius: 2px; background: rgba(5, 19, 27, .88); color: #e5d6ad; font: 12px var(--sans); cursor: pointer; }
.profile-inventory-pages button:hover, .profile-inventory-pages button:focus-visible, .profile-inventory-pages button[aria-current="page"] { border-color: var(--gold-bright); background: rgba(231, 189, 123, .17); color: #fff1bd; outline: none; }
.profile-inventory-slot { position: relative; display: grid; place-items: center; aspect-ratio: 1; min-width: 0; padding: 2px; border: 1px solid rgba(231, 189, 123, .36); border-radius: 2px; background: rgba(2, 11, 15, .68); color: #f2f6f2; cursor: pointer; }
.profile-inventory-slot:hover, .profile-inventory-slot:focus-visible { border-color: var(--gold-bright); background: rgba(231, 189, 123, .13); outline: none; }
.profile-inventory-slot-mark { display: grid; place-items: center; width: min(100%, 48px); aspect-ratio: 1; color: #e7cf80; font: 22px var(--serif); }
.profile-inventory-slot-mark img { width: 100%; height: 100%; object-fit: contain; }
.profile-inventory-slot-amount { position: absolute; right: 5px; bottom: 5px; max-width: 70%; padding: 1px 3px; background: rgba(2, 11, 15, .9); color: #70d9ec; font: 600 11px/1.2 var(--sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-inventory-description { margin: 5px 0 12px; color: #d8e3db; font-size: 12px; line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere; }
.profile-inventory-inspector { position: relative; }
.profile-inventory-identity { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; padding-right: 28px; }
.profile-inventory-identity h4 { overflow-wrap: anywhere; }
.profile-inventory-preview { display: grid; place-items: center; flex: none; width: 58px; height: 58px; border: 1px solid rgba(231, 189, 123, .36); color: #e7cf80; font: 24px var(--serif); }
.profile-inventory-preview img { width: 56px; height: 56px; object-fit: contain; }
.profile-inventory-close { position: absolute; top: 9px; right: 9px; width: 28px; height: 28px; padding: 0; border: 1px solid rgba(231, 189, 123, .48); border-radius: 2px; background: transparent; color: var(--gold-bright); font: 20px/1 var(--sans); cursor: pointer; }
.profile-inventory-close:hover, .profile-inventory-close:focus-visible { background: rgba(231, 189, 123, .16); outline: none; }
.profile-inventory-details { margin-bottom: 12px; }
.profile-inventory-aside .profile-inventory-fields { grid-template-columns: minmax(0, 1fr); }
.profile-inventory-content.is-item-view { grid-template-columns: minmax(0, 1fr); }
.is-item-view .profile-inventory-list { grid-column: 1 / -1; }
.profile-inventory-list.is-compact-item-view {
  width: min(100%, 324px);
  min-height: 0;
  justify-self: start;
}
.profile-inventory-list.is-compact-item-view .profile-inventory-grid,
.profile-inventory-list.is-compact-item-view .profile-inventory-pages { max-width: 292px; }
.profile-inventory-list.is-compact-item-view .profile-inventory-equipment-group { margin-bottom: 12px; }
.profile-inventory-aside.profile-item-tooltip {
  position: fixed; z-index: 120; width: min(380px, calc(100vw - 24px));
  min-height: 0; max-height: calc(100dvh - 24px); overflow-y: auto;
  padding: 9px 12px; border: 1px solid #a68a31;
  background: rgba(0, 0, 0, .88); box-shadow: 0 0 0 1px rgba(235, 198, 76, .22) inset, 0 12px 30px rgba(0, 0, 0, .7);
  color: #e1e2de; font: 12px/1.28 var(--sans); text-align: center;
   
}
.profile-inventory-aside.profile-pet-tooltip { width: min(700px, calc(100vw - 24px)); }
.profile-item-tooltip .profile-inventory-identity { justify-content: center; gap: 8px; margin-bottom: 4px; padding: 0; }
.profile-item-tooltip-layout { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 12px; }
.profile-item-tooltip-content { min-width: 0; }
.profile-item-tooltip .profile-inventory-identity h4 { margin: 0; padding: 0; border: 0; color: #f5df53; font: 600 14px/1.25 var(--sans); }
.profile-item-tooltip .profile-inventory-preview { width: 96px; height: 96px; align-self: center; border: 0; background: transparent; font-size: 32px; }
.profile-item-tooltip .profile-inventory-preview img { width: 96px; height: 96px; object-fit: contain; }
.profile-item-tooltip-line { margin: 0; overflow-wrap: anywhere; white-space: pre-line; }
.profile-item-tooltip-color, .profile-item-tooltip-suit { color: #79e650; }
.profile-item-tooltip-meta { color: #d4d5d1; }
.profile-item-tooltip-resonance { margin-top: 2px; color: #f2d66b; }
.profile-item-tooltip-group { margin-top: 2px; }
.profile-item-tooltip .profile-item-tooltip-group h5 { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.profile-item-tooltip-group[data-tone="white"] .profile-item-tooltip-line { color: #e0e1db; }
.profile-item-tooltip-group[data-tone="blue"] .profile-item-tooltip-line { color: #6daaff; }
.profile-item-tooltip-group[data-tone="gray"] .profile-item-tooltip-line { color: #989898; }
.profile-item-tooltip-group[data-tone="pink"] .profile-item-tooltip-line { color: #f07cc5; }
.profile-item-tooltip-group[data-tone="cyan"] .profile-item-tooltip-line { color: #58def1; }
.profile-item-tooltip-group[data-tone="gold"] .profile-item-tooltip-line { color: #f4d657; }
.profile-item-tooltip-group[data-tone="green"] .profile-item-tooltip-line { color: #6ae65e; }
.profile-item-tooltip-group[data-tone="red"] .profile-item-tooltip-line { color: #f46b60; }
.profile-item-tooltip-group[data-tone="violet"] .profile-item-tooltip-line { color: #db99ed; }
.profile-item-tooltip-description { margin-top: 3px; color: #d1bd87; }
.profile-item-tooltip-footer { margin-top: 3px; color: #9eaaa6; font-size: 11px; }
.profile-inventory-content.is-pet-view { grid-template-columns: 210px minmax(0, 1fr); align-items: start; }
.is-pet-view .profile-inventory-list, .is-pet-view .profile-inventory-aside { min-height: 0; }
.is-pet-view .profile-inventory-choices { grid-template-columns: minmax(0, 1fr); }
.profile-pet-source-tabs { gap: 6px; margin-bottom: 10px; }
.profile-pet-source-tabs button { flex: 1; padding-inline: 6px; white-space: nowrap; }
.profile-pet-source-tabs button[aria-pressed="true"] { border-color: var(--gold-bright); background: rgba(231, 189, 123, .17); color: #fff1bd; }
.profile-inventory-choice-group { display: flex; align-items: center; gap: 8px; grid-column: 1 / -1; margin: 10px 0 0; padding: 0 2px 5px; border-bottom: 1px solid rgba(231, 189, 123, .3); color: #e7cf80; font-size: 12px; }
.profile-inventory-choice-group:first-child { margin-top: 0; }
.profile-inventory-choice-group > span { min-width: 0; }
.profile-pet-delete-group { min-height: 25px; margin-left: auto; padding: 2px 8px; font-size: 11px; white-space: nowrap; }
.profile-pet-delete-group:disabled { cursor: not-allowed; opacity: .45; }
.profile-inventory-choice-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; align-items: stretch; }
.profile-inventory-choice-wrap .profile-inventory-choice { width: 100%; }
.is-pet-view .profile-inventory-aside { padding: 16px 18px; }
.profile-pet-header { display: flex; align-items: center; gap: 14px; min-width: 0; padding-bottom: 13px; border-bottom: 1px solid rgba(231, 189, 123, .3); }
.profile-pet-header > div:last-child { min-width: 0; flex: 1; }
.profile-pet-header h4 { margin-bottom: 7px; overflow-wrap: anywhere; }
.profile-pet-location { display: inline-block; margin-top: 5px; color: #70d9ec; font-size: 12px; }
.profile-pet-restrictions { display: block; margin-top: 5px; color: #e7cf80; font-size: 12px; }
.profile-pet-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.profile-pet-actions > [hidden] { display: none; }
.profile-pet-actions:not(:has(> button:not([hidden]))) { display: none; }
.profile-inventory-aside > .profile-pet-actions { margin: 0 0 8px; padding-bottom: 8px; border-bottom: 1px solid rgba(231,189,123,.25); }
.profile-pet-detail-header { margin-top: 0; border-bottom: 0; }
.profile-item-status-actions { justify-content: center; margin: 7px 0; }
.profile-pet-status-remove { min-height: 29px; padding: 4px 10px; border: 1px solid rgba(231, 189, 123, .55); border-radius: 2px; background: rgba(66, 57, 30, .36); color: #e7cf80; font: 12px var(--sans); cursor: pointer; }
.profile-pet-status-remove:hover, .profile-pet-status-remove:focus-visible { border-color: #e7cf80; background: rgba(91, 74, 32, .54); outline: none; }
.profile-pet-status-remove:disabled { cursor: wait; opacity: .55; }
.profile-pet-delete { min-height: 29px; padding: 4px 10px; border: 1px solid rgba(244, 107, 96, .62); border-radius: 2px; background: rgba(116, 28, 28, .28); color: #f49a8e; font: 12px var(--sans); cursor: pointer; }
.profile-pet-delete:hover, .profile-pet-delete:focus-visible { border-color: #f46b60; background: rgba(116, 28, 28, .5); color: #ffd3ca; outline: none; }
.profile-pet-delete:disabled { cursor: wait; opacity: .55; }
.profile-pet-portrait { display: grid; place-items: center; flex: none; width: 68px; height: 68px; border: 1px solid rgba(231, 189, 123, .45); color: #e7cf80; font: 28px var(--serif); }
.profile-pet-portrait > * { grid-area: 1 / 1; }
.profile-pet-portrait img { width: 66px; height: 66px; object-fit: contain; }
.profile-pet-header .profile-inventory-fields { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.profile-pet-header .profile-inventory-fields > div { min-height: 0; padding: 1px 0; border: 0; background: transparent; }
.profile-pet-detail-header { padding-bottom: 8px; }
.profile-pet-detail-header .profile-pet-card-name { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 16px; }
.profile-pet-detail-header h4 { margin: 0; }
.profile-pet-detail-header.is-pet-card .profile-pet-card-name { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr); gap: 6px 12px; }
.profile-pet-detail-header.is-pet-card h4 { grid-column: 2; text-align: center; }
.profile-pet-detail-header.is-pet-card .profile-pet-detail-meta { grid-column: 3; justify-content: flex-end; margin-left: 0; text-align: right; }
@media (max-width: 600px) {
  .profile-pet-detail-header.is-pet-card .profile-pet-card-name { grid-template-columns: minmax(0, 1fr); }
  .profile-pet-detail-header.is-pet-card h4, .profile-pet-detail-header.is-pet-card .profile-pet-detail-meta { grid-column: 1; }
}
.profile-pet-detail-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; min-width: 0; margin-left: auto; }
.profile-pet-detail-meta :is(.profile-pet-location, .profile-pet-restrictions) { margin: 0; }
.profile-pet-detail-meta .profile-inventory-fields { margin: 0; }
.profile-pet-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(260px, 1fr); gap: 20px; padding-top: 14px; }
.profile-pet-primary, .profile-pet-secondary { min-width: 0; }
.profile-item-tooltip .profile-pet-layout { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; text-align: left; }
.profile-pet-primary { padding-right: 18px; border-right: 1px solid rgba(231, 189, 123, .25); }
.profile-item-tooltip .profile-pet-primary { padding-right: 16px; padding-bottom: 0; border-right: 1px solid rgba(231, 189, 123, .25); border-bottom: 0; }
.profile-pet-primary h4, .profile-pet-tab-panel h4 { margin: 0 0 8px; font: 600 13px var(--serif); }
.profile-pet-primary h4:not(:first-child), .profile-pet-tab-panel h4:not(:first-child) { margin: 14px 0 8px; padding-top: 10px; border-top: 1px solid rgba(231, 189, 123, .25); }
.profile-pet-primary .profile-inventory-fields { grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 4px 8px; }
.profile-pet-primary .profile-inventory-fields :is(dt, dd) { white-space: nowrap; }
.profile-inventory-fields > .profile-inventory-field-sentence { grid-column: 1 / -1; }
.profile-inventory-fields > .profile-inventory-field-sentence dt { white-space: normal; overflow-wrap: anywhere; }
.profile-pet-primary .profile-inventory-fields > div, .profile-pet-tab-panel .profile-inventory-fields > div { min-height: 26px; padding: 3px 6px; }
.profile-pet-tabs { display: flex; gap: 5px; margin-bottom: 12px; border-bottom: 1px solid rgba(231, 189, 123, .38); }
.profile-pet-tabs button { flex: 1; min-width: 0; min-height: 31px; padding: 4px 6px; border: 1px solid transparent; border-bottom: 0; background: transparent; color: #c5c9bd; font-size: 12px; white-space: nowrap; }
.profile-pet-tabs button:hover, .profile-pet-tabs button:focus-visible, .profile-pet-tabs button[aria-selected="true"] { border-color: rgba(231, 189, 123, .5); background: rgba(231, 189, 123, .14); color: var(--gold-bright); outline: none; }
.profile-pet-tab-panel { max-height: 400px; overflow-y: auto; padding-right: 5px;   }
.profile-pet-tab-panel .profile-inventory-fields { grid-template-columns: minmax(0, 1fr); }
.profile-pet-skill-tabs { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.profile-pet-skill-tabs button { min-height: 30px; padding: 4px 9px; border: 1px solid rgba(231, 189, 123, .32); border-radius: 2px; background: rgba(5, 19, 27, .45); color: #c5c9bd; font-size: 11px; white-space: nowrap; cursor: pointer; }
.profile-pet-skill-tabs button:hover, .profile-pet-skill-tabs button:focus-visible, .profile-pet-skill-tabs button[aria-selected="true"] { border-color: rgba(231, 189, 123, .7); background: rgba(231, 189, 123, .16); color: var(--gold-bright); outline: none; }
.profile-pet-skills { display: grid; gap: 3px; }
.profile-pet-skills details { border-bottom: 1px solid rgba(231, 189, 123, .2); }
.profile-pet-skills summary { display: flex; justify-content: space-between; gap: 8px; min-height: 30px; padding: 5px 4px; color: #e7cf80; font-size: 12px; cursor: pointer; list-style: none; }
.profile-pet-skills summary::-webkit-details-marker { display: none; }
.profile-pet-skills summary::before { content: '›'; margin-right: 2px; color: #70d9ec; transition: transform .15s; }
.profile-pet-skills details[open] summary::before { transform: rotate(90deg); }
.profile-pet-skills summary span:first-child { flex: 1; min-width: 0; }
.profile-pet-skills summary span:last-child { min-width: 0; max-width: 50%; color: #70d9ec; text-align: right; overflow-wrap: anywhere; }
.profile-pet-skills details p { margin: 0 0 8px; padding: 0 6px 0 16px; color: #b9c2bc; font-size: 11px; line-height: 1.5; }
.profile-child-equipment details > .profile-inventory-fields { margin: 2px 0 10px 16px; }
.profile-pet-layout.profile-pet-card,
.profile-item-tooltip .profile-pet-layout.profile-pet-card { grid-template-columns: minmax(0, 1fr); gap: 4px; padding-top: 6px; text-align: left; }
.profile-pet-card { color: #8ce681; font-size: 12px; line-height: 1.5; }
.profile-pet-card :is(.profile-pet-primary, .profile-pet-secondary) { min-width: 0; }
.profile-pet-layout.profile-pet-card .profile-pet-primary { display: flex; align-items: center; justify-content: center; gap: 24px; padding: 0 24px; border: 0; }
.profile-pet-card-summary { flex: 1; min-width: 0; }
.profile-pet-page-buttons { display: flex; justify-content: flex-end; gap: 6px; margin-top: 2px; }
.profile-pet-page-buttons[hidden] { display: none; }
.profile-pet-page-buttons button { display: grid; place-items: center; flex: none; width: 24px; height: 24px; min-width: 0; min-height: 0; padding: 0; border: 1px solid #b59b5b; border-radius: 50%; background: radial-gradient(circle, #153a3d 45%, #082226 75%); box-shadow: inset 0 0 0 2px #0d2528; color: #bfa765; font: 600 12px/1 Georgia, serif; cursor: pointer; }
.profile-pet-page-buttons button:is(:hover, [aria-selected="true"]) { border-color: #e6c577; background: radial-gradient(circle, #285c5c 45%, #103638 75%); box-shadow: inset 0 0 0 2px #143638, 0 0 3px #70d9ec66; color: #ffe39b; }
.profile-pet-page-buttons button:focus-visible { outline: 1px solid #70d9ec; outline-offset: 2px; }
.profile-pet-card .profile-pet-card-portrait { position: relative; display: grid; place-items: center; flex: none; align-self: center; width: 180px; height: 150px; border: 0; background: transparent; color: #e7cf80; font: 32px var(--serif); }
.profile-pet-card .profile-pet-card-portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.profile-pet-tooltip > .profile-item-tooltip-layout { display: block; }
.profile-pet-card h4 { color: #70d9ec; font: 600 13px var(--serif); margin: 0 0 6px; }
.profile-pet-card .profile-pet-tab-panel { max-height: min(480px, 62vh); padding: 0 18px 0 36px; }
.profile-pet-card .profile-pet-tab-panel { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; }
.profile-pet-card-section { display: grid; grid-template-columns: 70px minmax(0, 1fr); align-items: baseline; gap: 0; margin: 0; min-width: 0; }
.profile-pet-card .profile-pet-card-section.has-long-title > h4 { grid-column: 1 / -1; white-space: normal; }
.profile-pet-card-section > .profile-pet-card-rows { grid-column: 2; min-width: 0; max-width: 100%; }
.profile-pet-card .profile-pet-card-section h4 { margin: 0; padding: 0; border: 0; font-size: 12px; line-height: inherit; white-space: nowrap; }
.profile-pet-card-section > h4 { display: flex; align-items: baseline; }
.profile-pet-card-section-label { position: relative; flex: none; width: 70px; padding-right: 22px; text-align: justify; text-align-last: justify; }
.profile-pet-card-section-label::after { content: '：'; position: absolute; right: 10px; }
.profile-pet-card-section.has-wide-label .profile-pet-card-section-label { width: auto; white-space: nowrap; text-align: left; text-align-last: auto; }
.profile-pet-card-section-note { min-width: 0; overflow-wrap: anywhere; }
.profile-pet-card-stats, .profile-pet-card-rows { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 0 12px; }
.profile-pet-card-stats { grid-template-columns: minmax(145px, max-content) minmax(0, max-content); color: #f0f0e7; margin: 0; }
.profile-pet-card-stats > div { min-width: 0; }
.profile-pet-card-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 5px; margin: 0; min-width: 0; overflow-wrap: anywhere; }
.profile-pet-card-label { white-space: nowrap; }
.profile-pet-card .profile-pet-card-line { margin: 0; color: inherit; line-height: inherit; }
.profile-pet-card .profile-pet-card-line[data-tone="white"] { color: #e4eee0; }
.profile-pet-card .profile-pet-card-line[data-tone="blue"] { color: #79b8ff; }
.profile-pet-card .profile-pet-card-line[data-tone="gold"] { color: #f4d657; }
.profile-pet-card .profile-pet-card-line[data-tone="pink"] { color: #ff9ecb; }
.profile-pet-card .profile-pet-card-line[data-tone="green"] { color: #8ce681; }
.profile-pet-card-diff { color: #a4aaa4; }
.profile-pet-card-bonus { color: #f4d657; }
.profile-pet-card-rows[data-columns="4"] { grid-template-columns: repeat(4, minmax(0, max-content)); }
.profile-pet-card-rows[data-columns="5"] { grid-template-columns: repeat(5, minmax(0, max-content)); }
.profile-pet-card-rows[data-columns="3"] { grid-template-columns: repeat(3, minmax(0, max-content)); }
.profile-pet-card-total-growth { grid-column: 1 / -1; }
.profile-pet-card-book, .profile-pet-tab-panel > .profile-pet-card-line { grid-column: 1 / -1; margin: 0; }
.profile-pet-card-book + .profile-pet-card-book { margin-top: 1.5em; }
.profile-pet-card-book-list { grid-column: 2; min-width: 0; }
.profile-pet-card-book .profile-pet-card-book-properties { grid-template-columns: repeat(2, max-content max-content); gap: 0 12px; }
.profile-pet-card-book-properties > .profile-pet-card-line { display: grid; grid-template-columns: subgrid; grid-column: span 2; white-space: nowrap; }
.profile-pet-card-book-properties .profile-pet-card-value { white-space: nowrap; }
.profile-pet-card .profile-pet-card-book-bonuses { display: block; margin: 1.5em 0 0 70px; }
.profile-pet-card .profile-pet-card-book-bonuses h4 { color: #f4d657; }
.profile-pet-card-book-bonuses .profile-pet-card-section-label { width: auto; padding: 0; text-align: left; text-align-last: auto; }
.profile-pet-card-book-bonuses .profile-pet-card-section-label::after { content: none; }
.profile-pet-card .profile-pet-card-book h4 { margin: 0; padding: 0; border: 0; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.profile-pet-card-book h4 { color: #eee; }
.profile-pet-card-book[data-tone="blue"] h4 { color: #79b8ff; }
.profile-pet-card-book[data-tone="gold"] h4 { color: #f4d657; }
.profile-pet-card-book[data-tone="pink"] h4 { color: #ff9ecb; }
.profile-pet-card-book[data-tone="green"] h4 { color: #8ce681; }
.profile-pet-card-book .profile-item-tooltip-group { margin: 0; border: 0; padding: 0; }
.profile-pet-card-book .profile-item-tooltip-line { color: #8ce681; text-align: left; }
.profile-pet-card-book [data-tone="gray"] .profile-item-tooltip-line { color: #a4aaa4; }
.profile-pet-card-book-effects { grid-column: 1 / -1; min-width: 0; margin: 1.5em 0 0 70px; }
.profile-pet-card .profile-pet-card-book-effects h4 { margin: 0; line-height: inherit; color: #58def1; }
.profile-pet-card-book-effects .profile-pet-card-line { display: block; }
.profile-pet-card-name h4 { color: #f4d657; }
.profile-pet-card-name[data-upgraded="true"] h4 { color: #ff75ef; }
@media (max-width: 600px) {
  .profile-pet-card-rows[data-columns="4"], .profile-pet-card-rows[data-columns="5"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .profile-pet-layout.profile-pet-card { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .profile-item-tooltip .profile-pet-layout.profile-pet-card { grid-template-columns: minmax(0, 1fr); }
  .profile-pet-card-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 8px; }
  .profile-pet-layout.profile-pet-card .profile-pet-primary { gap: 10px; padding: 0; }
  .profile-pet-card .profile-pet-card-portrait { width: 70px; height: 100px; }
  .profile-pet-card .profile-pet-tab-panel { padding: 0; }
  .profile-pet-card-section { grid-template-columns: 60px minmax(0, 1fr); }
  .profile-pet-card-book-effects { margin-left: 60px; }
  .profile-pet-card .profile-pet-card-book-bonuses { margin-left: 60px; }
  .profile-pet-card-section-label { width: 60px; padding-right: 18px; }
  .profile-pet-card-section-label::after { right: 6px; }
  .profile-pet-card-rows, .profile-pet-card-rows[data-columns="3"] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 8px; }
  .profile-pet-card-book .profile-pet-card-book-properties { grid-template-columns: max-content max-content; gap: 0 8px; }
  .profile-pet-card-book-bonuses > .profile-pet-card-rows { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  #profile {
    overflow-y: auto;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
  }
  #profile .profile-page-content { padding-bottom: 32px; }
  .profile-inventory-canvas { padding-bottom: 8px; }
  .profile-inventory-content { grid-template-columns: minmax(0, 1fr); }
  .is-role-view .profile-inventory-aside:not([hidden]) { contain: none; }
  .profile-role-skill-panel { flex: none; height: 400px; }
  .profile-inventory-list, .profile-inventory-aside { grid-column: 1 / -1; min-height: 0; padding: 12px; }
  .profile-inventory-list.is-compact-item-view { width: 100%; }
  .profile-inventory-content.is-pet-view { grid-template-columns: minmax(0, 1fr); }
  .is-pet-view .profile-inventory-choices { grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)); }
  .profile-pet-layout { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .profile-pet-primary { padding-right: 0; padding-bottom: 14px; border-right: 0; border-bottom: 1px solid rgba(231, 189, 123, .25); }
  .profile-role-summary { width: 100%; }
}
@media (max-width: 400px) {
  .profile-pet-primary .profile-inventory-fields { grid-template-columns: minmax(0, 1fr); }
  .profile-role-overview { grid-template-columns: minmax(0, 1fr); }
  .profile-role-large, .profile-role-meta, .profile-role-combat-stats, .profile-role-basic-stats { grid-column: 1; }
  .profile-role-large { min-height: 180px; }
  .profile-role-large img { height: 178px; }
}
@media (max-width: 600px) {
  .profile-item-tooltip .profile-pet-layout { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .profile-item-tooltip .profile-pet-primary { padding-right: 0; padding-bottom: 12px; border-right: 0; border-bottom: 1px solid rgba(231, 189, 123, .25); }
  .profile-character-picker { width: 100%; min-width: 0; }
  .is-five-column .profile-inventory-slot-mark { font-size: 18px; }
}
.profile-invite[hidden] { display: none; }

.email-binding-warning { margin: -6px 0 12px; color: #945e32; font-size: 12px; }

.profile-panel p { color: rgba(242, 246, 242, .67); line-height: 1.7; }

.profile-invite > p { margin: 0 0 12px; font-size: 13px; }

#profile-invite-status { color: var(--gold-bright); }

#profile-invited-by { color: var(--gold-bright); }

.profile-invite label { display: grid; gap: 8px; width: min(100%, 440px); color: rgba(242, 246, 242, .8); font-size: 12px; }

.profile-invite input { width: 100%; height: 44px; padding: 0 14px; border: 1px solid rgba(231, 189, 123, .48); border-radius: 2px; color: #f2f6f2; background: rgba(5, 19, 27, .92); font: 13px var(--sans); }

.profile-invite input:focus-visible { outline: 2px solid rgba(231, 189, 123, .35); outline-offset: 1px; }

.profile-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }

.profile-actions button { min-width: 120px; height: 42px; padding: 0 17px; border: 1px solid var(--gold-bright); border-radius: 2px; font: 700 12px var(--sans); transition: background .2s, color .2s; }

.profile-actions .primary-btn { background: var(--gold-bright); color: var(--ink); }

.profile-actions .primary-btn:hover:not(:disabled), .profile-actions .primary-btn:focus-visible { background: #fff; border-color: #fff; transform: none; outline: none; }

.profile-actions .secondary-btn { background: transparent; color: var(--gold-bright); }

.profile-actions .secondary-btn:hover:not(:disabled), .profile-actions .secondary-btn:focus-visible { background: rgba(231, 189, 123, .13); color: #fff; outline: none; }

.profile-actions button:disabled { opacity: .48; cursor: not-allowed; }

@media (max-width: 760px) {
.profile-data { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.profile-data-group:nth-child(2) { padding-right: 0; border-right: 0; }

.profile-data-group:last-child { grid-column: 1 / -1; padding-top: 16px; border-top: 1px solid rgba(231, 189, 123, .22); }

}

@media (max-width: 540px) {
.profile-inventory .profile-panel-heading { align-items: flex-start; flex-direction: column; }
.profile-data { grid-template-columns: minmax(0, 1fr); gap: 17px; }

.profile-data-group { padding: 0 0 17px; border: 0; border-bottom: 1px solid rgba(231, 189, 123, .22); }

.profile-data-group:nth-child(2) { padding-right: 0; border-bottom: 1px solid rgba(231, 189, 123, .22); }

.profile-data-group:last-child { grid-column: auto; padding: 0; border: 0; }

}


/* Keep the backdrop full-bleed while foreground art stays at its native size. */
@media (min-width: 1921px) {
.hero-scene > .hero-scene-role, .hero-scene > .hero-scene-mask {
    left: calc((100% - 1920px) / 2);
    right: calc((100% - 1920px) / 2);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  }

.hero-scene-mask { background-size: 1920px 1080px; }

.hero-scene-role { --hero-role-art-offset: 210px; background-size: 1486px 1072px; }

.hero-scene-role, .hero-scene-mask { animation: none; }

}

.hero-content {
  width: min(1180px, 100%);
  max-width: none;
  margin-inline: auto;
}

.checkin-section { display: flex; }

.checkin-layout {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(45px, 8vw, 88px);
  width: min(1180px, 100%);
  margin-inline: auto;
}

.checkin-layout > * { min-width: 0; }

.member-section { justify-content: center; }

.member-section > .member-page-content {
  width: min(1180px, 100%);
  max-width: none;
  margin-inline: 0;
}

@media (min-width: 1101px) {
.member-section { padding-inline: clamp(20px, 8vw, 120px); }

}

@media (max-width: 1100px) {
.checkin-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; }

}

.hero-scroll {
  display: none;
}

.site-footer {
  position: relative;
  z-index: 3;
  flex: 0 0 auto;
  margin-top: 0;
  border-top: 1px solid rgba(231, 189, 123, .18);
  padding-top: 16px;
  padding-bottom: 16px;
  overflow: hidden;
  transition: transform .22s ease, margin-bottom .22s ease, opacity .18s ease;
}

/* Content sections are independently scrollable. Reclaim the footer row
   while reading, and keep the header out of the way until the user scrolls up. */
html.site-chrome-hidden .site-header {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-100%);
}

html.site-chrome-hidden .site-footer {
  margin-bottom: calc(-1 * var(--site-footer-height, 70px));
  transform: translateY(100%);
  pointer-events: none;
  opacity: 0;
}

.page-track > section { overflow-anchor: none; }

@media (prefers-reduced-motion: reduce) {
  .site-header, .site-footer { transition: none; }
}

.footer-links :is(a, button) {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: inherit;
  transition: color .18s;
}

.footer-links :is(a, button):hover {
  color: var(--gold-bright);
}

.footer-links :is(a, button):focus-visible {
  color: var(--gold-bright);
  outline: 1px solid var(--gold-bright);
  outline-offset: 4px;
}

.check-label [data-open-legal] {
  padding: 0;
  background: transparent;
  color: var(--jade);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.check-label [data-open-legal]:focus-visible {
  outline: 2px solid var(--jade);
  outline-offset: 2px;
}

.legal-modal {
  display: flex;
  flex-direction: column;
  width: min(620px, calc(100vw - 32px));
  max-height: min(720px, calc(100dvh - 32px));
}

.legal-modal .legal-content {
  min-height: 0;
  overflow-y: auto;
  padding-right: 8px;
  color: #59696d;
  font-size: 13px;
  line-height: 1.8;
  
  
}

.legal-content h3 { margin: 21px 0 5px; color: var(--ink); font: 700 16px var(--serif); }

.legal-content p { margin: 0 0 10px; }

@media (max-width: 540px) {
.checkin-section, .member-section {
    padding-top: 78px;
    padding-bottom: 24px;
  }

.site-footer {
    gap: 6px 16px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

.footer-links {
    gap: 8px 18px;
  }

}


/* Operation feedback is a viewport notification, not document content. Keep
   it out of the page flow so it can never render beneath the footer. */
.notice-toast {
  position: fixed;
  z-index: 40;
  top: 50%;
  left: 50%;
  width: min(420px, calc(100vw - 32px));
  padding: 13px 17px;
  border: 1px solid rgba(231, 189, 123, .62);
  background: rgba(8, 25, 33, .96);
  color: #f2f6f2;
  box-shadow: 0 14px 34px rgba(3, 16, 22, .34);
  font-size: 12px;
  line-height: 1.55;
  pointer-events: none;
  opacity: 0;
  text-align: center;
  transform: translate(-50%, calc(-50% + 12px));
  transition: opacity .2s ease, transform .2s ease;
}

.notice-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, -50%);
}

.notice-toast.is-error {
  border-color: rgba(220, 103, 93, .72);
  color: #ffd4cf;
}

.notice-toast[hidden] {
  display: none;
}

.recharge-notice-cost-amount { color: #ff8f88; }

.recharge-notice-reward-amount { color: #8ee5a5; }

.recharge-notice-reward-label { color: #8ee5a5; }

.notice-toast .recharge-notice-cost .currency-label, .notice-toast .recharge-notice-reward .currency-label { color: inherit; }

.confirm-dialog {
  position: fixed;
  z-index: 45;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(3, 11, 18, .46);
}

.confirm-dialog[hidden] {
  display: none;
}

.confirm-dialog-panel {
  width: min(100%, 420px);
  padding: 22px 24px 20px;
  border: 1px solid rgba(231, 189, 123, .62);
  background: rgba(8, 25, 33, .98);
  color: #f2f6f2;
  box-shadow: 0 18px 48px rgba(3, 16, 22, .5);
}

.confirm-dialog-panel .eyebrow {
  margin-bottom: 13px;
}

.confirm-dialog-panel h2 {
  margin: 0;
  color: #f2f6f2;
  font: 600 22px var(--serif);
}

.confirm-dialog-panel > p:not(.eyebrow) {
  margin: 9px 0 20px;
  color: rgba(255, 255, 255, .78);
  font-size: 13px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.confirm-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
}

.confirm-dialog-actions button {
  min-width: 76px;
  min-height: 38px;
  padding: 8px 14px;
  border: 1px solid rgba(231, 189, 123, .48);
  background: transparent;
  color: rgba(255, 255, 255, .82);
  font-size: 12px;
}

.confirm-dialog-actions button:hover, .confirm-dialog-actions button:focus-visible {
  border-color: var(--gold-bright);
  color: var(--gold-bright);
  outline: none;
}

.confirm-dialog-actions .primary-btn {
  border-color: var(--gold-bright);
  background: var(--gold-bright);
  color: var(--ink);
  cursor: pointer;
}

.confirm-dialog-actions .primary-btn:hover, .confirm-dialog-actions .primary-btn:focus-visible {
  background: var(--gold-bright);
  color: var(--ink);
}

.qibao-character-dialog { position: fixed; z-index: 55; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(3, 11, 18, .58); }
.qibao-character-dialog[hidden] { display: none; }
.qibao-character-dialog-panel { display: grid; grid-template-rows: auto auto minmax(0, 1fr); width: min(100%, 460px); max-height: calc(100dvh - 40px); padding: 20px; border: 1px solid rgba(231, 189, 123, .62); background: #10242b; color: #f2f6f2; box-shadow: 0 18px 48px rgba(3, 16, 22, .56); }
.qibao-character-dialog-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.qibao-character-dialog-heading .eyebrow { margin: 0 0 8px; }
.qibao-character-dialog-heading h2 { margin: 0; color: #f2f6f2; font: 600 22px var(--serif); }
.qibao-character-dialog-close { display: grid; place-items: center; flex: none; width: 32px; height: 32px; padding: 0; border: 1px solid rgba(231, 189, 123, .48); background: transparent; color: rgba(255, 255, 255, .82); font-size: 23px; line-height: 1; cursor: pointer; }
.qibao-character-dialog-close:hover, .qibao-character-dialog-close:focus-visible { border-color: var(--gold-bright); color: var(--gold-bright); outline: none; }
.qibao-character-dialog-panel > p { margin: 10px 0 16px; color: rgba(255, 255, 255, .72); font-size: 13px; line-height: 1.6; }
.qibao-character-dialog-list { display: grid; align-content: start; gap: 6px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-right: 3px;   }
.qibao-character-dialog-option { display: flex; align-items: center; gap: 12px; width: 100%; min-width: 0; min-height: 62px; padding: 7px 9px; border: 1px solid rgba(231, 189, 123, .22); background: rgba(5, 18, 24, .52); color: #f2f6f2; font: 13px var(--sans); text-align: left; cursor: pointer; }
.qibao-character-dialog-option:hover, .qibao-character-dialog-option:focus-visible, .qibao-character-dialog-option[aria-selected=true] { border-color: rgba(231, 189, 123, .72); background: rgba(231, 189, 123, .13); outline: none; }
.qibao-character-dialog-avatar { display: grid; place-items: center; flex: none; width: 46px; height: 46px; overflow: hidden; border: 1px solid rgba(231, 189, 123, .45); background: rgba(255,255,255,.05); color: var(--gold-bright); font: 18px var(--serif); }
.qibao-character-dialog-avatar > * { grid-area: 1 / 1; }
.qibao-character-dialog-avatar img { width: 100%; height: 100%; object-fit: cover; }
.qibao-character-dialog-copy { display: grid; min-width: 0; gap: 3px; }
.qibao-character-dialog-copy strong { overflow-wrap: anywhere; color: #fff; font-weight: 600; }
.qibao-character-dialog-copy small { color: rgba(255, 255, 255, .62); font-size: 11px; }
.qibao-character-dialog-empty { margin: 0; padding: 22px 10px; color: rgba(255, 255, 255, .66); text-align: center; }

@media (max-width: 440px) {
  .qibao-character-dialog { padding: 14px; }
  .qibao-character-dialog-panel { max-height: calc(100dvh - 28px); padding: 17px; }
}

.currency-dao::before { background: #65cfff; -webkit-mask-image: url('./coin.svg'); mask-image: url('./coin.svg'); }

/* Events: a calmer catalogue layout with a clear distinction between regular
   announcements and playable lottery activities. */
.events-content {
  width: min(100%, 1180px);
  margin: 0 auto;
  padding: 20px 0 34px;
}

.events-content #event-list-view {
  padding: 24px;
  border: 1px solid rgba(231, 189, 123, .38);
  background: rgba(5, 19, 27, .58);
  box-shadow: 0 18px 46px rgba(0, 0, 0, .16);
}

.events-content #event-list-view > .eyebrow { margin-bottom: 8px; }

.events-content #events-title {
  margin: 0;
  color: #fff;
  font: 900 clamp(32px, 4vw, 52px) / 1.08 var(--serif);
}

.events-content .event-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  max-height: none;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(231, 189, 123, .22);
  overflow: visible;
}

.events-content .event-card {
  min-height: 248px;
  aspect-ratio: auto;
  padding: 0;
  border-color: rgba(231, 189, 123, .42);
  border-radius: 3px;
  background: rgba(10, 35, 42, .92);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .18);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.events-content .event-card:hover,
.events-content .event-card:focus-visible {
  border-color: var(--gold-bright);
  box-shadow: 0 13px 30px rgba(0, 0, 0, .3), 0 0 0 1px rgba(231, 189, 123, .16);
  transform: translateY(-3px);
  outline: none;
}

.events-content .event-card > img {
  height: 148px;
  object-fit: cover;
  opacity: .92;
}

.events-content .event-card::after {
  height: 148px;
  bottom: auto;
  background: linear-gradient(180deg, rgba(5, 19, 27, .04), rgba(5, 19, 27, .8));
}

.events-content .event-card-copy {
  align-content: end;
  width: 100%;
  min-height: 100%;
  box-sizing: border-box;
  gap: 5px;
  padding: 165px 17px 16px;
  background: linear-gradient(180deg, transparent 38%, rgba(5, 19, 27, .95) 54%);
  text-align: left;
}

.events-content .event-card-copy strong {
  font-size: 20px;
  line-height: 1.25;
}

.events-content .event-card-copy small {
  display: -webkit-box;
  overflow: hidden;
  color: rgba(255, 255, 255, .7);
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.events-content .event-card-badge {
  width: fit-content;
  padding: 3px 7px;
  border: 1px solid rgba(255, 226, 123, .7);
  border-radius: 2px;
  background: rgba(98, 68, 16, .65);
  color: #ffe27b;
  font: 600 10px var(--sans);
  letter-spacing: .08em;
}

.events-content .event-card-badge-news,
.events-content .event-card-badge-announcement {
  border-color: rgba(139, 220, 207, .55);
  background: rgba(21, 88, 82, .5);
  color: #b3eee2;
}

.events-content .event-card-badge-announcement {
  border-color: rgba(231, 189, 123, .62);
  background: rgba(95, 62, 22, .52);
  color: #ffe0a3;
}

.events-content .event-card:has(.event-card-badge) {
  border-color: rgba(255, 213, 98, .62);
  background: linear-gradient(145deg, rgba(62, 47, 20, .95), rgba(10, 35, 42, .94));
}

.events-content .event-card-no-image {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  min-height: 0;
  gap: 12px;
  padding: 16px 17px;
  background: rgba(10, 35, 42, .92);
}

.events-content .event-card-no-image .event-card-excerpt {
  position: static;
  inset: auto;
  max-height: none;
  -webkit-line-clamp: 3;
}

.events-content .event-card-no-image .event-card-copy {
  min-height: 0;
  padding: 0;
  background: transparent;
}

.events-content .event-card-no-image::after {
  height: 100%;
  background: linear-gradient(180deg, rgba(5, 19, 27, .34), rgba(5, 19, 27, .96));
}

.events-content .event-detail-view {
  padding: 4px 0 30px;
}

.events-content .event-detail-back {
  margin-bottom: 12px;
  border-radius: 3px;
}

.events-content .event-detail-view .event-modal-content {
  overflow: visible;
  min-width: 0;
  scrollbar-gutter: auto;
  border-color: rgba(231, 189, 123, .5);
  border-radius: 3px;
  background: rgba(5, 19, 27, .84);
  box-shadow: 0 18px 46px rgba(0, 0, 0, .22);
}

/* The event kind is a text span, not the decorative eyebrow rule. */
.events-content .event-modal-body .eyebrow > span:not(:first-child) {
  display: inline;
  width: auto;
  height: auto;
  background: transparent;
}

.events-content .event-modal-content > img {
  max-height: 260px;
  aspect-ratio: 3 / 1;
}

.events-content .event-modal-body {
  min-width: 0;
  padding: 26px clamp(20px, 4vw, 42px) 30px;
}

.events-content .event-modal-body h2 { font-size: clamp(28px, 4vw, 40px); }

.events-content #event-modal-summary {
  margin: 9px 0 16px;
  color: #f0d782;
  font-size: 14px;
}

.events-content #event-modal-detail {
  max-width: 78ch;
  color: rgba(255, 255, 255, .78);
  line-height: 1.9;
}

.events-content #event-lottery {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  grid-template-areas:
    "title title"
    "cost cost"
    "status status"
    "wheel actions"
    "wheel skip"
    "wheel odds"
    "hint hint"
    "result result";
  gap: 10px 24px;
  margin-top: 22px;
  padding: 20px 0 0;
  border-top-color: rgba(231, 189, 123, .32);
}

.events-content #event-lottery h3 { grid-area: title; font-size: 22px; }
.events-content #event-lottery-cost { grid-area: cost; margin: 0; }
.events-content #event-lottery-status { grid-area: status; margin: 0 0 6px; }
.events-content #event-lottery-wheel { grid-area: wheel; width: 100%; margin: 0; align-self: start; }
.events-content .event-lottery-actions { grid-area: actions; align-self: end; justify-content: stretch; margin: 0; }
.events-content .event-lottery-actions .primary-btn { flex: 1 0 80px; }
.events-content .lottery-skip-animation { grid-area: skip; align-self: start; margin: 0; }
.events-content .lottery-odds-details { grid-area: odds; margin: 0; align-self: start; }
.events-content #event-draw-result { grid-area: result; margin: 0; }
.events-content .event-prize-claim-hint { grid-area: hint; }
.events-content #event-lottery > * { min-width: 0; }
.events-content .event-lottery-actions { flex-wrap: wrap; }
.events-content .event-lottery-actions .primary-btn { min-width: max-content; }
.events-content .event-prize-odds { flex-wrap: wrap; overflow-wrap: anywhere; }

@media (max-width: 480px) {
  .events-content .event-lottery-actions .primary-btn { flex-basis: calc((100% - 8px) / 2); }
}

@media (max-width: 900px) {
  .events-content .event-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 800px) {
  .events-content { padding-top: 12px; }
  .events-content #event-list-view { padding: 17px; }
  .events-content .event-grid { grid-template-columns: 1fr; }
  .events-content #event-lottery {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "title" "cost" "status" "wheel" "actions" "skip" "hint" "odds" "result";
    gap: 9px;
  }
  .events-content #event-lottery-wheel { width: min(100%, 520px); justify-self: center; }
  .events-content .event-lottery-actions { width: 100%; }
}

/* Personal center: keep account details compact and give role data priority. */
#profile {
  align-items: flex-start;
  padding-inline: clamp(20px, 3vw, 48px);
}

#profile .profile-page-content {
  display: grid;
  grid-template-columns: minmax(260px, 292px) minmax(0, 1fr);
  grid-template-areas:
    "heading heading"
    "account inventory"
    "invite inventory"
    "message message";
  align-items: start;
  gap: 16px 20px;
  width: min(100%, 1380px);
}

#profile .profile-page-heading {
  grid-area: heading;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  min-width: 0;
  padding: 0 2px 13px;
  border-bottom: 1px solid rgba(231, 189, 123, .35);
}

#profile .profile-page-heading .eyebrow {
  order: 2;
  margin: 0 0 5px;
  font-size: 10px;
}

#profile .profile-page-heading h2 {
  margin: 0;
  font-size: clamp(30px, 3vw, 42px);
  line-height: 1;
  letter-spacing: 0;
}

#profile .profile-panel {
  min-width: 0;
  margin: 0;
  padding: 17px;
  border: 1px solid rgba(231, 189, 123, .38);
  border-radius: 4px;
  background: rgba(5, 19, 27, .82);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
}

#profile .profile-account { grid-area: account; }

#profile .profile-inventory { grid-area: inventory; }

#profile .profile-invite { grid-area: invite; }

#profile > .profile-page-content > .form-message { grid-area: message; margin: 0; }

#profile .profile-panel-heading {
  min-height: 38px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(231, 189, 123, .2);
}

#profile .profile-panel h3 {
  margin: 0;
  font-size: 16px;
}

#profile .profile-refresh {
  width: 34px;
  height: 34px;
}

#profile .profile-account .profile-data {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin-top: 4px;
}

#profile .profile-account .profile-data-group,
#profile .profile-account .profile-data-group:nth-child(2),
#profile .profile-account .profile-data-group:last-child {
  grid-column: auto;
  padding: 14px 0;
  border: 0;
  border-bottom: 1px solid rgba(231, 189, 123, .18);
}

#profile .profile-account .profile-data-group:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

#profile .profile-account .profile-data-group h4 { margin-bottom: 9px; }

#profile .profile-account .profile-data-group dl { gap: 6px; }

#profile .profile-account .profile-data-group dl > div {
  min-height: 23px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}

#profile .profile-account .profile-data-group dl > div:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

#profile .profile-account .profile-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
  margin-top: 11px;
}

#profile .profile-account .profile-actions button {
  width: 100%;
  height: 36px;
}

#profile .profile-inventory .profile-panel-heading { gap: 14px; }

#profile .profile-inventory-query-actions { justify-content: flex-end; }

#profile .profile-inventory-canvas { margin-top: 14px; }

#profile .profile-inventory-tabs {
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(231, 189, 123, .16);
}

@media (max-width: 1080px) {
  #profile .profile-page-content {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "heading"
      "account"
      "inventory"
      "invite"
      "message";
  }

  #profile .profile-account .profile-data {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 14px;
  }

  #profile .profile-account .profile-data-group,
  #profile .profile-account .profile-data-group:nth-child(2),
  #profile .profile-account .profile-data-group:last-child {
    padding: 0 18px 0 0;
    border: 0;
    border-right: 1px solid rgba(231, 189, 123, .18);
  }

  #profile .profile-account .profile-data-group:last-child {
    padding-right: 0;
    border-right: 0;
  }
}

@media (max-width: 760px) {
  #profile { padding-inline: 18px; }

  #profile .profile-account .profile-data { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  #profile .profile-account .profile-data-group:nth-child(2) {
    padding-right: 0;
    border-right: 0;
  }

  #profile .profile-account .profile-data-group:last-child {
    grid-column: 1 / -1;
    padding-top: 14px;
    border-top: 1px solid rgba(231, 189, 123, .18);
  }

  #profile .profile-page-heading .eyebrow { display: none; }
}

@media (max-width: 540px) {
  #profile .profile-page-content { gap: 12px; }

  #profile .profile-page-heading { padding-bottom: 10px; }

  #profile .profile-page-heading h2 { font-size: 30px; }

  #profile .profile-panel { padding: 14px; }

  #profile .profile-account .profile-data {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    margin-top: 4px;
  }

  #profile .profile-account .profile-data-group,
  #profile .profile-account .profile-data-group:nth-child(2),
  #profile .profile-account .profile-data-group:last-child {
    grid-column: auto;
    padding: 13px 0;
    border: 0;
    border-bottom: 1px solid rgba(231, 189, 123, .18);
  }

  #profile .profile-account .profile-data-group:last-child {
    padding-bottom: 0;
    border-bottom: 0;
  }

  #profile .profile-inventory-query-actions,
  #profile .profile-inventory-query-actions > button,
  #profile .profile-character-select { width: 100%; }

  #profile .profile-inventory-query-actions > button { min-height: 40px; }
}

#prizes { align-items: flex-start; }
#qibao { align-items: flex-start; }
#qibao .qibao-page-content { width: min(980px, 100%); padding-top: 14px; }
#qibao .eyebrow { margin-bottom: 10px; }
.qibao-heading { display: flex; align-items: baseline; gap: 16px; margin-bottom: 18px; }
#qibao .qibao-heading h2 { margin: 0; font-size: 34px; letter-spacing: 0; }
.qibao-heading > span, .qibao-form-hint { color: rgba(255,255,255,.64); font-size: 12px; }
.qibao-navigation { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 22px; margin-bottom: 16px; border-bottom: 1px solid rgba(231,189,123,.28); }
.qibao-tabs { display: flex; align-self: stretch; gap: 20px; }
.qibao-tabs button { min-height: 38px; padding: 0 0 8px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: rgba(255,255,255,.65); font: 13px var(--sans); cursor: pointer; }
.qibao-tabs button[aria-selected=true] { border-bottom-color: var(--gold-bright); color: var(--gold-bright); }
.qibao-list { display: grid; border-top: 1px solid rgba(231,189,123,.28); }
.qibao-list[hidden], .qibao-shelf[hidden] { display: none; }
.qibao-card { display: grid; grid-template-columns: 52px minmax(0,1fr) 130px 76px 150px; align-items: start; gap: 12px; min-height: 84px; padding: 14px; border-bottom: 1px solid rgba(255,255,255,.12); background: rgba(5,18,24,.56); }
.qibao-card:nth-of-type(even) { background: rgba(15,32,37,.64); }
.qibao-list-heading { display: grid; grid-template-columns: minmax(0,1fr) 130px 76px 150px; gap: 12px; padding: 10px 14px; border-bottom: 1px solid rgba(231,189,123,.3); background: #18282d; color: #f3dfaf; font-size: 12px; font-weight: 600; }
.qibao-card-price { display: grid; gap: 3px; padding-top: 2px; }
.qibao-card-price strong { color: #ecd29a; font: 600 16px/1.4 var(--sans); overflow-wrap: anywhere; }
.qibao-card-price small { color: rgba(255,255,255,.45); font-size: 10px; }
.qibao-card-status { justify-self: start; padding: 4px 7px; border-radius: 3px; background: rgba(255,255,255,.06); color: rgba(255,255,255,.55); font-size: 11px; white-space: nowrap; }
.qibao-status-listed { background: rgba(112,217,195,.1); color: #a3cebf; }
.qibao-status-draft, .qibao-status-pending { background: rgba(231,189,123,.12); color: #ecd29a; }
.qibao-action-complete { color: rgba(255,255,255,.4); font-size: 11px; padding-top: 4px; }
.qibao-card:hover { background: rgba(5,18,24,.7); }
.qibao-pet-avatar { position: relative; display: grid; place-items: center; width: 52px; height: 52px; overflow: hidden; border: 1px solid rgba(231,189,123,.4); border-radius: 4px; background: rgba(255,255,255,.06); color: var(--gold-bright); }
.qibao-pet-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.qibao-card .qibao-pet-avatar { cursor: pointer; }
.qibao-card .qibao-pet-avatar:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; }
.qibao-card-copy { min-width: 0; }
.qibao-card-copy h3 { margin: 0 0 4px; color: #fff; font: 600 15px/1.4 var(--sans); overflow-wrap: anywhere; }
.qibao-card-identity { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 10px; margin-bottom: 4px; }
.qibao-card-identity h3 { margin-bottom: 0; }
.qibao-restriction-stamps { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 7px; padding: 2px 0; }
.qibao-restriction-stamp { display: inline-block; padding: 1px 5px; border: 3px double currentColor; border-radius: 2px; color: #f0a59b; background: rgba(120,42,34,.12); font: 600 11px/1.3 var(--sans); white-space: nowrap; transform: rotate(-3deg); }
.qibao-restriction-stamp[data-kind="gift"] { color: #b1d8bc; background: rgba(66,111,80,.12); }
.qibao-restriction-stamp[data-kind="time_limit"] { color: #edd098; background: rgba(145,106,40,.12); transform: rotate(-1deg); }
.qibao-card-copy p, .qibao-card-copy small { margin: 0; color: rgba(255,255,255,.65); font-size: 12px; line-height: 1.5; }
.qibao-card-copy small { color: #a3cebf; }
.qibao-properties-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 6px 0 2px; }
.qibao-properties-body.profile-pet-layout { grid-template-columns: minmax(0, 1fr); gap: 4px; padding-top: 6px; }
.qibao-properties-body > p { grid-column: 1 / -1; margin: 0; color: rgba(255,255,255,.62); font-size: 12px; }
.qibao-attribute-section { min-width: 0; padding: 7px 8px; border: 1px solid rgba(255,255,255,.1); background: rgba(0,0,0,.14); }
.qibao-attribute-basic { grid-column: 1 / -1; }
.qibao-attribute-section h4 { margin: 0 0 5px; color: #e7cf80; font-size: 11px; font-weight: 500; }
.qibao-attribute-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px 9px; margin: 0; }
.qibao-attribute-fields > div { display: flex; min-width: 0; gap: 4px; color: rgba(255,255,255,.68); font-size: 11px; line-height: 1.45; }
.qibao-attribute-fields dt, .qibao-attribute-fields dd { min-width: 0; margin: 0; }
.qibao-attribute-fields dt { flex-shrink: 0; white-space: nowrap; }
.qibao-attribute-fields dd { color: #a3cebf; overflow-wrap: anywhere; }
.qibao-attribute-fields > .qibao-attribute-description { grid-column: 1 / -1; display: grid; gap: 5px; margin-top: 5px; }
.qibao-attribute-description dd { color: #d0d9d8; white-space: pre-wrap; line-height: 1.8; }
.qibao-card-controls { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 8px; }
.qibao-purchase-quantity { display: flex; align-items: center; gap: 6px; color: rgba(255,255,255,.75); font: 12px var(--sans); white-space: nowrap; }
.qibao-purchase-quantity input { box-sizing: border-box; width: 58px; height: 34px; padding: 0 6px; border: 1px solid rgba(231,189,123,.28); border-radius: 4px; background: #18282d; color: #fff; font: 12px var(--sans); }
.qibao-role select, .qibao-search-row select, .qibao-search-row input, .qibao-card-controls select, .qibao-create-form select, .qibao-create-form input { box-sizing: border-box; min-width: 0; height: 34px; padding: 0 8px; border: 1px solid rgba(231,189,123,.28); border-radius: 4px; background: #18282d; color: #fff; font: 12px var(--sans); }
.qibao-role { display: flex; align-items: center; gap: 9px; margin-left: auto; padding-bottom: 8px; color: rgba(255,255,255,.55); font-size: 11px; }
.qibao-role select { width: 170px; height: 30px; }
.qibao-role[hidden], .qibao-filter-row[hidden], .qibao-pagination[hidden] { display: none; }
.qibao-filters { padding: 10px 14px; border: 1px solid rgba(231,189,123,.3); border-radius: 5px; background: #18282d; }
.qibao-filter-row { display: flex; align-items: baseline; gap: 18px; padding: 4px 0; }
.qibao-filter-row > span { flex: 0 0 24px; color: #f3dfaf; font-size: 12px; font-weight: 600; }
.qibao-filter-options { display: flex; flex: 1; min-width: 0; flex-wrap: wrap; gap: 5px; }
.qibao-filter-options button { white-space: nowrap; }
.qibao-filter-options button, #qibao-filter-reset { padding: 6px 11px; border: 1px solid transparent; border-radius: 3px; background: transparent; color: rgba(255,255,255,.66); font: 12px var(--sans); cursor: pointer; }
.qibao-filter-options button[aria-pressed=true] { color: #ecd29a; background: rgba(231,189,123,.13); border-color: rgba(231,189,123,.22); }
.qibao-filter-options button:hover, #qibao-filter-reset:hover { color: #ecd29a; }
.qibao-search-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 9px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.08); }
.qibao-search-row label { display: flex; align-items: center; gap: 10px; color: #f3dfaf; font-size: 12px; font-weight: 600; white-space: nowrap; }
.qibao-search { flex: 1; }
.qibao-search input { width: min(100%,300px); }
.qibao-results-bar { display: flex; align-items: center; justify-content: space-between; min-height: 40px; gap: 10px; color: rgba(255,255,255,.48); font-size: 11px; }
.qibao-pagination { display: flex; align-items: center; gap: 10px; }
.qibao-pagination button { width: 28px; height: 28px; border: 1px solid rgba(231,189,123,.28); border-radius: 3px; background: rgba(5,18,24,.5); color: #ecd29a; font-size: 19px; cursor: pointer; }
.qibao-pagination button:disabled { opacity: .3; cursor: default; }
.qibao-pagination span { min-width: 32px; text-align: center; }
#qibao :is(button,select,input,summary):focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; }
.qibao-card-controls select { width: 124px; }
.qibao-card-controls .primary-btn, .qibao-card-controls .secondary-btn { min-height: 34px; padding: 6px 10px; border-radius: 4px; font-size: 12px; letter-spacing: 0; }
.qibao-create-form { display: grid; gap: 0; margin: 0 0 8px; border: 1px solid rgba(231,189,123,.3); border-radius: 5px; background: #13262c; overflow: hidden; }
.qibao-shelf-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.qibao-shelf-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.qibao-pending-count { color: #f3dfaf; font-size: 12px; }
#qibao .qibao-shelf-toolbar h3 { margin: 0; color: #f3dfaf; font: 600 15px/1.5 var(--sans); letter-spacing: 0; }
.qibao-shelf-toolbar button { min-height: 34px; padding: 6px 14px; border-radius: 4px; font-size: 12px; letter-spacing: 0; }
#qibao :is(.qibao-create-form, .qibao-form-hint, .qibao-filters, .qibao-results-bar, .qibao-shelf-toolbar button)[hidden] { display: none; }
.qibao-create-form label { display: grid; gap: 5px; min-width: 0; color: rgba(255,255,255,.68); font-size: 11px; }
.qibao-source-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; background: #18282d; border-bottom: 1px solid rgba(231,189,123,.25); }
.qibao-source-types { display: flex; gap: 4px; }
.qibao-source-types button { padding: 8px 20px; border: 1px solid transparent; border-radius: 4px; background: transparent; color: #d0d9d8; font: 12px var(--sans); cursor: pointer; }
.qibao-source-types button[aria-pressed=true] { background: rgba(231,189,123,.14); border-color: rgba(231,189,123,.35); color: #f3dfaf; }
.qibao-create-form .qibao-source-search { display: flex; align-items: center; gap: 8px; }
.qibao-source-search input { width: 190px; }
.qibao-source-picker { display: grid; grid-template-columns: minmax(230px,.85fr) minmax(0,1.65fr); min-width: 0; }
.qibao-source-browser { min-width: 0; border-right: 1px solid rgba(231,189,123,.2); }
.qibao-source-caption { display: flex; justify-content: space-between; gap: 8px; padding: 12px 14px; color: #f3dfaf; font-size: 12px; }
.qibao-source-caption span { color: #bac8c8; font-size: 11px; }
.qibao-source-list { display: grid; align-content: start; gap: 5px; max-height: 330px; overflow-y: auto; overscroll-behavior: contain;   padding: 0 8px 10px; }
.qibao-source-card { display: flex; width: 100%; min-width: 0; gap: 10px; align-items: center; padding: 8px; text-align: left; border: 1px solid transparent; border-radius: 4px; background: #1b3036; color: #fff; cursor: pointer; }
.qibao-source-card:hover { background: #243d42; }
.qibao-source-card[aria-pressed=true] { border-color: #d1a555; background: #31403d; box-shadow: inset 3px 0 #d1a555; }
.qibao-source-card .qibao-pet-avatar { flex: 0 0 42px; width: 42px; height: 42px; }
.qibao-source-copy { display: grid; gap: 5px; min-width: 0; }
.qibao-source-copy strong { font: 600 12px/1.4 var(--sans); overflow-wrap: anywhere; }
.qibao-source-copy small { color: #bdcfce; font: 11px/1.5 var(--sans); overflow-wrap: anywhere; }
.qibao-source-preview { min-width: 0; padding: 14px 16px; }
.qibao-source-heading { display: flex; align-items: center; gap: 12px; }
.qibao-source-heading:empty { display: none; }
.qibao-source-heading .qibao-pet-avatar { flex-shrink: 0; }
#qibao .qibao-source-heading h3 { margin: 0 0 5px; color: #f3dfaf; font: 600 16px/1.4 var(--sans); letter-spacing: 0; overflow-wrap: anywhere; }
.qibao-source-heading p { margin: 0; color: #bdcfce; font: 11px/1.5 var(--sans); overflow-wrap: anywhere; }
.qibao-source-detail { max-height: 310px; min-height: 0; overflow-y: auto; padding-right: 5px;   color: #d0d9d8; font-size: 12px; }
.qibao-source-detail .qibao-properties-body { padding: 14px 0 0; }
.qibao-source-detail .qibao-properties-body.profile-pet-layout { grid-template-columns: minmax(0,1fr); gap: 4px; }
.qibao-source-detail .qibao-properties-body.profile-pet-card { padding-top: 6px; }
.qibao-source-detail .profile-pet-tab-panel { max-height: none; overflow: visible; }
.qibao-source-detail .qibao-attribute-fields > div { font-size: 12px; color: #d0d9d8; }
.qibao-source-detail .qibao-attribute-fields { row-gap: 10px; }
.qibao-source-empty { display: grid; place-content: center; min-height: 270px; margin: 0; color: #bdcfce; line-height: 1.8; text-align: center; }
.qibao-source-checkout { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 14px; border-top: 1px solid rgba(231,189,123,.25); background: #18282d; }
#qibao-source-selected { flex: 1; min-width: 130px; color: #f3dfaf; font-size: 12px; overflow-wrap: anywhere; }
.qibao-create-form .qibao-source-checkout label { display: flex; align-items: center; gap: 8px; }
.qibao-source-checkout input { width: 140px; }
.qibao-price-unit { color: #bdcfce; font-size: 11px; }
.qibao-create-form .primary-btn { min-width: 106px; min-height: 34px; padding: 6px 10px; border-radius: 4px; font-size: 12px; letter-spacing: 0; }
.qibao-create-form .primary-btn:disabled { cursor: default; opacity: .48; }
.qibao-form-hint { margin: 0 0 12px; line-height: 1.5; }
#qibao .member-empty { margin: 0; padding: 32px 12px; color: rgba(255,255,255,.65); font-size: 13px; text-align: center; background: rgba(5,18,24,.4); }
@media (max-width: 720px) {
  #qibao .qibao-page-content { padding-top: 8px; }
  .qibao-shelf-toolbar { align-items: flex-start; flex-wrap: wrap; }
  .qibao-shelf-actions { width: 100%; justify-content: flex-start; }
  #qibao .qibao-heading h2 { font-size: 28px; }
  .qibao-source-picker { grid-template-columns: minmax(0,1fr); }
  .qibao-source-browser { border-right: 0; border-bottom: 1px solid rgba(231,189,123,.2); }
  .qibao-source-list { max-height: 190px; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .qibao-source-list .member-empty { grid-column: 1 / -1; }
  .qibao-source-empty { min-height: 70px; }
  .qibao-source-detail { max-height: 340px; }
  .qibao-source-checkout #qibao-source-selected { flex-basis: 100%; }
  .qibao-source-checkout .primary-btn { margin-left: auto; }
  .qibao-search { flex-basis: 100%; }
  .qibao-search input { flex: 1; width: 0; max-width: none; }
  .qibao-list-heading { display: none; }
  .qibao-card { grid-template-columns: 48px minmax(0,1fr) auto; gap: 10px 12px; padding: 12px 10px; }
  .qibao-pet-avatar { width: 48px; height: 48px; }
  .qibao-card-price { grid-column: 2; grid-row: 2; display: flex; align-items: baseline; gap: 6px; padding: 0; }
  .qibao-card-status { grid-column: 3; grid-row: 1; }
  .qibao-card-controls { grid-column: 2 / -1; justify-content: flex-start; }
  .qibao-properties-body, .qibao-properties-body.profile-pet-layout { grid-template-columns: 1fr; }
}
@media (max-width: 440px) {
  .qibao-heading { flex-wrap: wrap; gap: 6px; }
  .qibao-navigation { column-gap: 16px; }
  .qibao-tabs { gap: 16px; }
  .qibao-role { gap: 5px; }
  .qibao-role select { width: 116px; }
  .qibao-source-toolbar { gap: 8px; }
  .qibao-source-types { width: 100%; }
  .qibao-source-types button { flex: 1; }
  .qibao-create-form .qibao-source-search { width: 100%; }
  .qibao-source-search input { flex: 1; width: 0; }
  .qibao-source-card { gap: 6px; padding: 6px; }
  .qibao-source-card .qibao-pet-avatar { flex-basis: 34px; width: 34px; height: 34px; }
  .qibao-source-detail .qibao-properties-body.profile-pet-layout { grid-template-columns: minmax(0,1fr); }
  .qibao-source-checkout input { width: 105px; }
  .qibao-price-unit { display: none; }
  .qibao-search-row .qibao-search { width: 100%; }
  .qibao-search input { flex: 1; width: 0; }
  .qibao-filter-row { gap: 9px; }
  .qibao-filter-options { gap: 2px; }
  .qibao-filter-options button { padding: 6px 8px; }
  .qibao-card-copy h3 { font-size: 14px; }
}
#prizes .prizes-page-content { width: min(980px, 100%); padding-top: 14px; }
#prizes .eyebrow { margin-bottom: 10px; }
.prizes-heading { display: flex; align-items: baseline; gap: 18px; margin-bottom: 20px; }
#prizes .prizes-heading h2 { margin: 0; font-size: 34px; letter-spacing: 0; }
#prize-total { color: rgba(255,255,255,.65); font-size: 12px; }
.prize-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 16px; }
.prize-tools label { display: flex; align-items: center; gap: 8px; color: #e8ded0; font-size: 13px; white-space: nowrap; }
.prize-tools input, .prize-tools select { height: 38px; min-width: 0; border: 1px solid rgba(231,189,123,.4); border-radius: 4px; background: #18282d; color: #fff; padding: 0 10px; font: 13px var(--sans); }
.prize-tools input { flex: 1; width: 240px; }
.prize-tools input::placeholder { color: #abb5b8; }
#prize-character { width: 180px; }
.prize-batch-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; margin: 8px 0 12px; padding: 10px 12px; border: 1px solid rgba(231,189,123,.28); border-radius: 4px; background: rgba(5,18,24,.75); color: #e8ded0; font-size: 13px; }
.prize-batch-toolbar[hidden], .prize-claim-progress[hidden] { display: none; }
.prize-batch-toolbar label { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; cursor: pointer; }
.prize-batch-toolbar input, .prize-claim-controls input { width: 18px; height: 18px; margin: 0; accent-color: var(--gold-bright); cursor: pointer; }
.prize-batch-toolbar button { min-height: 34px; padding: 6px 0; color: var(--gold-bright); font: 13px var(--sans); background: transparent; }
.prize-batch-toolbar button:disabled { opacity: .45; cursor: default; }
.prize-batch-toolbar .primary-btn { margin-left: auto; padding: 6px 16px; border-radius: 4px; background: var(--gold-bright); color: #14262a; letter-spacing: 0; }
.prize-batch-toolbar .primary-btn:hover { transform: none; }
#prize-selection-count { color: #d2d9d5; white-space: nowrap; }
.prize-claim-progress { margin: 0 0 12px; padding: 10px 12px; background: rgba(231,189,123,.1); color: #f4d5a3; font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.prize-type-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.prize-type-filters button { min-height: 36px; padding: 7px 14px; border: 1px solid rgba(231,189,123,.3); border-radius: 4px; background: rgba(5,18,24,.56); color: rgba(255,255,255,.8); font: 13px var(--sans); }
.prize-type-filters button[aria-pressed=true] { border-color: var(--gold-bright); background: rgba(231,189,123,.15); color: var(--gold-bright); }
.prize-type-filters button:hover { color: var(--gold-bright); }
.prizes-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 4px; }
.prize-filters { display: flex; gap: 20px; }
.prize-filters button { display: flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 0 8px; border-bottom: 2px solid transparent; background: transparent; color: rgba(255,255,255,.65); font-size: 13px; }
.prize-filters button[aria-selected=true] { color: var(--gold-bright); border-bottom-color: var(--gold-bright); }
.prize-filters button span { min-width: 18px; font-size: 11px; text-align: center; color: inherit; }
.prize-pagination { display: flex; align-items: center; gap: 8px; }
.prize-pagination[hidden] { display: none; }
.prize-pagination button { width: 30px; height: 30px; padding: 0; border: 1px solid rgba(231,189,123,.35); border-radius: 4px; background: rgba(0,0,0,.18); color: var(--gold-bright); font-size: 22px; line-height: 1; }
.prize-pagination button:disabled { opacity: .35; cursor: default; }
#prize-page { min-width: 42px; text-align: center; font-size: 12px; color: rgba(255,255,255,.75); }
.prize-list { display: grid; border-top: 1px solid rgba(231,189,123,.28); }
.prize-card { display: grid; grid-template-columns: 48px minmax(0,1fr) auto; align-items: center; gap: 14px; min-height: 82px; padding: 14px 12px; border-bottom: 1px solid rgba(255,255,255,.14); background: rgba(5,18,24,.56); }
.prize-card:hover { background: rgba(5,18,24,.7); }
.prize-avatar { position: relative; width: 48px; height: 48px; overflow: hidden; display: grid; place-items: center; border: 1px solid rgba(231,189,123,.4); border-radius: 4px; background: rgba(255,255,255,.06); color: var(--gold-bright); }
.prize-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.prize-copy { min-width: 0; }
#prizes .prize-copy h3 { margin: 0 0 4px; color: #fff; font: 600 15px/1.4 var(--sans); overflow-wrap: anywhere; letter-spacing: 0; }
.prize-copy p { margin: 0; font-size: 12px; line-height: 1.5; color: rgba(255,255,255,.65); }
.prize-claim-controls { display: flex; gap: 8px; align-items: center; }
.prize-abandon-btn { min-height: 34px; padding: 6px 10px; border: 1px solid rgba(226,146,117,.45); border-radius: 4px; background: rgba(99,40,28,.15); color: #efb79f; font: 12px var(--sans); white-space: nowrap; }
.prize-abandon-btn:disabled { opacity: .45; cursor: default; }
.prize-batch-toolbar .prize-abandon-btn { padding: 6px 12px; color: #efb79f; }
.prize-abandoned .prize-claimed-status > span { color: #efb79f; }
.admin-asset-release { margin: 16px 0; padding: 16px; border: 1px solid rgba(231,189,123,.28); border-radius: 6px; background: var(--admin-panel-background,rgba(8,25,33,.78)); color: rgba(255,255,255,.8); font-size: 13px; }
.admin-asset-release summary { cursor: pointer; color: var(--gold-bright); line-height: 1.7; }
.admin-asset-release summary span { margin-left: 10px; color: rgba(255,255,255,.65); }
.admin-asset-release p { line-height: 1.8; margin: 12px 0; }
.admin-asset-release form { display: grid; gap: 14px; margin-top: 14px; }
.admin-asset-release label { display: grid; gap: 7px; min-width: 0; }
.admin-asset-release input:not([type=checkbox]) { box-sizing: border-box; min-width: 0; width: 100%; max-width: 100%; padding: 10px; border: 1px solid rgba(231,189,123,.3); border-radius: 4px; background: var(--admin-field-background,rgba(5,19,27,.82)); color: #fff; font: inherit; color-scheme: dark; }
.admin-asset-release small, .admin-inactive-hint { color: rgba(255,255,255,.5); font-size: 12px; line-height: 1.7; align-self: end; }
.admin-asset-release button { padding: 9px 14px; border: 1px solid rgba(231,189,123,.4); border-radius: 4px; background: rgba(231,189,123,.08); color: var(--gold-bright); cursor: pointer; font: inherit; }
.admin-asset-release button:disabled { opacity: .5; cursor: default; }
.asset-release-actions { display: flex; flex-wrap: wrap; gap: 10px; }
#asset-release-review { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(231,189,123,.25); }
#asset-release-review-content pre { max-height: 340px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; padding: 14px; background: rgba(0,0,0,.18); font: inherit; line-height: 1.8; }
#asset-release-review-content ul { padding-left: 20px; line-height: 1.8; }
.asset-release-badge { display: inline-block; padding: 3px 7px; border: 1px solid rgba(231,189,123,.5); border-radius: 3px; color: var(--gold-bright); font-size: 11px; overflow-wrap: anywhere; }
.admin-account-profile .asset-release-checkbox { width: 16px; height: 16px; margin: 0; accent-color: #d3ad73; cursor: pointer; }
.event-prize-stock > span { display: inline-block; white-space: nowrap; }
.event-prize-odds small { white-space: normal; }
.prize-claim-controls .primary-btn { width: 80px; min-height: 34px; padding: 6px 10px; border-radius: 4px; font-size: 12px; letter-spacing: 0; }
.prize-claim-controls .primary-btn:hover { transform: none; }
.prize-claim-controls .primary-btn:disabled { opacity: .5; cursor: default; }
.prize-claimed-status { min-width: 110px; max-width: 190px; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.prize-claimed-status > span { color: #a3cebf; font-size: 12px; }
.prize-claimed-status small { max-width: 100%; font-size: 11px; color: rgba(255,255,255,.52); overflow-wrap: anywhere; }
.prize-type-filters button:focus-visible, .prize-filters button:focus-visible, .prize-pagination button:focus-visible, .prize-claim-controls :focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; }
#prizes .member-empty { margin: 0; padding: 32px 12px; color: rgba(255,255,255,.65); font-size: 13px; text-align: center; background: rgba(5,18,24,.4); }
@media (max-width: 600px) {
  #prizes .prizes-page-content { padding-top: 8px; }
  #prizes .prizes-heading h2 { font-size: 28px; }
  .prizes-heading { margin-bottom: 12px; gap: 12px; }
  .prize-filters { gap: 14px; }
  .prize-card { grid-template-columns: 44px minmax(0,1fr); gap: 10px 12px; padding: 12px 10px; }
  .prize-avatar { width: 44px; height: 44px; }
  .prize-claim-controls, .prize-claimed-status { grid-column: 2; }
  .prize-tools input { flex-basis: 100%; width: 100%; }
  .prize-tools label:first-of-type { flex: 1; min-width: 0; }
  #prize-character { flex: 1; width: 0; }
  .prize-batch-toolbar { gap: 10px 12px; }
  .prize-claim-controls .primary-btn { width: 72px; flex-shrink: 0; }
  .prize-claimed-status { max-width: none; min-width: 0; flex-direction: row; align-items: baseline; gap: 8px; }
  .prize-claimed-status small { min-width: 0; }
}