.coin-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--ios-line);
  background: var(--ios-panel);
  color: var(--ios-text);
}
.coin-card--home {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 168px;
  gap: 2px 12px;
  align-items: center;
  min-height: 220px;
  padding: 20px 22px !important;
}
.coin-eyebrow {display: block; color: var(--ios-secondary); font-size: 11px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase}
.coin-card h2 {margin: 7px 0 5px; font-size: 24px; line-height: 1.12; letter-spacing: -.6px; font-weight: 700}
.coin-card-copy p {margin: 0; color: var(--ios-secondary); font-size: 14px; line-height: 1.35}
.coin-view {display: grid; place-items: center; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 50%; -webkit-tap-highlight-color: transparent}
.coin-view:focus-visible,.coin-rules-link:focus-visible {outline: 3px solid var(--ios-blue); outline-offset: 3px}
.coin-card--home .coin-view {grid-column: 2; grid-row: 1 / span 2; width: 160px; height: 160px; justify-self: end}
.coin-stage {position: relative; display: grid; place-items: center; width: 100%; height: 100%; isolation: isolate}
.coin-fallback {display: block; width: 100%; height: 100%; object-fit: contain; opacity: 1; transition: opacity 180ms ease}
.coin-stage.has-3d .coin-fallback {opacity: 0}
.coin-stage canvas {position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity 180ms ease}
.coin-stage.has-3d canvas {opacity: 1}
.coin-card-bottom {grid-column: 1 / -1; display: flex; gap: 16px; justify-content: space-between; align-items: end; border-top: 1px solid var(--ios-line); padding-top: 15px}
.coin-balance {display: flex; flex-direction: column; gap: 0; min-width: 0}
.coin-balance strong {font-size: 30px; font-variant-numeric: tabular-nums; line-height: 1; letter-spacing: -.04em}
.coin-balance span {margin-top: 4px; font-size: 12px; color: var(--ios-secondary)}
.coin-claim {width: auto; min-width: 150px; min-height: 42px; flex: 0 0 auto; white-space: nowrap}
.coin-claim:disabled {opacity: 1; background: var(--ios-fill); color: var(--ios-secondary)}
.coin-status {grid-column: 1 / -1; margin: 8px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--lg-fill, var(--ios-fill)); color: var(--ios-text); font-size: 13px; line-height: 1.4}
.coin-status[hidden] {display: none}
.coin-card--profile {border: 0; background: none; overflow: visible}
.coin-profile-row {display: flex; align-items: center; gap: 14px; width: 100%; min-height: 58px; padding: 10px 20px; border: 0; border-radius: 18px; background: var(--ios-panel); color: var(--ios-text); font: inherit; text-align: left; cursor: pointer}
.coin-profile-row:active {opacity: .72}
.coin-profile-row:focus-visible {outline: 3px solid var(--ios-blue); outline-offset: 3px}
.coin-profile-icon {width: 30px; height: 30px; object-fit: contain; flex: 0 0 auto}
.coin-profile-title {flex: 1; min-width: 0; font-size: 16px; font-weight: 400}
.coin-profile-balance {white-space: nowrap; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums}
.coin-profile-row .row-chevron {width: 18px; height: 18px; color: var(--ios-secondary); flex: 0 0 auto}
.coin-card--profile .coin-status {margin: 8px 0 0}
@media (max-width: 390px) {
  .coin-card--home {grid-template-columns: minmax(0, 1fr) 124px; padding: 18px !important}
  .coin-card--home .coin-view {width: 124px; height: 124px}
  .coin-card h2 {font-size: 21px}
  .coin-card-copy p {font-size: 13px}
  .coin-claim {min-width: 138px; font-size: 13px}
}
@media (prefers-reduced-motion: reduce) {
  .coin-card * {animation-duration: .01ms !important; transition-duration: .01ms !important}
}