/* City NOM NOM custom vector icon system. */
.nom-icon {
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
    flex: 0 0 auto;
    vertical-align: -0.22em;
    overflow: visible;
    pointer-events: none;
    color: inherit;
}
.nom-icon--trophy, .nom-icon--gold { color: #855b15; }
.nom-icon--silver { color: #536477; }
.nom-icon--bronze, .nom-icon--poop { color: #805034; }
.nom-icon--passport, .nom-icon--slot { color: inherit; --icon-fill: none; }
[data-theme="dark"] .nom-icon--trophy, [data-theme="dark"] .nom-icon--gold { color: #f1c76b; --icon-fill: #5d481e; --icon-ribbon: #6e86ba; }
[data-theme="dark"] .nom-icon--silver { color: #cbd5e1; --icon-fill: #40516a; --icon-ribbon: #6e86ba; }
[data-theme="dark"] .nom-icon--bronze, [data-theme="dark"] .nom-icon--poop { color: #e7b38f; --icon-fill: #664630; --icon-ribbon: #6e86ba; }
button:hover .nom-icon, button:disabled .nom-icon { color: inherit; }
.medal-btn .nom-icon { width: 32px; height: 32px; }
.history-medal-btn .nom-icon { width: 23px; height: 23px; }
.leaderboard-table th .nom-icon, .leaderboard-rank-medal .nom-icon { width: 25px; height: 25px; }
.sound-toggle-btn .nom-icon, .theme-toggle-btn .nom-icon, .drawer-item-icon .nom-icon { width: 21px; height: 21px; }
.mobile-menu-icon .nom-icon { width: 24px; height: 24px; }
.badge-icon-wrap .nom-icon { width: 36px; height: 36px; }
.empty-watermark-icon .nom-icon { width: 40px; height: 40px; }
.public-stamps-empty-icon .nom-icon, .stamp-remove-confirm-icon .nom-icon { width: 48px; height: 48px; }
.rating-stars { display: inline-flex; align-items: center; gap: 2px; }
.rating-stars .nom-icon { width: 16px; height: 16px; }
.history-star .nom-icon { width: 20px; height: 20px; }
.floating-emoji .nom-icon { width: 48px; height: 48px; color: var(--primary); }
.reaction-trigger-btn .nom-icon { width: 23px; height: 23px; }
.streak-badge .nom-icon { width: 17px; height: 17px; }
.toast .nom-icon { margin-right: 6px; }
.city-badge-wrap { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; flex-shrink: 0; }
.city-badge-svg { display: block; width: 100%; height: 100%; }
.city-picker-label { display: flex; flex-direction: column; gap: 2px; line-height: 1.3; text-align: left; }
.passport-cover-main { font-size: clamp(1.45rem, 5vw, 1.85rem); letter-spacing: 0.12em; }
.passport-cover-filigree { display: flex; align-items: center; justify-content: center; gap: 12px; }
.passport-cover-filigree::before, .passport-cover-filigree::after { content: ''; height: 1px; width: min(25%, 100px); background: currentColor; opacity: 0.6; }
.passport-cover-filigree .nom-icon { width: 12px; height: 12px; }
.rubber-stamp-star .nom-icon { width: 0.85em; height: 0.85em; }
@media (max-width: 420px) {
    .medal-btn .nom-icon { width: 28px; height: 28px; }
    .passport-cover-main { letter-spacing: 0.08em; }
}

/* Keep the passport's outlined mark legible in both themes and interaction states. */
.passport-btn:hover:not(:disabled), .passport-btn:focus-visible {
    background: var(--surface-2);
    border-color: var(--primary);
    color: var(--primary);
    box-shadow: none;
    transform: none;
}
.spin-together-btn .nom-icon { width: 20px; height: 20px; }