/* Home hub: player customization, signature REVERSE opening, play and discovery. */
.hub-opening { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; min-height: 304px; padding: 16px 18px 14px; border: 1px solid #ffffff0d; border-radius: 16px; color: #f2f4f7; background: #131416; }
.hub-opening::before { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(0deg,#131416 0%,#13141650 55%,#131416 100%),url('assets/card-back.png') 50% 45% / cover; opacity: .14; }
.hub-opening-copy { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; width: 100%; }
.hub-opening h2 { margin: 0; font: 650 17px/1.2 var(--font-body); letter-spacing: -.02em; color: #f2f4f7; }
.hub-opening-copy p { margin: 0; color: #b4b6bf; font-size: 11px; line-height: 1.4; }
.hub-opening-art { position: relative; display: grid; place-items: center; width: 100%; height: 194px; perspective: 650px; }
.hub-opening-art img { display: block; width: 126px; height: 168px; object-fit: cover; border-radius: 8px; transform: rotate(-7deg) rotateY(-8deg); box-shadow: 12px 18px 24px #00000080; }
#tab-profile #btn-open-card { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 48px; padding: 0 16px; border: 0; border-radius: 12px; background: #f5c070; color: #23180d; font: 750 16px/1.2 var(--font-body); cursor: pointer; }
.hub-opening-arrow { font-size: 22px; font-weight: 400; }
#tab-profile #btn-open-card:disabled { cursor: wait; background: #bfa176; color: #302418; }
.hub-opening #hub-opening-status { grid-column: 1/-1; margin: 8px 0 0; text-align: center; font-size: 11px; line-height: 1.4; color: #d3bdc2; }
.hub-opening[data-state="error"] #hub-opening-status { color: #ffb3b7; }
.hub-opening[data-state="busy"] .hub-opening-arrow { width: 18px; height: 18px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; font-size: 0; }
@media (prefers-reduced-motion:no-preference) {
  #tab-profile.active .hub-opening-art img { animation: reverse-card-arrive 650ms cubic-bezier(.16,1,.3,1) both; }
  .hub-opening[data-state="busy"] .hub-opening-arrow { animation: reverse-opening-busy 800ms linear infinite; }
  #tab-profile #btn-open-card { transition: transform 180ms cubic-bezier(.22,1,.36,1), filter 180ms; }
  #tab-profile #btn-open-card:not(:disabled):active { transform: scale(.985); }
}
@keyframes reverse-card-arrive { from { transform: translateY(10px) rotate(-2deg); } to { transform: translateY(0) rotate(-7deg) rotateY(-8deg); } }
@keyframes reverse-opening-busy { to { transform: rotate(360deg); } }
@media (max-width:360px) { .hub-opening { padding-inline: 14px; } .hub-opening h2 { font-size: 16px; } #tab-profile .hub-cover-meta { max-width: 205px; } }
@media (min-width:700px) { #tab-profile .hub-modes { grid-template-columns: repeat(4,minmax(0,1fr)); } }
#tab-profile { gap: 12px !important; padding-bottom: calc(108px + env(safe-area-inset-bottom)); }
#tab-profile .hub-id { border: 0; }
#tab-profile .hub-id .hub-id-bg { height: 120px; }
#tab-profile .hub-id::after { top: 84px; height: 36px; }
#tab-profile .hub-id > .hub-id-main { padding: 88px 14px 12px; }
#tab-profile .hub-id .hub-av { width: 60px; height: 60px; flex-basis: 60px; }
#tab-profile .hub-id .hub-name { margin-top: 32px !important; font-size: 21px !important; font-family: inherit; letter-spacing: -.025em; }
#tab-profile .hub-id .hub-verse-switch { min-height: 44px; margin-top: 2px; padding: 8px 0; }
#tab-profile .hub-id .hub-verse { font-size: 12px !important; }
#tab-profile .hub-id .hub-id-meta { padding-top: 10px; gap: 8px; }
#tab-profile .hub-id .hub-pts strong { font-family: inherit; font-size: 18px; font-weight: 650; }
#tab-profile .hub-wallet { gap: 0; padding: 4px 0; }
#tab-profile .hub-wallet-cell { min-width: 0; min-height: 48px; padding: 0 8px; gap: 5px; border: 0; border-radius: 0; background: none; }
#tab-profile .hub-wallet-cell:first-child { padding-left: 0; }
#tab-profile .hub-wallet-cell + .hub-wallet-cell { border-left: 1px solid var(--border); }
#tab-profile .hub-wallet-cell b { max-width: 100%; overflow-wrap: anywhere; font-family: inherit; font-size: 18px; line-height: 1.2; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--text); }
#tab-profile .hub-wallet-cell.c-coin b { color: var(--accent-hi); }
#tab-profile .hub-wallet-cell span { font-size: 11px; font-weight: 400; color: var(--text-sub); }
.hub-play-grid { display: grid; grid-template-columns: minmax(0,1fr); }
#tab-profile .hub-play-grid > button { position: relative; isolation: isolate; min-width: 0; min-height: 110px; padding: 0; border: 0; border-radius: 16px; overflow: hidden; background: #16191d; color: #f2f4f7; text-align: left; cursor: pointer; }
#tab-profile .hub-play-grid .hub-mode-art, #tab-profile .hub-play-grid .hub-f-art { inset: 0; opacity: 1; }
#tab-profile .hub-play-grid .hub-f-art { inset: 0; border-radius: 0; }
#tab-profile .hub-play-grid .hub-f-art img { object-position: 60% 44%; border-radius: 0; }
#tab-profile .hub-play-grid .hub-f-art::after { background: linear-gradient(90deg,#16191d 0%,#16191df5 24%,#16191d80 62%,#16191d20 100%); }
#tab-profile .hub-cover-body { min-height: 110px; padding: 18px; display: grid; grid-template-columns: minmax(0,1fr) auto; align-content: center; align-items: center; gap: 8px 12px; }
#tab-profile .hub-cover-title small { margin-left: 8px; font: 500 12px/1 var(--font-body); color: #f5c070; letter-spacing: 0; }
#tab-profile .hub-play-grid .hub-mode-name, #tab-profile .hub-cover-title { font-family: inherit; font-size: 26px; line-height: 1.04; font-weight: 750; letter-spacing: -.03em; color: #f2f4f7; }
#tab-profile .hub-play-grid .hub-mode-sub, #tab-profile .hub-cover-meta { font-size: 11px; line-height: 1.4; font-weight: 400; color: #b9c1ca; margin: 0; }
.hub-play-action { position: static; grid-column: 2; grid-row: 1/3; z-index: 1; display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border-radius: 10px; background: #16191de6; color: #f5c070; font-size: 12px; font-weight: 600; }
.hub-play-action > span { font-size: 20px; font-weight: 400; }
#tab-profile .hub-section-title { margin: 10px 0 0; font-family: inherit; font-size: 19px; line-height: 1.2; letter-spacing: -.025em; font-weight: 650; color: var(--text); }
#tab-profile .hub-modes, .hub-discover { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
#tab-profile .hub-modes .hub-mode, #tab-profile .hub-discover .hub-mode { min-height: 100px; min-width: 0; padding: 14px 12px; gap: 5px; border: 0; border-radius: 14px; background: #171a1e; }
#tab-profile .hub-mode-name { font-family: inherit; font-size: 17px; line-height: 1.2; font-weight: 650; letter-spacing: -.015em; color: #f2f4f7; }
#tab-profile .hub-mode-sub { color: #b9c1ca; font-size: 11px; line-height: 1.4; }
#tab-profile .hub-modes .hub-mode-art::after, #tab-profile .hub-discover .hub-mode-art::after { background: linear-gradient(0deg,#171a1e 4%,rgba(23,26,30,.93) 30%,rgba(23,26,30,.1) 100%); }
.hub-market-feature { position: relative; isolation: isolate; grid-column: 1/-1; overflow: hidden; min-height: 140px; padding: 18px; border: 0; border-radius: 16px; background: #121518; color: #f2f4f7; cursor: pointer; text-align: left; }
.hub-market-feature > img { position: absolute; z-index: -2; inset: 0 0 0 auto; width: 70%; height: 100%; object-fit: cover; object-position: 55% center; }
.hub-market-feature::after { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg,#121518 10%,rgba(18,21,24,.93) 34%,rgba(18,21,24,.2) 80%); pointer-events: none; }
.hub-market-feature strong, .hub-market-feature small, .hub-market-feature b { display: block; }
.hub-market-feature strong { font-size: 24px; line-height: 1.1; letter-spacing: -.025em; font-weight: 700; }
.hub-market-feature small { margin-top: 10px; color: #bec5cd; font-size: 12px; line-height: 1.5; }
.hub-market-feature b { margin-top: 16px; color: #f5c070; font-size: 13px; font-weight: 600; }
.hub-market-feature b span { margin-left: 10px; }
.hub-links { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; padding-block: 12px; margin-top: 8px; border-block: 1px solid var(--border); }
#tab-profile .hub-links .hub-mode { display: grid; grid-template-columns: 40px minmax(0,1fr); align-content: center; gap: 4px 10px; min-width: 0; min-height: 60px; padding: 0; border: 0; border-radius: 0; background: none; }
#tab-profile .hub-links .hub-mode-art { position: relative; inset: auto; grid-row: 1/3; width: 40px; height: 48px; border-radius: 10px; opacity: 1; }
#tab-profile .hub-links .hub-mode-art::after { display: none; }
#tab-profile .hub-links .hub-mode-name, #tab-profile .hub-links .hub-mode-sub { position: static; grid-column: 2; text-shadow: none; }
#tab-profile .hub-links .hub-mode-name { align-self: end; font-size: 15px; color: var(--text); }
#tab-profile .hub-links .hub-mode-sub { align-self: start; font-size: 11px; color: var(--text-sub); }
.hub-section-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#tab-profile .hub-section-row .hub-section-title { margin: 0; }
.hub-section-row > button { flex-shrink: 0; min-height: 44px; padding: 0; border: 0; background: none; color: var(--accent-hi); font: inherit; font-size: 12px; cursor: pointer; }
#tab-profile .recent-item { border: 0; border-radius: 12px; padding: 12px; }
#tab-profile button:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 3px; }
@media (hover:hover) { #tab-profile .hub-mode:hover, .hub-market-feature:hover, #tab-profile .hub-cover:hover { filter: brightness(1.07); } #tab-profile .hub-links .hub-mode:hover { filter: none; } }
@media (prefers-reduced-motion:no-preference) { #tab-profile .hub-mode, .hub-market-feature, #tab-profile .hub-cover { transition: transform 180ms cubic-bezier(.22,1,.36,1), filter 180ms; } .hub-market-feature:active { transform: scale(.985); } }
@media (prefers-reduced-motion:reduce) { #tab-profile button { transition: none !important; } }
@media (max-width:360px) { #tab-profile .hub-wallet-cell { padding-inline: 7px; } #tab-profile .hub-wallet-cell b { font-size: 16px; } .hub-play-grid, #tab-profile .hub-modes, .hub-discover { gap: 10px; } #tab-profile .hub-play-grid .hub-mode-name, #tab-profile .hub-cover-title { font-size: 23px; } #tab-profile .hub-open-card, #tab-profile .hub-cover-body { padding: 16px 12px; } #tab-profile .hub-modes .hub-mode, #tab-profile .hub-discover .hub-mode { padding: 14px 12px; } #tab-profile .hub-mode-name { font-size: 15px; } .hub-market-feature { padding: 20px 16px; } .hub-market-feature strong { font-size: 22px; } .hub-links { gap: 10px; } #tab-profile .hub-links .hub-mode { gap: 4px 7px; } }