/* Traditional Chinese reading hierarchy, grounded in the supplied Clove views. */
:root {
  --font-ui: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", "Heiti TC", system-ui, sans-serif;
}
html { -webkit-text-size-adjust: 100%; }
body.modao-ui { font-family: var(--font-ui); font-size: 15px; line-height: 1.6; }
.modao-ui button, .modao-ui input, .modao-ui select, .modao-ui textarea { font-family: var(--font-ui); }
.modao-ui .price, .modao-ui .pool-card-price,
.modao-ui .detail .prize-grid .prize-name { font-family: var(--font-ui); }
.modao-ui .price, .modao-ui .pool-card-price, .modao-ui .pool-card-stock,
.modao-ui .balance-chip, .modao-ui .remain { font-variant-numeric: tabular-nums; }

/* Navigation, discovery and pool cards. */
.modao-ui .header-language { font-size: 13px; font-weight: 600; }
.modao-ui .balance-chip { font-size: 16px; font-weight: 700; }
.modao-ui .login-entry { min-height: 44px; font-size: 15px; font-weight: 700; }
.modao-ui .recommend-heading h2 { font-size: 28px; font-weight: 800; line-height: 1.3; }
.modao-ui .home-category-tab { font-size: 16px; font-weight: 700; }
.modao-ui .home-filter-pill, .modao-ui .home-filter-trigger { font-size: 15px; font-weight: 600; }
.modao-ui .home-quick-chip, .modao-ui .home-availability-segments button,
.modao-ui .home-filter-control select, .modao-ui #homePriceSort { font-size: 14px; line-height: 1.45; }
.modao-ui .home-results-meta, .modao-ui .home-filter-meta { font-size: 14px; }
.modao-ui .home-results-copy > span { font-size: 13px; }
.modao-ui .pool-card-title { font-weight: 700; line-height: 1.5; }
.modao-ui .recommend-grid .pool-card-title { font-size: 18px !important; line-height: 1.5; }
.modao-ui .pool-card-desc { color: #76766f; font-size: 14px; line-height: 1.6; }
.modao-ui .pool-card-tags span { font-size: 12px; line-height: 1.45; font-weight: 500; }
.modao-ui .pool-card-price { font-size: 28px; font-weight: 750; line-height: 1.25; }
.modao-ui .pool-card-price small { font-size: 14px; font-weight: 400; }
.modao-ui .pool-card-stock { font-size: 14px; line-height: 1.5; }
.modao-ui .pool-card-stock strong, .modao-ui .pool-card-progress-status { font-size: 14px; font-weight: 700; }
.modao-ui .recommend-grid .pool-card-value-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.modao-ui .pool-card-actions { container-type: inline-size; }
@container (max-width: 279px) {
  .modao-ui .pool-card-actions .button-row.bulk-draw { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .modao-ui .pool-card-actions .button-row.bulk-draw .hundred-draw-btn { grid-column: 1 / -1; }
}
.modao-ui .button-row > button { min-height: 44px; padding: 9px 8px; font-size: 15px; font-weight: 700; line-height: 1.3; white-space: nowrap; }
.modao-ui .recommend-grid .button-row > button { min-height: 44px; padding-inline: 5px; font-size: 15px; font-weight: 700; }
.modao-ui .home-load-more, .modao-ui .home-filter-reset { min-height: 44px; font-size: 15px; font-weight: 600; }
.modao-ui .home-filter-sheet-head h2 { font-size: 26px; font-weight: 700; }
.modao-ui .home-filter-group h3 { font-size: 17px; font-weight: 700; }
.modao-ui .home-filter-option { font-size: 15px; }
.modao-ui .player-bottom-nav > button { font-size: 12px; font-weight: 600; line-height: 1.3; }
.modao-ui .player-footer { font-size: 13px; line-height: 1.6; }

/* Detail hierarchy: prize tiers should read as clear section headings. */
.modao-ui .detail h1 { font-size: 28px; font-weight: 750; line-height: 1.45; }
.modao-ui .detail .pool-desc, .modao-ui .detail .detail-desc { font-size: 15px; line-height: 1.65; }
.modao-ui .detail .back-row .back { font-size: 14px; font-weight: 600; }
.modao-ui .detail .back-row strong { font-size: 14px; line-height: 1.5; }
.modao-ui .detail .award-title,
.modao-ui .detail .award-title.first-tier,
.modao-ui .detail .award-title.second-tier {
  font-size: 52px; font-weight: 800; line-height: 1.2; flex-wrap: wrap;
  gap: 10px; margin-bottom: 26px;
}
.modao-ui .detail .award-title-label { padding: 6px 14px; }
.modao-ui .detail .award-remain { font-size: 14px; font-weight: 600; line-height: 1.5; }
.modao-ui .detail .prize-grid .prize-name { font-size: 16px; font-weight: 600; line-height: 1.6; letter-spacing: 0; }
.modao-ui .detail .prize-grid .prize .prize-reference-price { font-size: 13px; font-weight: 500; line-height: 1.5; white-space: normal; overflow-wrap: anywhere; }
.modao-ui [data-preview-src][role="button"]:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.modao-ui .detail .sealed, .modao-ui .detail .piece { font-size: 12px; font-weight: 700; }
.modao-ui .pool-rules-panel summary { font-size: 15px; font-weight: 700; line-height: 1.5; }
.modao-ui .pool-rules-panel, .modao-ui .pool-rules-panel li { font-size: 14px; line-height: 1.7; }
.modao-ui .detail .sticky-draw .price { font-family: var(--font-ui); font-size: 28px; font-weight: 750; }
.modao-ui .detail .sticky-draw .price::after { font-size: 14px; }
.modao-ui .detail .sticky-draw .remain { font-size: 13px; font-weight: 600; line-height: 1.5; }
.modao-ui .detail .sticky-draw .button-row > button { min-height: 48px; padding: 10px; font-size: 16px; font-weight: 700; line-height: 1.25; white-space: nowrap; }

/* Account overview, inventory and draw results. */
.modao-ui .profile-page-title { font-size: 28px; font-weight: 750; line-height: 1.4; }
.modao-ui .profile-user-copy > strong { font-size: 21px; font-weight: 700; line-height: 1.5; }
.modao-ui .profile-user-copy > span, .modao-ui .profile-info-link { font-size: 14px; }
.modao-ui .profile-wallet-copy > span { font-size: 15px; }
.modao-ui .profile-wallet-copy > strong { font-size: 32px; font-weight: 750; }
.modao-ui .profile-menu-group h2 { font-size: 17px; font-weight: 700; }
.modao-ui .profile-menu-row, .modao-ui .profile-shortcut, .modao-ui .profile-exit-button { font-size: 16px; font-weight: 600; line-height: 1.5; }
.modao-ui .record-head h2, .modao-ui .result-head h2 { font-size: 28px; font-weight: 750; line-height: 1.35; }
.modao-ui .record-tabs button { font-size: 15px; font-weight: 600; line-height: 1.45; }
.modao-ui .record-name { font-size: 16px; font-weight: 600; line-height: 1.5; }
.modao-ui .record-acquired, .modao-ui .record-meta { font-size: 13px; line-height: 1.5; }
.modao-ui .record-price, .modao-ui .record-value { font-size: 18px; font-weight: 700; }
.modao-ui .record-quantity-value, .modao-ui .record-status, .modao-ui .record-count { font-size: 14px; font-weight: 600; }
.modao-ui .record-tabs:has(.record-tab.active[data-record-status]) ~ .record-body .record-status { font-size: 14px; font-weight: 600; }
.modao-ui .record-empty, .modao-ui .record-guest-state p { font-size: 15px; line-height: 1.7; }
.modao-ui .record-settlement-actions button,
.modao-ui .result-action-stack button { min-height: 44px; font-size: 15px; font-weight: 700; line-height: 1.35; }
.modao-ui .result-action-stack .keep-all-btn { min-height: 36px; font-size: 14px; font-weight: 500; }
.modao-ui .result-tier-heading { font-size: 28px; font-weight: 750; line-height: 1.3; }
.modao-ui .result-tier-heading small { font-size: 14px; font-weight: 500; }
.modao-ui .result-summary .result-stat > span { font-size: 14px; }
.modao-ui .result-summary .result-stat strong { font-size: 24px; font-weight: 750; }
.modao-ui .result-summary [data-result-recyclable-total] { font: inherit; color: inherit; letter-spacing: inherit; }
.modao-ui .result-grid .result-card-name { font-size: 14px; font-weight: 600; line-height: 1.5; }
.modao-ui .result-grid .result-card-tier, .modao-ui .result-grid .result-card-status { font-size: 12px; font-weight: 600; }
.modao-ui .result-grid .result-card-points { font-size: 15px; font-weight: 700; }
.modao-ui .result-selection-summary { font-size: 14px; line-height: 1.5; }
.modao-ui .result-selection-summary > strong { font-size: 14px; font-weight: 600; }
.modao-ui .result-selection-summary > span { font-size: 13px; }
.modao-ui .selection-tools button { min-height: 36px; font-size: 13px; font-weight: 600; }
.modao-ui .reveal-control-hint, .modao-ui .reveal-skip-btn { font-size: 14px; }
.modao-ui .toast { max-width: min(560px, calc(100vw - 32px)); font-size: 15px; font-weight: 600; line-height: 1.6; overflow-wrap: anywhere; }
.modao-ui .image-preview-name { font-size: 16px; font-weight: 600; line-height: 1.5; }
.modao-ui .record-load-more[aria-busy="true"] { color: var(--muted); box-shadow: none; cursor: progress; }
.modao-ui .record-load-more-complete { display: inline-block; padding: 8px 12px; border-radius: 4px; color: #777; font-size: 14px; line-height: 1.5; }
.modao-ui .record-load-more-complete:focus { outline: 2px solid var(--red); outline-offset: 3px; box-shadow: none; }

@media (max-width: 999px) {
  .modao-ui .pool-card-list .pool-card-value-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .modao-ui .pool-card-stock { align-items: baseline; font-size: 12px; line-height: 18px; }
  .modao-ui .pool-card-stock > span { white-space: nowrap; }
  .modao-ui .pool-card-stock strong, .modao-ui .pool-card-progress-status { font-size: 12px; font-weight: 600; white-space: nowrap; }
}

@media (max-width: 759px) {
  .modao-ui .recommend-heading h2 { font-size: 24px; }
  .modao-ui .recommend-grid .pool-card-title { font-size: 16px !important; }
  .modao-ui .pool-card-tags span { font-size: 11px; }
  .modao-ui .pool-card-price { font-size: 26px; }
  .modao-ui .pool-card-price small { font-size: 13px; }
  .modao-ui .home-category-tab, .modao-ui .home-filter-pill { font-size: 15px; }
  .modao-ui .player-bottom-nav > button { font-size: 11px; }
  .modao-ui .detail h1 { font-size: 24px; }
  .modao-ui .detail .award-title,
  .modao-ui .detail .award-title.first-tier,
  .modao-ui .detail .award-title.second-tier { gap: 8px; }
  .modao-ui .detail .award-title-label { padding: 6px 10px; }
  .modao-ui .detail .award-remain { font-size: 13px; }
  .modao-ui .detail .prize-grid .prize-name { font-size: 14px; }
  .modao-ui .detail .prize-grid .prize .prize-reference-price { font-size: 12px; }
  .modao-ui .detail .sticky-draw .price { font-size: 25px; }
  .modao-ui .detail .sticky-draw .price::after { font-size: 12px; }
  .modao-ui .detail .sticky-draw .remain { font-size: 12px; }
  .modao-ui .detail .sticky-draw .button-row > button { padding: 10px 5px; font-size: 15px; }
  .modao-ui .profile-page-title, .modao-ui .record-head h2,
  .modao-ui .result-head h2 { font-size: 24px; }
  .modao-ui .profile-wallet-copy > strong { font-size: 29px; }
  .modao-ui .result-tier-heading { font-size: 24px; }
  .modao-ui .result-summary .result-stat strong { font-size: 21px; }
  .modao-ui .record-actions { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 599px) {
  .modao-ui .auth-area { gap: 8px; }
  .modao-ui .home-filter-pill,
  .modao-ui.is-home-scrolled:not(.is-scroll-up) .home-filter-pill { flex: 1 1 auto; padding-inline: 8px; }
  .modao-ui .detail .award-title,
  .modao-ui .detail .award-title.first-tier,
  .modao-ui .detail .award-title.second-tier { font-size: 36px; }
  .modao-ui .detail .prize-grid .prize:only-child { flex: 0 1 160px; width: 160px; max-width: 100%; }
}

@media (max-width: 380px) {
  .modao-ui .result-repeat-actions.bulk-draw { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .modao-ui .result-repeat-actions.bulk-draw > button { padding-inline: 5px; font-size: 15px; white-space: nowrap; }
  .modao-ui .result-repeat-actions.bulk-draw .hundred-draw-btn { grid-column: auto; }
  .modao-ui .detail .sticky-draw .pool-bottom { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .modao-ui .detail .sticky-draw .price { grid-column: 1; grid-row: 1; }
  .modao-ui .detail .sticky-draw .remain { grid-column: 1; grid-row: 2; }
  .modao-ui .detail .sticky-draw .button-row { grid-column: 1; grid-row: 3; gap: 8px; }
  .modao-ui .detail .sticky-draw .button-row.bulk-draw { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .modao-ui .detail .sticky-draw .button-row.bulk-draw .hundred-draw-btn { grid-column: auto; }
}

@media (max-width: 359px) {
  .modao-ui .player-header, .modao-ui .detail .player-header { padding-inline: 12px; }
  .modao-ui .brand-logo, .modao-ui .brand-mark { width: 88px; }
  .modao-ui .auth-area { gap: 6px; }
  .modao-ui .balance-chip { font-size: 14px; }
  .modao-ui .balance-chip .coin { width: 20px; height: 20px; }
}

@media (min-width: 600px) and (max-height: 620px) {
  .modao-ui .record-layer.page-view { top: 80px; height: calc(var(--visual-vh) - 80px); }
  .modao-ui .record-layer.page-view .record-box {
    grid-template-columns: minmax(0, 1fr) 300px;
    grid-template-rows: 52px 38px minmax(0, 1fr) 0;
    column-gap: 16px; padding-bottom: calc(70px + env(safe-area-inset-bottom)); overflow: hidden;
  }
  .modao-ui .record-layer.page-view .record-head { grid-column: 1 / -1; grid-row: 1; min-height: 52px; padding: 4px 0; }
  .modao-ui .record-layer.page-view .record-tabs { grid-column: 1; grid-row: 2; width: 100%; min-width: 0; margin: 0; }
  .modao-ui .record-layer.page-view .record-body { grid-column: 1; grid-row: 3; min-width: 0; min-height: 0; overflow: auto; padding: 8px 0 12px; }
  .modao-ui .record-layer.page-view .record-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
  .modao-ui .record-layer.page-view .record-actions {
    grid-column: 2; grid-row: 2 / 4; min-width: 0; min-height: 0; overflow-y: auto;
    grid-template-columns: minmax(0, 1fr); align-items: start; align-content: start; gap: 8px; padding: 8px 0;
    overscroll-behavior: contain;
  }
  .modao-ui .record-layer.page-view .record-page-nav { grid-column: 1 / -1; grid-row: 4; min-height: 0; height: 0; padding: 0; }
  .modao-ui .record-layer.page-view .record-body:has(.record-guest-state) { grid-column: 1 / -1; grid-row: 2 / 4; }
  .modao-ui .detail .sticky-draw { padding-block: 8px; }
  .modao-ui .detail .sticky-draw .button-row.bulk-draw { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .modao-ui .detail .sticky-draw .button-row.bulk-draw .hundred-draw-btn { grid-column: auto; }
  .modao-ui .detail:has(.sticky-draw .bulk-draw) .detail-inner { margin-bottom: 84px; }
  .modao-ui .result-layer { top: 80px; height: calc(var(--visual-vh) - 80px); }
  .modao-ui .result-box, .modao-ui .result-box:has(.has-hit) {
    display: grid; grid-template-columns: minmax(0, 1fr) 300px;
    grid-template-rows: 52px minmax(0, 1fr); gap: 0 16px; overflow: hidden;
  }
  .modao-ui .result-box .result-head { grid-column: 1 / -1; grid-row: 1; min-height: 52px; padding-block: 4px; }
  .modao-ui .result-box .result-scroll { grid-column: 1; grid-row: 2; min-width: 0; min-height: 0; overflow: auto; padding-bottom: 12px; overscroll-behavior: contain; }
  .modao-ui #resultActions { grid-column: 2; grid-row: 2; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  .modao-ui .result-recycle-actions { grid-template-columns: minmax(0, 1fr); align-items: start; padding: 8px 0; gap: 8px; }
  .modao-ui .result-selection-summary, .modao-ui .result-action-stack { grid-column: 1; }
  .modao-ui .result-repeat-actions.bulk-draw { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .modao-ui .result-repeat-actions.bulk-draw > button { padding-inline: 5px; font-size: 15px; white-space: nowrap; }
  .modao-ui .result-repeat-actions.bulk-draw .hundred-draw-btn { grid-column: auto; }
  .modao-ui .result-page-nav { display: block; height: 0; grid-column: 1 / -1; }
}