/*
 * Hino game-client readability layer.
 * Loaded last and scoped to compact WebView2 mode only.
 */

html.game-client-layout,
html.game-client-layout body {
  font-size: 13px !important;
  line-height: 1.48 !important;
  text-rendering: auto !important;
  -webkit-font-smoothing: auto !important;
}

html.game-client-layout body,
html.game-client-layout button,
html.game-client-layout input,
html.game-client-layout select,
html.game-client-layout textarea {
  font-family: 'Segoe UI', 'Microsoft YaHei UI', 'Microsoft YaHei', Arial, sans-serif !important;
}

html.game-client-layout .shell h1,
html.game-client-layout .shell h2,
html.game-client-layout .shell h3,
html.game-client-layout .shell h4,
html.game-client-layout .shell p,
html.game-client-layout .shell small,
html.game-client-layout .shell label,
html.game-client-layout .shell button,
html.game-client-layout .shell input,
html.game-client-layout .shell select,
html.game-client-layout .shell textarea,
html.game-client-layout .shell th,
html.game-client-layout .shell td,
html.game-client-layout .dialog-overlay,
html.game-client-layout .hgc-modal,
html.game-client-layout .hgc-exchange-overlay,
html.game-client-layout .hgc-character-switch-overlay {
  text-rendering: auto !important;
  -webkit-font-smoothing: auto !important;
}

html.game-client-layout .shell h1,
html.game-client-layout .shell h2,
html.game-client-layout .shell h3,
html.game-client-layout .shell h4,
html.game-client-layout .shell p,
html.game-client-layout .shell small,
html.game-client-layout .shell label,
html.game-client-layout .shell button,
html.game-client-layout .shell input,
html.game-client-layout .shell select,
html.game-client-layout .shell textarea,
html.game-client-layout .shell th,
html.game-client-layout .shell td,
html.game-client-layout .top-popover,
html.game-client-layout .dialog-overlay,
html.game-client-layout .hgc-dialog-shell,
html.game-client-layout .hgc-result-shell,
html.game-client-layout .hgc-exchange-dialog,
html.game-client-layout .hgc-character-switch-dialog {
  text-shadow: none !important;
}

/* Readable minimums for player-facing copy in the compact client. */
html.game-client-layout .shell p,
html.game-client-layout .dialog-overlay p,
html.game-client-layout .hgc-modal p,
html.game-client-layout .hgc-exchange-overlay p,
html.game-client-layout .hgc-character-switch-overlay p { font-size: 11px !important; }
html.game-client-layout .shell small,
html.game-client-layout .dialog-overlay small,
html.game-client-layout .hgc-modal small,
html.game-client-layout .hgc-exchange-overlay small,
html.game-client-layout .hgc-character-switch-overlay small { font-size: 10px !important; line-height: 1.3 !important; }
html.game-client-layout .shell label,
html.game-client-layout .dialog-overlay label,
html.game-client-layout .hgc-modal label,
html.game-client-layout .hgc-exchange-overlay label,
html.game-client-layout .hgc-character-switch-overlay label { font-size: 11px !important; }
html.game-client-layout .shell input,
html.game-client-layout .shell select,
html.game-client-layout .shell textarea,
html.game-client-layout .dialog-overlay input,
html.game-client-layout .dialog-overlay select,
html.game-client-layout .dialog-overlay textarea,
html.game-client-layout .hgc-exchange-overlay input,
html.game-client-layout .hgc-exchange-overlay select,
html.game-client-layout .hgc-exchange-overlay textarea { font-size: 12px !important; }
html.game-client-layout .shell button,
html.game-client-layout .dialog-overlay button,
html.game-client-layout .hgc-modal button,
html.game-client-layout .hgc-exchange-overlay button,
html.game-client-layout .hgc-character-switch-overlay button { font-size: 11px !important; }

/* Persistent title bar and account controls. */
html.game-client-layout .brand-copy strong { font-size: 12px !important; font-weight: 800 !important; }
html.game-client-layout .brand-copy small { color: #b5c0d0 !important; font-size: 10px !important; font-weight: 700 !important; }
html.game-client-layout .brand-context,
html.game-client-layout .topbar-title { font-size: 16px !important; font-weight: 800 !important; }
html.game-client-layout .service-state { color: #b5d9d1 !important; font-size: 10px !important; font-weight: 700 !important; }
html.game-client-layout .points-chip small { color: #c4cedc !important; font-size: 10px !important; font-weight: 650 !important; }
html.game-client-layout .points-chip b { font-size: 13px !important; font-weight: 800 !important; }
html.game-client-layout .topbar-user small { color: #bdc8d8 !important; font-size: 10px !important; font-weight: 650 !important; }
html.game-client-layout .topbar-user b { color: #ffffff !important; font-size: 12px !important; font-weight: 800 !important; }
html.game-client-layout .frame-button { min-height: 29px !important; font-size: 11px !important; font-weight: 750 !important; }
html.game-client-layout .icon-button { font-size: 15px !important; }
html.game-client-layout .top-popover-head b,
html.game-client-layout .top-popover-stats b,
html.game-client-layout .top-popover button b { color: #ffffff !important; font-size: 12px !important; font-weight: 800 !important; }
html.game-client-layout .top-popover-head small,
html.game-client-layout .top-popover-stats small,
html.game-client-layout .top-popover button small { color: #bac6d7 !important; font-size: 10px !important; font-weight: 650 !important; }

/* Login and registration. */
html.game-client-layout .eyebrow,
html.game-client-layout .overline,
html.game-client-layout .login-world-head { font-size: 10px !important; font-weight: 800 !important; }
html.game-client-layout .login-title p { color: #e0e6ef !important; font-size: 12px !important; line-height: 1.5 !important; font-weight: 550 !important; }
html.game-client-layout .login-chapters b { color: #ffffff !important; font-size: 11px !important; font-weight: 800 !important; }
html.game-client-layout .login-chapters small { color: #d1d9e5 !important; font-size: 10px !important; font-weight: 650 !important; }
html.game-client-layout .console-head h2 { font-size: 21px !important; font-weight: 800 !important; }
html.game-client-layout .console-seal { font-size: 12px !important; font-weight: 800 !important; }
html.game-client-layout .auth-tab { font-size: 12px !important; font-weight: 800 !important; }
html.game-client-layout .form-stack label { color: #e5ebf3 !important; font-size: 11px !important; line-height: 1.25 !important; font-weight: 700 !important; }
html.game-client-layout .input-frame input { color: #ffffff !important; font-size: 13px !important; line-height: 1.2 !important; font-weight: 650 !important; }
html.game-client-layout .input-frame input::placeholder { color: #8f9caf !important; opacity: 1 !important; }
html.game-client-layout .arcane-button { font-size: 12px !important; font-weight: 800 !important; }
html.game-client-layout .error { color: #ff98a4 !important; font-size: 11px !important; line-height: 1.35 !important; font-weight: 650 !important; }
html.game-client-layout .console-foot { color: #b5c0cf !important; font-size: 10px !important; line-height: 1.35 !important; font-weight: 600 !important; }

/* Player navigation and activity lobby. */
html.game-client-layout .rail-profile strong { font-size: 12px !important; font-weight: 800 !important; }
html.game-client-layout .rail-profile small { color: #c0cad8 !important; font-size: 10px !important; font-weight: 650 !important; }
html.game-client-layout .rail-link b { font-size: 12px !important; font-weight: 800 !important; }
html.game-client-layout .rail-link small,
html.game-client-layout .rail-link em { color: #bac6d5 !important; font-size: 10px !important; font-weight: 650 !important; }
html.game-client-layout .rail-status span { font-size: 11px !important; font-weight: 750 !important; }
html.game-client-layout .rail-status small { color: #aebaca !important; font-size: 10px !important; }
html.game-client-layout .page-heading h2 { font-size: 19px !important; line-height: 1.15 !important; font-weight: 850 !important; }
html.game-client-layout .page-heading p { color: #c7d1df !important; font-size: 11px !important; line-height: 1.45 !important; font-weight: 550 !important; }
html.game-client-layout .page-count small { color: #bdc8d8 !important; font-size: 10px !important; }
html.game-client-layout .feature-copy > small { color: #bcd0eb !important; font-size: 10px !important; font-weight: 800 !important; }
html.game-client-layout .feature-copy > p { color: #d5dde9 !important; font-size: 11px !important; line-height: 1.45 !important; }
html.game-client-layout .feature-meta b { font-size: 10px !important; font-weight: 750 !important; }
html.game-client-layout .enter-activity { font-size: 12px !important; font-weight: 800 !important; }
html.game-client-layout .activity-entry b { font-size: 12px !important; font-weight: 800 !important; }
html.game-client-layout .activity-entry small,
html.game-client-layout .activity-entry em,
html.game-client-layout .activity-entry > i { color: #c0ccdc !important; font-size: 10px !important; font-weight: 650 !important; }
html.game-client-layout .library-footer { color: #bdc8d7 !important; font-size: 10px !important; font-weight: 650 !important; }

/* Player data, character binding and reward records. */
html.game-client-layout .data-panel header h3,
html.game-client-layout .profile-card h3,
html.game-client-layout .bind-console h3 { color: #ffffff !important; font-size: 13px !important; font-weight: 800 !important; }
html.game-client-layout .data-panel header span,
html.game-client-layout .data-panel header em { color: #b9c7d9 !important; font-size: 10px !important; font-weight: 700 !important; }
html.game-client-layout .vault-summary small,
html.game-client-layout .vault-summary span { color: #c0cbda !important; font-size: 10px !important; font-weight: 650 !important; }
html.game-client-layout .ledger-copy b { color: #ffffff !important; font-size: 12px !important; font-weight: 800 !important; }
html.game-client-layout .ledger-copy small,
html.game-client-layout .ledger-time,
html.game-client-layout .status-badge { color: #c1ccda !important; font-size: 10px !important; line-height: 1.35 !important; font-weight: 650 !important; }
html.game-client-layout .bind-console > p,
html.game-client-layout .security-help,
html.game-client-layout .system-note p { color: #cbd5e2 !important; font-size: 11px !important; line-height: 1.45 !important; }
html.game-client-layout .bind-fields label,
html.game-client-layout .security-form-grid label,
html.game-client-layout .small-dialog label { color: #dde5ef !important; font-size: 11px !important; font-weight: 700 !important; }
html.game-client-layout .bind-fields input,
html.game-client-layout .security-form-grid input,
html.game-client-layout .small-dialog input,
html.game-client-layout .security-token { color: #ffffff !important; font-size: 12px !important; font-weight: 650 !important; }
html.game-client-layout .character-list button { font-size: 11px !important; font-weight: 700 !important; }
html.game-client-layout .empty-state { color: #b9c5d4 !important; font-size: 11px !important; font-weight: 600 !important; }

/* Dense tables and administration screens inside the client. */
html.game-client-layout .admin-nav span { font-size: 11px !important; font-weight: 750 !important; }
html.game-client-layout .admin-nav em,
html.game-client-layout .admin-rail footer span,
html.game-client-layout .admin-rail footer small { color: #b9c5d5 !important; font-size: 10px !important; font-weight: 650 !important; }
html.game-client-layout .admin-heading h2 { font-size: 18px !important; font-weight: 850 !important; }
html.game-client-layout .admin-heading p { color: #c5d0de !important; font-size: 11px !important; line-height: 1.4 !important; }
html.game-client-layout .metric-grid small,
html.game-client-layout .metric-grid em { color: #c0ccdc !important; font-size: 10px !important; font-weight: 650 !important; }
html.game-client-layout .compact-row b { color: #ffffff !important; font-size: 11px !important; font-weight: 800 !important; }
html.game-client-layout .compact-row small,
html.game-client-layout .compact-row > em { color: #c3cedd !important; font-size: 10px !important; line-height: 1.35 !important; }
html.game-client-layout .search-frame input,
html.game-client-layout .filter-bar input,
html.game-client-layout .filter-bar select,
html.game-client-layout .search-frame button,
html.game-client-layout .filter-bar button { font-size: 11px !important; font-weight: 650 !important; }
html.game-client-layout th { color: #cbd5e3 !important; font-size: 10px !important; font-weight: 800 !important; }
html.game-client-layout td { color: #e5ebf3 !important; font-size: 11px !important; line-height: 1.35 !important; }
html.game-client-layout td strong { color: #ffffff !important; font-size: 11px !important; font-weight: 800 !important; }
html.game-client-layout td small,
html.game-client-layout .table-action,
html.game-client-layout .pool-inspector p { color: #bec9d8 !important; font-size: 10px !important; line-height: 1.35 !important; }

/* Shared dialogs, feedback and transient status. */
html.game-client-layout .small-dialog h3 { color: #ffffff !important; font-size: 17px !important; font-weight: 850 !important; }
html.game-client-layout .small-dialog p { color: #d0d8e4 !important; font-size: 11px !important; line-height: 1.45 !important; }
html.game-client-layout .toast { color: #ffffff !important; font-size: 12px !important; line-height: 1.4 !important; font-weight: 700 !important; }

/* Points-gacha text. Card dimensions remain unchanged. */
html.game-client-layout body.is-gacha-page .hgc-eyebrow { font-size: 10px !important; font-weight: 850 !important; }
html.game-client-layout body.is-gacha-page .hgc-heading-copy h1 { font-size: 22px !important; line-height: 1.1 !important; font-weight: 900 !important; }
html.game-client-layout body.is-gacha-page .hgc-heading-copy p,
html.game-client-layout body.is-gacha-page .hgc-announcement { color: #d0d9e6 !important; font-size: 11px !important; line-height: 1.4 !important; font-weight: 600 !important; }
html.game-client-layout body.is-gacha-page .hgc-status span,
html.game-client-layout body.is-gacha-page .hgc-meta span,
html.game-client-layout body.is-gacha-page .hgc-deck-label { color: #c6d1df !important; font-size: 10px !important; font-weight: 700 !important; }
html.game-client-layout body.is-gacha-page .hgc-status b,
html.game-client-layout body.is-gacha-page .hgc-meta b { color: #ffffff !important; font-size: 12px !important; font-weight: 850 !important; }
html.game-client-layout body.is-gacha-page .hgc-stage-copy h2,
html.game-client-layout body.is-gacha-page .hgc-collection-head h2 { font-size: 16px !important; font-weight: 850 !important; }
html.game-client-layout body.is-gacha-page .hgc-stage-copy p,
html.game-client-layout body.is-gacha-page .hgc-collection-head p,
html.game-client-layout body.is-gacha-page .hgc-collection-actions span { color: #c5d0df !important; font-size: 10px !important; line-height: 1.35 !important; font-weight: 650 !important; }
html.game-client-layout body.is-gacha-page .hgc-aux-button,
html.game-client-layout body.is-gacha-page .hgc-action-button,
html.game-client-layout body.is-gacha-page .hgc-back-button,
html.game-client-layout body.is-gacha-page .hgc-draw-button,
html.game-client-layout body.is-gacha-page .hgc-exchange-trigger { font-size: 11px !important; font-weight: 800 !important; }
html.game-client-layout body.is-gacha-page .hgc-draw-button strong { font-size: 12px !important; font-weight: 850 !important; }
html.game-client-layout body.is-gacha-page .hgc-draw-button small { color: #d0d9e4 !important; font-size: 10px !important; font-weight: 700 !important; }
html.game-client-layout body.is-gacha-page .hgc-card-name { color: #ffffff !important; font-size: 11px !important; line-height: 1.25 !important; font-weight: 850 !important; }
html.game-client-layout body.is-gacha-page .hgc-card-grade,
html.game-client-layout body.is-gacha-page .hgc-card-quantity { font-size: 10px !important; line-height: 1.2 !important; font-weight: 800 !important; }
html.game-client-layout body.is-gacha-page .hgc-card-corner b,
html.game-client-layout body.is-gacha-page .hgc-card-corner small,
html.game-client-layout body.is-gacha-page .hgc-card-qty,
html.game-client-layout body.is-gacha-page .hgc-result-qty-badge { font-size: 10px !important; line-height: 1.15 !important; font-weight: 850 !important; }
html.game-client-layout body.is-gacha-page .hgc-deck-topline,
html.game-client-layout body.is-gacha-page .hgc-meta { color: #c6d1df !important; font-size: 10px !important; font-weight: 700 !important; }
html.game-client-layout body.is-gacha-page .hgc-result-head span { font-size: 10px !important; font-weight: 800 !important; }
html.game-client-layout body.is-gacha-page .hgc-result-head h2 { font-size: 18px !important; font-weight: 900 !important; }
html.game-client-layout body.is-gacha-page .hgc-result-head p,
html.game-client-layout body.is-gacha-page .hgc-result-actions p { color: #d0d9e6 !important; font-size: 11px !important; line-height: 1.4 !important; }
html.game-client-layout body.is-gacha-page .hgc-dialog-head h3 { font-size: 17px !important; font-weight: 900 !important; }
html.game-client-layout body.is-gacha-page .hgc-dialog-body,
html.game-client-layout body.is-gacha-page .hgc-dialog-body p { color: #d6dee9 !important; font-size: 11px !important; line-height: 1.45 !important; }
html.game-client-layout body.is-gacha-page .hgc-history-section > header strong { font-size: 13px !important; font-weight: 900 !important; }
html.game-client-layout body.is-gacha-page .hgc-history-section > header small,
html.game-client-layout body.is-gacha-page .hgc-history-section > header span,
html.game-client-layout body.is-gacha-page .hgc-history-reward-pane > header span { color: #c9d9eb !important; font-size: 10px !important; font-weight: 750 !important; }
html.game-client-layout body.is-gacha-page .hgc-history-row strong,
html.game-client-layout body.is-gacha-page .hgc-reward-row strong { color: #ffffff !important; font-size: 11px !important; line-height: 1.25 !important; font-weight: 850 !important; }
html.game-client-layout body.is-gacha-page .hgc-history-row small,
html.game-client-layout body.is-gacha-page .hgc-reward-row small,
html.game-client-layout body.is-gacha-page .hgc-history-row > b,
html.game-client-layout body.is-gacha-page .hgc-history-row em,
html.game-client-layout body.is-gacha-page .hgc-reward-row > b { color: #cbd7e6 !important; font-size: 10px !important; line-height: 1.3 !important; font-weight: 700 !important; }
html.game-client-layout body.is-gacha-page .hgc-history-card > header small,
html.game-client-layout body.is-gacha-page .hgc-history-left > header small,
html.game-client-layout body.is-gacha-page .hgc-history-detail > header small,
html.game-client-layout body.is-gacha-page .hgc-history-left > header span,
html.game-client-layout body.is-gacha-page .hgc-history-detail-row span,
html.game-client-layout body.is-gacha-page .hgc-history-summary small,
html.game-client-layout body.is-gacha-page .hgc-history-summary span { color: #c5d1e0 !important; font-size: 10px !important; line-height: 1.3 !important; font-weight: 700 !important; }
html.game-client-layout body.is-gacha-page .hgc-history-detail-row b,
html.game-client-layout body.is-gacha-page .hgc-history-summary b { color: #ffffff !important; font-size: 11px !important; font-weight: 850 !important; }
html.game-client-layout body.is-gacha-page .hgc-preview-hint { color: #c6d2e1 !important; font-size: 10px !important; font-weight: 700 !important; }

/* Exchange and character-selection dialogs live outside the main shell. */
html.game-client-layout .hgc-exchange-header span { color: #cbb477 !important; font-size: 10px !important; font-weight: 800 !important; }
html.game-client-layout .hgc-exchange-header h3 { font-size: 18px !important; font-weight: 850 !important; }
html.game-client-layout .hgc-exchange-identity span,
html.game-client-layout .hgc-exchange-rule span,
html.game-client-layout .hgc-exchange-help,
html.game-client-layout .hgc-exchange-form label,
html.game-client-layout .hgc-exchange-feedback > strong,
html.game-client-layout .hgc-exchange-status { color: #c8d2df !important; font-size: 11px !important; line-height: 1.4 !important; font-weight: 650 !important; }
html.game-client-layout .hgc-exchange-identity strong,
html.game-client-layout .hgc-exchange-rule b { font-size: 12px !important; font-weight: 850 !important; }
html.game-client-layout .hgc-exchange-form input { font-size: 13px !important; font-weight: 750 !important; }
html.game-client-layout .hgc-exchange-form button span,
html.game-client-layout .hgc-exchange-switch-character { font-size: 11px !important; font-weight: 800 !important; }
html.game-client-layout .hgc-exchange-form button small { color: #d2c293 !important; font-size: 10px !important; }
html.game-client-layout .hgc-character-switch-dialog h3 { font-size: 17px !important; font-weight: 850 !important; }
html.game-client-layout .hgc-character-switch-dialog p,
html.game-client-layout .hgc-character-switch-option small { color: #cbd5e2 !important; font-size: 11px !important; line-height: 1.4 !important; }
html.game-client-layout .hgc-character-switch-option strong { color: #ffffff !important; font-size: 12px !important; font-weight: 850 !important; }

/* Gacha administration remains readable when opened in WebView2. */
html.game-client-layout #admin-gacha .gac-kicker,
html.game-client-layout #admin-gacha .gac-save-state,
html.game-client-layout #admin-gacha .gac-state-chip { font-size: 10px !important; font-weight: 750 !important; }
html.game-client-layout #admin-gacha .gac-tab { font-size: 11px !important; font-weight: 800 !important; }
html.game-client-layout #admin-gacha .gac-section > header h3 { font-size: 13px !important; font-weight: 850 !important; }
html.game-client-layout #admin-gacha .gac-section > header p,
html.game-client-layout #admin-gacha .gac-fields label,
html.game-client-layout #admin-gacha .gac-prize-row small { color: #c6d1df !important; font-size: 10px !important; line-height: 1.35 !important; }
html.game-client-layout #admin-gacha .gac-fields input,
html.game-client-layout #admin-gacha .gac-fields textarea,
html.game-client-layout #admin-gacha .gac-fields select { color: #ffffff !important; font-size: 11px !important; font-weight: 650 !important; }

@media (max-height: 540px) {
  html.game-client-layout .login-title p { font-size: 11px !important; }
  html.game-client-layout .login-chapters small,
  html.game-client-layout .console-foot { font-size: 10px !important; }
  html.game-client-layout body.is-gacha-page .hgc-heading-copy p,
  html.game-client-layout body.is-gacha-page .hgc-announcement { font-size: 10px !important; }
}

@media (prefers-reduced-motion: reduce) {
  html.game-client-layout .shell,
  html.game-client-layout .dialog-overlay,
  html.game-client-layout .hgc-modal,
  html.game-client-layout .hgc-exchange-overlay,
  html.game-client-layout .hgc-character-switch-overlay {
    scroll-behavior: auto !important;
  }
}