/* ===============================================
   SEATTLE NOM NOM — Design System
   =============================================== */

/* -----------------------------------------------
   CSS Custom Properties
   ----------------------------------------------- */
:root {
    --primary:        #c2410c;
    --primary-dark:   #9a3412;
    --primary-light:  #ea580c;
    --primary-glow:   rgba(194, 65, 12, 0.20);
    --accent:         #1e1b4b;
    --accent-mid:     #3730a3;
    --bg:             #fdfcf9;
    --surface:        #ffffff;
    --surface-2:      #f5f2ec;
    --border:         #e5e0d8;
    --border-light:   #ede9e1;
    --text:           #1a1a1a;
    --text-muted:     #374151;
    --text-light:     #52525b;
    --green:          #059669;
    --red:            #dc2626;
    --amber:          #d97706;
    --blue:           #2563eb;
    --radius-xs:      6px;
    --radius-sm:      10px;
    --radius:         14px;
    --radius-lg:      20px;
    --radius-pill:    999px;
    --shadow-xs:      0 1px 3px rgba(0,0,0,0.07);
    --shadow-sm:      0 2px 10px rgba(0,0,0,0.08);
    --shadow:         0 4px 24px rgba(0,0,0,0.10);
    --shadow-lg:      0 16px 56px rgba(0,0,0,0.14);
    --transition:     0.18s ease;
}

/* -----------------------------------------------
   Dark Mode & City Theme Overrides
   ----------------------------------------------- */
[data-theme="dark"] {
    --bg:             #0b0d13;
    --surface:        #151821;
    --surface-2:      #1e2330;
    --border:         #2d3446;
    --border-light:   #3b445a;
    --text:           #f8fafc;
    --text-muted:     #cbd5e1;
    --text-light:     #94a3b8;
    --green:          #34d399;
    --red:            #f87171;
    --amber:          #fbbf24;
    --blue:           #60a5fa;
    --accent:         #312e81;
    --accent-mid:     #818cf8;
    --primary-dark:   #fb923c;
    --shadow-xs:      0 1px 3px rgba(0,0,0,0.50);
    --shadow-sm:      0 2px 10px rgba(0,0,0,0.60);
    --shadow:         0 4px 24px rgba(0,0,0,0.70);
    --shadow-lg:      0 16px 56px rgba(0,0,0,0.85);
}

[data-city="seattle"] {
    --primary:        #c2410c;
    --primary-dark:   #9a3412;
    --primary-light:  #ea580c;
    --primary-glow:   rgba(194, 65, 12, 0.25);
}
[data-city="houston"] {
    --primary:        #c2410c;
    --primary-dark:   #9a3412;
    --primary-light:  #ea580c;
    --accent:         #0f172a;
    --accent-mid:     #1e3a8a;
    --primary-glow:   rgba(194, 65, 12, 0.25);
}
[data-city="melbourne"] {
    --primary:        #b45309;
    --primary-dark:   #92400e;
    --primary-light:  #d97706;
    --accent:         #292524;
    --accent-mid:     #78350f;
    --primary-glow:   rgba(180, 83, 9, 0.25);
}
[data-city="budapest"] {
    --primary:        #dc2626;
    --primary-dark:   #b91c1c;
    --primary-light:  #ef4444;
    --accent:         #134e4a;
    --accent-mid:     #0f766e;
    --primary-glow:   rgba(220, 38, 38, 0.25);
}

[data-theme="dark"][data-city="seattle"] {
    --primary:        #f97316;
    --primary-dark:   #fb923c;
    --primary-light:  #fdba74;
    --accent:         #312e81;
    --accent-mid:     #a5b4fc;
}
[data-theme="dark"][data-city="houston"] {
    --primary:        #fb923c;
    --primary-dark:   #fdba74;
    --primary-light:  #fed7aa;
    --accent:         #1e293b;
    --accent-mid:     #60a5fa;
}
[data-theme="dark"][data-city="melbourne"] {
    --primary:        #f59e0b;
    --primary-dark:   #fbbf24;
    --primary-light:  #fde68a;
    --accent:         #292524;
    --accent-mid:     #fbbf24;
}
[data-theme="dark"][data-city="budapest"] {
    --primary:        #ef4444;
    --primary-dark:   #f87171;
    --primary-light:  #fca5a5;
    --accent:         #134e4a;
    --accent-mid:     #2dd4bf;
}

/* -----------------------------------------------
   Base reset
   ----------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

::selection {
    background: rgba(232, 93, 4, 0.35);
    color: inherit;
}

[data-theme="dark"] ::selection {
    background: rgba(249, 115, 22, 0.45);
    color: #ffffff;
}

input::placeholder,
textarea::placeholder {
    color: var(--text-muted);
    opacity: 0.85;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 64px;
}

:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

body {
    font-family: 'Inter', Arial, sans-serif;
    text-align: center;
    font-size: 1rem;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    color: var(--text);
    background-color: var(--bg);
    background-image:
        radial-gradient(ellipse at 15% 0%,  rgba(232, 93,  4, 0.06) 0%, transparent 55%),
        radial-gradient(ellipse at 85% 100%, rgba(30,  27, 75, 0.05) 0%, transparent 55%);
    min-height: 100vh;
    overflow-x: clip;
}

/* -----------------------------------------------
   Slot Machine Header Reel (<city>NomNom)
   ----------------------------------------------- */
.app-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 1.35rem auto 0.2rem;
    overflow-x: clip;
}

h1.app-title,
.app-title {
    font-size: clamp(2rem, 5vw, 3.6rem);
    font-weight: 900;
    letter-spacing: -0.04em;
    margin: 0 auto;
    line-height: 1.1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    transition: transform 0.15s ease;
}

h1.app-title:hover,
.app-title:hover {
    transform: scale(1.02);
}

.city-reel-viewport {
    height: clamp(2.6rem, 5.5vw, 4.2rem);
    line-height: clamp(2.6rem, 5.5vw, 4.2rem);
    overflow: hidden;
    position: relative;
    display: inline-block;
    vertical-align: top;
    text-align: right;
    white-space: nowrap;
    box-sizing: content-box;
    padding-left: 80px;
    margin-left: -80px;
    transform-origin: right center;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 22%, black 78%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 22%, black 78%, transparent 100%);
}

.city-reel-strip {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    will-change: transform, filter;
    transform: translateZ(0);
}

.city-reel-item {
    height: clamp(2.6rem, 5.5vw, 4.2rem);
    line-height: clamp(2.6rem, 5.5vw, 4.2rem);
    font-size: inherit;
    font-weight: 900;
    letter-spacing: -0.04em;
    text-align: right;
    white-space: nowrap;
    display: block;
    background: linear-gradient(130deg, var(--primary) 0%, #ff9f1c 55%, var(--primary-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transform: translateZ(0);
}

.static-nomnom {
    height: clamp(2.6rem, 5.5vw, 4.2rem);
    line-height: clamp(2.6rem, 5.5vw, 4.2rem);
    font-size: inherit;
    font-weight: 900;
    letter-spacing: -0.04em;
    white-space: nowrap;
    display: inline-block;
    vertical-align: top;
    background: linear-gradient(130deg, var(--primary) 0%, #ff9f1c 55%, var(--primary-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transform: translateZ(0);
}

.city-reel-strip.spinning {
    filter: blur(0.45px);
}

.app-title.landed .city-reel-viewport {
    animation: cityReelLand 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.app-title.landed .static-nomnom {
    animation: staticNomNomBounce 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes cityReelLand {
    0%   { transform: scale(1); filter: drop-shadow(0 0 0 rgba(232, 93, 4, 0)); }
    40%  { transform: scale(1.05); filter: drop-shadow(0 0 16px var(--primary-glow)); }
    100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(232, 93, 4, 0)); }
}

@keyframes staticNomNomBounce {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.03); }
    100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .app-title,
    .city-reel-viewport,
    .city-reel-strip,
    .static-nomnom,
    .app-title.landed .city-reel-viewport,
    .app-title.landed .static-nomnom,
    .app-title:hover {
        animation: none !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }
}

.page-tagline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    color: var(--text-muted);
    font-size: clamp(0.92rem, 2.2vw, 1.05rem);
    font-weight: 500;
    margin: 0.5rem auto 1.25rem;
    letter-spacing: 0.02em;
    padding: 5px 18px;
    border-radius: var(--radius-pill);
    background: rgba(232, 93, 4, 0.04);
    border: 1px solid rgba(232, 93, 4, 0.14);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
    user-select: none;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.page-tagline:hover {
    border-color: rgba(232, 93, 4, 0.32);
    background: rgba(232, 93, 4, 0.08);
    box-shadow: 0 2px 10px rgba(232, 93, 4, 0.12);
}

.page-tagline::before,
.page-tagline::after {
    content: "✦";
    font-size: 0.65rem;
    color: var(--primary);
    opacity: 0.75;
    transform: translateY(-0.5px);
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.page-tagline:hover::before {
    transform: rotate(-18deg) scale(1.2);
    opacity: 1;
}

.page-tagline:hover::after {
    transform: rotate(18deg) scale(1.2);
    opacity: 1;
}

.tagline-jackpot {
    font-weight: 800;
    background: linear-gradient(130deg, #c2410c 0%, #ea580c 55%, #c2410c 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 0.03em;
    position: relative;
    display: inline-block;
    filter: drop-shadow(0 1px 3px rgba(194, 65, 12, 0.22));
}

[data-theme="dark"] .tagline-jackpot {
    background: linear-gradient(130deg, #ff9f1c 0%, #e85d04 55%, #ff5400 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 1px 3px rgba(232, 93, 4, 0.22));
}

[data-theme="dark"] .page-tagline {
    background: rgba(232, 93, 4, 0.08);
    border-color: rgba(232, 93, 4, 0.22);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .page-tagline:hover {
    border-color: rgba(232, 93, 4, 0.42);
    background: rgba(232, 93, 4, 0.14);
    box-shadow: 0 2px 14px rgba(232, 93, 4, 0.25);
}

h2 {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.02em;
    margin: 2rem 0 0.6rem;
}

/* -----------------------------------------------
   Global button base
   ----------------------------------------------- */
button {
    font-family: inherit;
    padding: 10px 20px;
    font-size: 0.9rem;
    font-weight: 600;
    background-color: var(--accent-mid);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color var(--transition), transform var(--transition),
                box-shadow var(--transition), opacity var(--transition);
    margin: 4px;
    line-height: 1.4;
}

button:hover:not(:disabled) {
    background-color: var(--accent-dark, var(--primary-dark));
    color: white;
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

button:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: none;
}

button:disabled { background-color: var(--surface-2); color: var(--text-light); border: 1px solid var(--border); cursor: not-allowed; opacity: 0.7; transform: none; box-shadow: none; }

/* -----------------------------------------------
   Slot Machine
   ----------------------------------------------- */
.slot-machine {
    display: flex;
    justify-content: center;
    margin: 1.5rem 0;
    gap: 16px;
    padding: 0 12px;
}

.reel {
    width: 162px;
    height: 162px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: 700;
    background-color: #1e1b4b;
    background: linear-gradient(150deg, #1e1b4b 0%, #2d1f6e 100%);
    color: #fff;
    position: relative;
    border-radius: var(--radius);
    padding: 14px;
    box-shadow:
        0 8px 32px rgba(30, 27, 75, 0.30),
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 -1px 0 rgba(0, 0, 0, 0.20);
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.10);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.40);
    transition: box-shadow var(--transition);
}

/* Top/bottom fade edges via inset box-shadow so ::after is free for spin text */
.reel::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to bottom, rgba(30, 27, 75, 0.80) 0%, transparent 30%,
                         transparent 70%, rgba(30, 27, 75, 0.80) 100%);
    pointer-events: none;
    z-index: 1;
}

.reel.spin {
    box-shadow:
        0 8px 32px rgba(30, 27, 75, 0.30),
        0 0 0 2px var(--primary-glow),
        0 0 24px var(--primary-glow),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.reel.spin::after {
    content: attr(data-content);
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    text-align: center;
    z-index: 2;
    animation: spinContent 0.4s linear infinite;
}

@keyframes spinContent {
    0%   { transform: translateY(calc(-50% - 20px)); opacity: 0; }
    50%  { transform: translateY(-50%);              opacity: 1; }
    100% { transform: translateY(calc(-50% + 20px)); opacity: 0; }
}

/* -----------------------------------------------
   Spin button (primary)
   ----------------------------------------------- */
#spin-button {
    background-color: var(--primary);
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    color: #fff;
    border: none;
    border-radius: var(--radius-pill);
    padding: 16px 64px;
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 8px auto;
    display: inline-block;
    box-shadow: 0 6px 28px var(--primary-glow), 0 2px 6px rgba(0,0,0,0.12);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

#spin-button:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 12px 36px var(--primary-glow), 0 4px 12px rgba(0,0,0,0.15);
}

#spin-button:active:not(:disabled) {
    transform: translateY(0) scale(0.99);
    box-shadow: 0 3px 12px var(--primary-glow);
}

#spin-button:disabled { background: var(--surface-2); color: var(--text-light); border: 2px solid var(--border); box-shadow: none; transform: none; opacity: 0.85; }

/* -----------------------------------------------
   Spin secondary buttons
   ----------------------------------------------- */
.spin-secondary-btns {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 6px 0 8px;
    flex-wrap: wrap;
}


.secondary-btn {
    background: transparent;
    color: var(--text); border: 1.5px solid var(--border); padding: 8px 18px;
    font-size: 0.84rem;
    font-weight: 600;
    border-radius: var(--radius-pill);
    margin: 0;
}

.secondary-btn:hover:not(:disabled) {
    background: var(--surface-2);
    color: var(--text);
    border-color: var(--primary);
    transform: translateY(-1px);
    box-shadow: var(--shadow-xs);
}

/* -----------------------------------------------
   Result container
   ----------------------------------------------- */
.result-container {
    margin: 16px auto;
    width: calc(100% - 32px);
    max-width: 600px;
    min-height: 170px;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-left: 4px solid var(--primary);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: var(--radius);
    padding: 20px 24px;
    box-shadow: var(--shadow-sm);
}

#scrolling-result {
    width: 100%;
    text-align: center;
    position: relative;
    transform: translateY(0);
    opacity: 1;
}

#scrolling-result strong {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text);
    display: block;
    margin-bottom: 4px;
    letter-spacing: -0.01em;
}

#scrolling-result p {
    color: var(--text-muted);
    font-size: 0.875rem;
    margin: 2px 0;
}

#scrolling-result a {
    color: var(--blue);
    font-size: 0.8rem;
    text-decoration: none;
}

#scrolling-result a:hover { text-decoration: underline; }

#scrolling-result.spinning {
    animation: resultSpin 0.4s linear infinite;
}

@keyframes resultSpin {
    0%   { transform: translateY(-16px); opacity: 0; }
    50%  { transform: translateY(0);     opacity: 1; }
    100% { transform: translateY(16px);  opacity: 0; }
}

/* -----------------------------------------------
   Result actions (medals + action buttons)
   ----------------------------------------------- */
.result-actions {
    margin: 10px auto 0;
    max-width: 620px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 18px;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-xs);
    flex-wrap: wrap;
    gap: 8px;
}

.medal-buttons {
    display: flex;
    gap: 12px;
    align-items: center;
}

.medal-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.medal-btn {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 2px solid transparent;
    background: var(--surface-2);
    font-size: 1.35rem;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.2s ease,
                box-shadow 0.2s ease, background 0.15s ease;
}

.medal-btn:hover:not(:disabled) {
    transform: scale(1.18);
    background: #e5e7eb;
    box-shadow: none;
}

.medal-btn.selected {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-glow);
    background: #fff;
}

.medal-count {
    font-size: 0.72rem;
    color: var(--text-muted);
    font-weight: 700;
    letter-spacing: 0.01em;
}

.report-btn {
    background: transparent;
    color: var(--red);
    border: 1.5px solid #f87171;
    padding: 6px 12px;
    font-size: 0.78rem;
    font-weight: 600;
    margin: 0;
    align-self: center;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.report-btn:hover:not(:disabled) {
    background: rgba(220, 38, 38, 0.08);
    color: #b91c1c;
    border-color: var(--red);
    transform: none;
    box-shadow: none;
}

.share-btn {
    background: var(--blue);
    color: #fff;
    padding: 7px 14px;
    font-size: 0.8rem;
    border-radius: var(--radius-sm);
    margin: 0;
    align-self: center;
}

.share-btn:hover:not(:disabled) {
    background: #1d4ed8;
    color: #fff;
    transform: none;
    box-shadow: none;
}


.wishlist-btn {
    background: transparent;
    color: #be185d;
    border: 1.5px solid #f472b6;
    padding: 7px 12px;
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
    margin: 0;
    align-self: center;
    cursor: pointer;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.wishlist-btn:hover:not(:disabled) {
    background: rgba(219, 39, 119, 0.10);
    color: #9d174d;
    border-color: #db2777;
    transform: none;
    box-shadow: none;
}

.wishlist-btn.active {
    background: #db2777 !important;
    color: #ffffff !important;
    border-color: #db2777 !important;
}

.wishlist-btn.active:hover:not(:disabled) {
    background: #be185d !important;
    color: #ffffff !important;
    border-color: #be185d !important;
}

.visited-btn {
    background: transparent;
    color: #047857;
    border: 1.5px solid #059669;
    padding: 7px 12px;
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
    margin: 0;
    align-self: center;
    cursor: pointer;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.visited-btn:hover:not(:disabled) {
    background: rgba(5, 150, 105, 0.12);
    color: #065f46;
    border-color: #047857;
    transform: none;
    box-shadow: none;
}

.visited-btn.active {
    background: #059669 !important;
    color: #ffffff !important;
    border-color: #059669 !important;
}

.visited-btn.active:hover:not(:disabled) {
    background: #047857 !important;
    color: #ffffff !important;
    border-color: #047857 !important;
}

.stamp-share-btn {
    background: transparent;
    color: #4338ca;
    border: 1.5px solid #818cf8;
    padding: 7px 12px;
    font-size: 0.8rem;
    border-radius: var(--radius-sm);
    margin: 0;
    align-self: center;
    cursor: pointer;
    font-weight: 600;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.stamp-share-btn:hover:not(:disabled) {
    background: rgba(79, 70, 229, 0.08);
    color: #3730a3;
    border-color: #6366f1;
    transform: none;
    box-shadow: none;
}


/* -----------------------------------------------
   Enriched Info Card
   ----------------------------------------------- */
.enriched-info {
    margin: 10px auto 0;
    max-width: 620px;
    padding: 14px 20px;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.875rem;
    color: var(--text-muted);
    text-align: left;
    box-shadow: var(--shadow-xs);
}

.enriched-info .enriched-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 7px 0;
    border-bottom: 1px solid var(--border-light);
}

.enriched-info .enriched-row:last-of-type { border-bottom: none; }

.enriched-info .enriched-label {
    font-weight: 700;
    color: var(--text);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    white-space: nowrap;
    padding-top: 2px;
    min-width: 58px;
}

.enriched-info a[href^="tel"] {
    color: var(--blue);
    text-decoration: none;
    font-weight: 600;
}

.enriched-info a[href^="tel"]:hover { text-decoration: underline; }

.enriched-rating {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-light);
}

.rating-stars {
    color: #f59e0b;
    font-size: 1.05rem;
    letter-spacing: 1px;
    line-height: 1;
}

.rating-num {
    font-weight: 800;
    font-size: 1rem;
    color: var(--text);
}

.rating-source {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.enriched-actions {
    display: flex;
    gap: 8px;
    padding: 10px 0 4px;
    flex-wrap: wrap;
}

.enriched-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 7px 16px;
    border-radius: var(--radius-pill);
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none;
    transition: opacity 0.15s;
}

.enriched-action-btn:hover { opacity: 0.82; text-decoration: none; }

.directions-btn {
    background: var(--green);
    color: #fff;
}

.website-btn {
    background: var(--blue);
    color: #fff;
}

.health-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 8px 14px;
    border-top: 1px solid var(--border-light);
    font-size: 0.75rem;
}
.health-dept-name { color: var(--text-muted); flex-shrink: 0; }
.health-score-loading { color: var(--text-muted); font-style: italic; }

/* King County rating logos */
.health-kc-logo {
    height: 50px;
    width: auto;
    vertical-align: middle;
    flex-shrink: 0;
}
.health-score-detail {
    font-size: 0.7rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.health-link {
    margin-left: auto;
    font-size: 0.72rem;
    color: var(--primary);
    text-decoration: none;
    white-space: nowrap;
}
.health-link:hover { text-decoration: underline; }

.enriched-info .hours-today {
    font-weight: 800;
    color: var(--text);
}

.enriched-info .closed-badge {
    display: inline-flex;
    align-items: center;
    background: var(--red);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    margin-bottom: 6px;
    letter-spacing: 0.05em;
}

.enriched-info .data-freshness {
    font-size: 0.7rem;
    color: var(--text-light);
    margin-top: 8px;
    font-style: italic;
}

.photo-strip {
    display: flex;
    gap: 8px;
    margin: 10px 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.photo-strip::-webkit-scrollbar { display: none; }

.enriched-photo {
    height: 160px;
    width: auto;
    max-width: 260px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
    cursor: pointer;
    transition: opacity 0.15s;
}

.enriched-photo:hover { opacity: 0.85; }

.photo-frame {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
}

.photo-frame .photo-credit {
    position: absolute;
    right: 4px;
    bottom: 4px;
    padding: 1px 6px;
    font-size: 10px;
    color: #fff;
    background: rgba(0,0,0,0.55);
    border-radius: 4px;
    text-decoration: none;
    max-width: calc(100% - 8px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.add-photo-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 4px 0 10px;
    padding: 6px 14px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--surface);
    cursor: pointer;
    transition: all var(--transition);
}

.add-photo-btn:hover:not(:disabled) {
    background: var(--surface-2);
    color: var(--primary);
    border-color: var(--primary);
    transform: translateY(-1px);
    box-shadow: var(--shadow-xs);
}

[data-theme="dark"] .add-photo-btn {
    background: var(--surface-2);
    color: var(--text);
    border-color: var(--border);
}

[data-theme="dark"] .add-photo-btn:hover:not(:disabled) {
    background: var(--surface);
    color: var(--primary);
    border-color: var(--primary);
}

.add-photo-btn:disabled { opacity: 0.6; cursor: default; }

.photo-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    cursor: pointer;
}

.photo-lightbox-inner {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
}

.photo-lightbox-inner img {
    display: block;
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 8px;
    cursor: default;
}

.photo-lightbox-close {
    position: absolute;
    top: -14px;
    right: -14px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fff;
    border: none;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* -----------------------------------------------
   Leaderboard section
   ----------------------------------------------- */
#leaderboard-section {
    margin: 12px auto;
    max-width: 640px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    overflow: hidden;
    font-size: 0.875rem;
    box-shadow: var(--shadow-xs);
}

.leaderboard-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 13px 20px;
    cursor: pointer;
    background: var(--surface);
    border: none;
    width: 100%;
    text-align: left;
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--text);
    margin: 0;
    border-radius: 0;
    letter-spacing: -0.01em;
    transition: background var(--transition);
}

.leaderboard-toggle:hover:not(:disabled) {
    background: var(--surface-2);
    color: var(--text);
    transform: none;
    box-shadow: none;
}

.leaderboard-toggle:hover:not(:disabled) .leaderboard-arrow {
    color: var(--text);
}

.leaderboard-toggle .leaderboard-arrow {
    transition: transform 0.25s ease;
    font-size: 0.72rem;
    color: var(--text-light);
}

.leaderboard-toggle.open .leaderboard-arrow { transform: rotate(180deg); }

.leaderboard-body {
    max-height: 0;
    overflow: hidden;
    border-top: 1px solid var(--border-light);
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.leaderboard-body.open { max-height: 700px; }

.leaderboard-inner {
    padding: 10px 18px 16px;
    min-height: 160px;
    transition: opacity 0.18s ease;
}

.leaderboard-tabs {
    display: flex;
    gap: 0;
    margin: 12px 18px 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}

.leaderboard-tab {
    flex: 1;
    padding: 7px 0;
    background: var(--surface-2);
    border: none;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted, #888);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.leaderboard-tab:not(:last-child) { border-right: 1px solid var(--border); }

.leaderboard-tab.active {
    background: var(--primary);
    color: #fff;
}

.leaderboard-tab:not(.active):hover {
    background: var(--border-light);
    color: var(--text);
}

.leaderboard-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    margin-top: 8px;
}

.leaderboard-table th {
    text-align: left;
    padding: 8px 10px;
    border-bottom: 2px solid var(--border);
    color: var(--text-muted);
    font-weight: 700;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Medal emoji header columns — larger and centered */
.leaderboard-table th:nth-child(n+3) {
    text-align: center;
    font-size: 1.2rem;
    text-transform: none;
    letter-spacing: 0;
}

.leaderboard-table td {
    padding: 9px 10px;
    border-bottom: 1px solid var(--border-light);
    color: var(--text);
}

/* Medal count columns — centered under their emoji headers */
.leaderboard-table td:nth-child(n+3) {
    text-align: center;
    font-weight: 600;
}

.leaderboard-table tr:last-child td { border-bottom: none; }

.leaderboard-loading {
    padding: 20px;
    color: var(--text-muted);
    text-align: center;
    font-size: 0.875rem;
}

.leaderboard-name-cell {
    cursor: pointer;
    color: var(--primary);
    font-weight: 600;
    transition: color 0.15s;
}

.leaderboard-name-cell:hover {
    color: var(--primary-dark, #c24d02);
    text-decoration: underline;
}

.leaderboard-city-cell {
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.leaderboard-full-btn {
    display: block;
    width: 100%;
    margin-top: 10px;
    padding: 8px;
    background: none;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}

.leaderboard-full-btn:hover:not(:disabled) {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--surface-2);
    transform: none;
    box-shadow: none;
}

/* -----------------------------------------------
   Most Stamps Leaderboard section
   ----------------------------------------------- */
.leaderboard-table.leaderboard-stamps-table th:nth-child(n+3),
.leaderboard-table.leaderboard-stamps-table td:nth-child(n+3) {
    text-align: left;
    font-size: 0.85rem;
    letter-spacing: normal;
    font-weight: 500;
}

.leaderboard-table.leaderboard-stamps-table th:last-child,
.leaderboard-table.leaderboard-stamps-table td.leaderboard-stamps-cell {
    text-align: center;
}

/* -----------------------------------------------
   Most Stamps Leaderboard section
   ----------------------------------------------- */
.leaderboard-stamps-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.stamps-scope-pills {
    display: inline-flex;
    gap: 4px;
    background: var(--surface-2, #f5f5f4);
    padding: 3px;
    border-radius: 20px;
    border: 1px solid var(--border);
}

.stamps-scope-pill {
    padding: 4px 12px;
    border-radius: 16px;
    border: none;
    background: transparent;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.stamps-scope-pill:hover:not(.active) {
    color: var(--text);
    background: var(--border-light, rgba(0,0,0,0.05));
}

.stamps-scope-pill.active {
    background: var(--primary, #ea580c);
    color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.stamps-city-select-wrap {
    display: inline-flex;
    align-items: center;
}

.stamps-city-select {
    font-size: 0.8rem;
    padding: 4px 8px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    font-weight: 500;
}

.leaderboard-table.leaderboard-stamps-table th:nth-child(n+3),
.leaderboard-table.leaderboard-stamps-table td:nth-child(n+3) {
    text-align: left;
    font-size: 0.85rem;
    letter-spacing: normal;
    font-weight: 500;
}

.leaderboard-table.leaderboard-stamps-table th:last-child,
.leaderboard-table.leaderboard-stamps-table td.leaderboard-stamps-cell {
    text-align: center;
}

.leaderboard-chomper-cell,
.leaderboard-foodie-cell {
    cursor: pointer;
}

.leaderboard-chomper-info,
.leaderboard-foodie-info {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.leaderboard-chomper-avatar,
.leaderboard-foodie-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.leaderboard-chomper-placeholder,
.leaderboard-foodie-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary, #ea580c), #f97316);
    color: #fff;
    font-weight: 700;
    font-size: 0.75rem;
}

.leaderboard-chomper-name,
.leaderboard-foodie-name {
    color: var(--primary);
    font-weight: 600;
    transition: color 0.15s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
}

.leaderboard-chomper-cell:hover .leaderboard-chomper-name,
.leaderboard-foodie-cell:hover .leaderboard-foodie-name {
    color: var(--primary-dark, #c24d02);
    text-decoration: underline;
}

.leaderboard-you-badge {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    background: var(--primary);
    color: #fff;
    border-radius: 10px;
    padding: 1px 5px;
    margin-left: 4px;
    vertical-align: middle;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}

.leaderboard-homeport-cell {
    color: var(--text-muted, #78716c);
    font-size: 0.82rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
}

.leaderboard-stamps-cell {
    cursor: pointer;
}

.leaderboard-stamp-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 3px 9px;
    background: rgba(194, 65, 12, 0.08);
    color: var(--primary);
    border: 1px solid rgba(194, 65, 12, 0.22);
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 700;
    white-space: nowrap;
}

.leaderboard-stamp-badge.clickable {
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.leaderboard-stamps-cell:hover .leaderboard-stamp-badge.clickable,
.leaderboard-stamp-badge.clickable:hover {
    background: rgba(194, 65, 12, 0.16);
    border-color: var(--primary);
    transform: scale(1.06);
    box-shadow: 0 2px 8px rgba(194, 65, 12, 0.25);
}

.leaderboard-rank-medal {
    font-size: 1.15rem;
    line-height: 1;
    display: inline-block;
}

/* -----------------------------------------------
   Public Stamps Modal
   ----------------------------------------------- */
.public-stamps-modal .public-stamps-modal-content {
    max-width: 680px;
    width: 94%;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    padding: 24px;
    border-radius: 18px;
    background: var(--surface);
    box-shadow: 0 20px 45px rgba(0,0,0,0.3);
    overflow: hidden;
    box-sizing: border-box;
}

.public-stamps-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 14px;
    border-bottom: 1.5px solid var(--border-light);
    margin-right: 28px;
}

.public-stamps-chomper {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.public-stamps-chomper-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    border: 2px solid var(--border);
}

.public-stamps-chomper-placeholder {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary, #ea580c), #f97316);
    color: #fff;
    font-weight: 800;
    font-size: 1.2rem;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.public-stamps-chomper-meta {
    min-width: 0;
}

.public-stamps-chomper-name {
    margin: 0 0 3px;
    font-size: 1.18rem;
    font-weight: 800;
    color: var(--text);
    line-height: 1.2;
    letter-spacing: -0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.public-stamps-sub {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.8rem;
    color: var(--text-muted);
    flex-wrap: wrap;
}

.public-stamps-port {
    font-weight: 600;
    color: var(--text-muted);
}

.public-stamps-badge-count {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(234, 88, 12, 0.1);
    color: var(--primary, #ea580c);
    border: 1px solid rgba(234, 88, 12, 0.25);
    border-radius: 10px;
    padding: 1px 7px;
    font-weight: 700;
    font-size: 0.78rem;
}

.public-stamps-filter-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 0 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-shrink: 0;
}

.public-stamps-filter-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-right: 4px;
    flex-shrink: 0;
}

.public-stamps-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.public-stamps-filter-chip:hover {
    background: var(--border-light);
    color: var(--text);
}

.public-stamps-filter-chip.active {
    background: var(--primary, #ea580c);
    color: #fff;
    border-color: var(--primary, #ea580c);
}

.public-stamps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
    overflow-y: auto;
    padding: 4px 2px 10px;
    flex: 1;
}

.public-stamp-card {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
    background: var(--surface-2, #fafaf9);
    border: 1.5px solid var(--border);
    border-radius: 12px;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.public-stamp-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-color: rgba(234, 88, 12, 0.4);
}

.public-stamp-seal-wrap {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.public-stamp-seal {
    width: 60px;
    height: 60px;
    border: 2px dashed var(--stamp-ink, #ea580c);
    border-radius: 50%;
    color: var(--stamp-ink, #ea580c);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.7);
    padding: 3px;
    box-sizing: border-box;
    position: relative;
    user-select: none;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.public-stamp-seal-port {
    font-size: 0.55rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    line-height: 1;
}

.public-stamp-seal-shape {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1px 0;
}

.public-stamp-seal-date {
    font-size: 0.52rem;
    font-weight: 800;
    line-height: 1;
}

.public-stamp-info {
    flex: 1;
    min-width: 0;
}

.public-stamp-restaurant {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.25;
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.public-stamp-location {
    font-size: 0.76rem;
    color: var(--text-muted);
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 4px;
}

.public-stamp-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 0.72rem;
}

.public-stamp-tag {
    background: var(--surface);
    border: 1px solid var(--border);
    padding: 1px 6px;
    border-radius: 6px;
    font-weight: 600;
    color: var(--text);
}

.public-stamp-date {
    color: var(--text-muted);
    font-weight: 500;
}

.public-stamps-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
    grid-column: 1 / -1;
}

.public-stamps-empty-icon {
    font-size: 2.4rem;
    margin-bottom: 8px;
    opacity: 0.8;
}

.public-stamps-empty-title {
    font-weight: 700;
    font-size: 1rem;
    color: var(--text);
    margin-bottom: 4px;
}

.public-stamps-empty-desc {
    font-size: 0.82rem;
}

@media (max-width: 480px) {
    .leaderboard-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .leaderboard-tabs::-webkit-scrollbar {
        display: none;
    }
    .leaderboard-tab {
        min-width: max-content;
        padding: 7px 10px;
        font-size: 0.8rem;
    }
    .leaderboard-stamps-controls {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }
    .stamps-scope-pills {
        width: 100%;
        display: flex;
    }
    .stamps-scope-pill {
        flex: 1;
        justify-content: center;
    }
    .stamps-city-select {
        width: 100%;
    }
    .leaderboard-table.leaderboard-stamps-table th,
    .leaderboard-table.leaderboard-stamps-table td {
        padding: 7px 4px;
    }
    .leaderboard-chomper-name,
    .leaderboard-foodie-name {
        max-width: 95px;
        font-size: 0.8rem;
    }
    .leaderboard-homeport-cell {
        max-width: 70px;
        font-size: 0.72rem;
    }
    .leaderboard-stamp-badge {
        padding: 2px 5px;
        font-size: 0.78rem;
    }
    .public-stamps-modal .public-stamps-modal-content {
        padding: 16px;
        width: 96%;
        max-height: 92vh;
    }
    .public-stamps-grid {
        grid-template-columns: 1fr;
    }
}

/* -----------------------------------------------
   Rig the Wheel section
   ----------------------------------------------- */
.rig-options {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    margin: 12px auto 28px;
    max-width: 1100px;
    padding: 0 16px;
}

.rig-options > div {
    text-align: left;
    flex: 1 1 280px;
    padding: 0;
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    border: 1.5px solid var(--border);
    min-width: 240px;
    overflow: hidden;
    transition: box-shadow var(--transition), transform var(--transition);
}

.rig-options > div:hover {
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}

.rig-options h3 { display: none; }

.rig-section-header {
    cursor: pointer;
    user-select: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 13px 18px;
    background: linear-gradient(135deg, var(--surface-2) 0%, #ede9e0 100%);
    border-bottom: 1.5px solid var(--border);
    margin: 0;
    font-weight: 800;
    font-size: 0.9rem;
    color: var(--text);
    letter-spacing: -0.01em;
    transition: background var(--transition);
}

.rig-section-header:hover {
    background: linear-gradient(135deg, #ede9e0 0%, #e4dfd5 100%);
}

.rig-section-header::after {
    content: '▼';
    font-size: 11px;
    color: var(--text-muted);
    transition: transform 0.3s ease;
}

.rig-section-header.expanded::after { transform: rotate(180deg); }

.rig-section-content {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    padding: 0 16px;
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
}

/* -----------------------------------------------
   Select / Clear buttons
   ----------------------------------------------- */
.rig-select-clear {
    margin: 10px 0 4px;
    display: flex;
    justify-content: flex-end;
    gap: 6px;
}

.rig-select-clear button {
    background: transparent;
    border: 1.5px solid #c7d2fe;
    padding: 4px 13px;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: var(--radius-pill);
    margin: 0;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}

/* Select All — green */
#category-select-all, #neighborhood-select-all, #price-select-all {
    color: var(--green);
    border-color: rgba(5, 150, 105, 0.4);
}
#category-select-all:hover, #neighborhood-select-all:hover, #price-select-all:hover {
    background: var(--green);
    color: #fff;
    border-color: var(--green);
    transform: none;
    box-shadow: none;
}

/* Clear All — red */
#category-clear-all, #neighborhood-clear-all, #price-clear-all {
    color: var(--red);
    border-color: rgba(220, 38, 38, 0.35);
}
#category-clear-all:hover, #neighborhood-clear-all:hover, #price-clear-all:hover {
    background: var(--red);
    color: #fff;
    border-color: var(--red);
    transform: none;
    box-shadow: none;
}

/* -----------------------------------------------
   Tree / Checkbox styles
   ----------------------------------------------- */

/* -- Expand chevron -------------------------------- */
.expand-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.22s ease;
    cursor: pointer;
    font-size: 0; /* hide the ▸ text character */
    order: 2;    /* sits to the right of the label text inside .tree-header */
    margin-left: 4px;
}

.expand-icon::before {
    content: '';
    display: block;
    width: 5px;
    height: 5px;
    border-right: 2px solid currentColor; /* inherits state color from parent */
    border-bottom: 2px solid currentColor;
    border-radius: 1px;
    opacity: 0.65;
    transform: rotate(-45deg); /* right-pointing → rotates to down when expanded */
}

/* -- Tier group (Seattle / Greater Seattle Area / Tacoma) ----- */
.tier-group + .tier-group {
    margin-top: 6px;
    padding-top: 14px;
    border-top: 1px solid var(--border-light);
}

.tier-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
    padding: 2px 2px 8px;
}

.tier-label {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-light);
    transition: color var(--transition);
}

.tier-header:hover .tier-label {
    color: var(--text-muted);
}

.tier-body {
    margin-bottom: 4px;
}

/* -- Parent expandable pill ----------------------- */
.tree-parent {
    width: 100%;
    margin-bottom: 8px;
}

.tree-header {
    display: inline-flex;  /* auto-width pill, same language as children */
    vertical-align: top;   /* eliminates the baseline descender gap inside the block parent */
    align-items: center;
    gap: 0;
    padding: 6px 12px 6px 10px;
    border-radius: var(--radius-pill);
    cursor: pointer;
    user-select: none;
    background: var(--surface-2);
    border: 2px solid var(--border);
    color: var(--text-muted);
    transition: background var(--transition), border-color var(--transition),
                box-shadow var(--transition), color var(--transition);
}

.tree-header:hover {
    border-color: var(--text-muted);
    box-shadow: var(--shadow-xs);
    color: var(--text);
}

/* Partial selection — some children checked */
.tree-header:has(input.parent-checkbox:indeterminate) {
    border-color: var(--amber);
    background: rgba(217, 119, 6, 0.08);
    color: var(--amber);
}

/* Full selection — all children checked */
.tree-header:has(input.parent-checkbox:checked) {
    border-color: var(--primary);
    background: rgba(232, 93, 4, 0.10);
    color: var(--primary);
}

/* Cosmetic only: this big-neighborhood polygon contains the user's set travel-time
   location. Independent of checkbox selection and of the haversine distance filter.
   Suppressed once a pill is actually selected/partially-selected — that state is more
   actionable and takes visual priority over this hint. */
.tree-header.nbhd-in-range:not(:has(input.parent-checkbox:checked)):not(:has(input.parent-checkbox:indeterminate)) {
    border-color: var(--blue);
    background: rgba(37, 99, 235, 0.08);
    color: var(--blue);
}

.tree-header label {
    display: inline-flex !important;
    align-items: center;
    gap: 0;
    order: 1;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0.875rem;
    font-weight: 700;
    color: inherit; /* picks up state color from .tree-header */
    cursor: pointer;
    line-height: 1.4;
    letter-spacing: -0.01em;
}

/* Parent checkbox — hidden; state shown via .parent-select-toggle */
.tree-header label input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
    pointer-events: none;
}

/* -- Parent selection circle (always visible) ----- */
.parent-select-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1.5px solid currentColor;
    font-size: 0;           /* no content when empty */
    flex-shrink: 0;
    order: 0;               /* leftmost inside the pill */
    margin-right: 6px;
    cursor: pointer;
    opacity: 0.35;          /* subtle when nothing selected */
    transition: background var(--transition), opacity var(--transition), font-size var(--transition);
}

/* Partial selection: filled amber circle with − */
.tree-header:has(input.parent-checkbox:indeterminate) .parent-select-toggle {
    background: currentColor;
    opacity: 1;
    font-size: 0.75rem;
    font-weight: 800;
}
.tree-header:has(input.parent-checkbox:indeterminate) .parent-select-toggle::before {
    content: '−';
    color: #fff;
}

/* Full selection: filled circle with ✓ */
.tree-header:has(input.parent-checkbox:checked) .parent-select-toggle {
    background: currentColor;
    opacity: 1;
    font-size: 0.6rem;
    font-weight: 800;
}
.tree-header:has(input.parent-checkbox:checked) .parent-select-toggle::before {
    content: '✓';
    color: #fff;
}

/* -- Tree children — pill chip area --------------- */
.tree-children {
    display: none; /* JS toggles to block */
    padding: 6px 14px 0 14px; /* no bottom padding — tree-parent margin handles all inter-group spacing;
                                 right padding raised from 4px to match the left so wrapped pills get
                                 pleasant, balanced breathing room from both edges of the card */
    margin-left: 10px;
    border-left: 2px solid var(--border-light);
    margin-top: 6px;
}

/* Nested tree-parents (e.g. Japanese inside Asian's children) should use
   the same spacing as sibling child pills (3px each side) instead of the
   top-level group spacing (8px bottom). */
.tree-children .tree-parent {
    margin-top: 3px;
    margin-bottom: 3px;
}

/* Connector line follows selection state */
.tree-parent:has(input.parent-checkbox:indeterminate) > .tree-children {
    border-left-color: rgba(217, 119, 6, 0.35);
}

.tree-parent:has(input.parent-checkbox:checked) > .tree-children {
    border-left-color: rgba(232, 93, 4, 0.35);
}

/* -- Leaf/child checkbox → pill chip -------------- */
label:has(input.child-checkbox) {
    display: inline-flex !important;
    align-items: center;
    position: relative;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    background: var(--surface-2);
    border: 1.5px solid var(--border);
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
    white-space: nowrap;
    width: auto !important;
    margin: 3px !important;
    line-height: 1.5;
    user-select: none;
}

label:has(input.child-checkbox):hover {
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(232, 93, 4, 0.06);
}

label:has(input.child-checkbox):has(input:checked) {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    box-shadow: 0 2px 8px var(--primary-glow);
}

/* Visually hide native checkbox inside leaf pills */
label:has(input.child-checkbox) input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
    pointer-events: none;
}

/* -- Price pills (large, always-visible row) ------ */
#price-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px 0 8px;
}

#price-options label {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    position: relative;
    min-width: 52px;
    padding: 7px 16px;
    border-radius: var(--radius-pill);
    background: var(--surface-2);
    border: 2px solid var(--border);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-muted);
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
    white-space: nowrap;
    width: auto !important;
    margin: 0 !important;
    user-select: none;
    letter-spacing: 0.03em;
}

#price-options label:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(232, 93, 4, 0.06);
}

#price-options label:has(input:checked) {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    box-shadow: 0 2px 8px var(--primary-glow);
}

#price-options label input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
    pointer-events: none;
}

/* -- Native checkbox (visible: parent rows only) -- */
input[type="checkbox"] {
    margin-right: 6px;
    width: 15px;
    height: 15px;
    accent-color: var(--primary);
    cursor: pointer;
    vertical-align: middle;
    flex-shrink: 0;
}

/* -- Search inputs inside filter panels ----------- */
#category-options input:not([type="checkbox"]),
#neighborhood-tree input:not([type="checkbox"]) {
    border: 1.5px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
    padding: 7px 12px !important;
    font-size: 0.875rem !important;
    font-family: inherit !important;
    color: var(--text) !important;
    background: var(--surface) !important;
    outline: none !important;
    transition: border-color var(--transition), box-shadow var(--transition) !important;
}

#category-options input:not([type="checkbox"]):focus,
#neighborhood-tree input:not([type="checkbox"]):focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px var(--primary-glow) !important;
}

/* -- Autocomplete suggestion dropdown ------------- */
.search-suggestions {
    border-radius: var(--radius-sm) !important;
    border: 1.5px solid var(--border) !important;
    box-shadow: var(--shadow) !important;
    background: var(--surface) !important;
    overflow: hidden; /* clips hover bg to rounded corners; inline overflow-y:auto still applies */
}

.search-suggestion-item,
.search-suggestions > div {
    font-size: 0.875rem;
    font-family: inherit;
    text-align: left;
    border-top: 1px solid var(--border-light);
    color: var(--text);
    padding: 6px 10px;
    cursor: pointer;
    transition: background-color var(--transition), color var(--transition);
}

.search-suggestion-item:first-child,
.search-suggestions > div:first-child { border-top: none; }

.search-suggestion-item:hover,
.search-suggestions > div:hover {
    background-color: var(--surface-2) !important;
    color: var(--primary) !important;
}

/* -----------------------------------------------
   Quick Filters (Open Now)
   ----------------------------------------------- */
.quick-filters {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin: 6px 0 10px;
    flex-wrap: wrap;
}

.osm-attribution {
    text-align: center;
    font-size: 0.7rem;
    color: var(--text-muted, #888);
    margin: 4px 0 12px;
}

.osm-attribution a {
    color: inherit;
    text-decoration: underline;
}

.quick-filters label {
    display: inline-flex !important;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    width: auto !important;
    margin: 0 !important;
    padding: 7px 16px !important;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text);
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-pill);
    transition: border-color var(--transition), background var(--transition);
}

.quick-filters label:hover {
    border-color: var(--primary);
    background: rgba(232, 93, 4, 0.08);
}

.quick-filters label:has(input:checked) {
    border-color: var(--primary);
    background: rgba(232, 93, 4, 0.12);
    color: var(--primary);
}


/* -----------------------------------------------
   Distance filter (inside Neighborhood section)
   ----------------------------------------------- */
.distance-filter {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border-light);
}

/* Travel-time is now the first real section in the Neighborhood card (right after the
   Select All/Clear All row, which createToggleSelectButton always inserts as the actual
   first child) — flip its divider to the bottom instead of floating a top border with
   nothing above it to divide. NOTE: `.distance-filter` is NOT `:first-child` here — the
   select/clear button row is — so this must target the adjacent-sibling relationship,
   not :first-child (a :first-child version of this rule silently never matched).
   Uses --border (not the near-invisible --border-light) and extra weight/gap so it
   reads as a clear break from the search box / neighborhood pills below, even when
   travel-time is collapsed. */
#neighborhood-tree > .rig-select-clear + .distance-filter {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
    margin-bottom: 26px;
    padding-bottom: 14px;
    border-bottom: 1.5px solid var(--border);
}

.distance-filter-header {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    padding: 8px 12px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text);
    cursor: pointer;
    user-select: none;
    background: var(--surface-2);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    transition: border-color var(--transition), background var(--transition), color var(--transition);
}

.distance-filter-header:hover {
    border-color: var(--primary);
    background: rgba(232, 93, 4, 0.05);
}

.distance-filter-header:has(input:checked) {
    border-color: var(--primary);
    background: rgba(232, 93, 4, 0.08);
    color: var(--primary);
}

.distance-filter-caret {
    margin-left: auto;
    display: inline-block;
    font-size: 0.85rem;
    transition: transform 0.2s ease;
    transform: rotate(-90deg);
}

.distance-filter-header:has(input:checked) .distance-filter-caret {
    transform: rotate(0deg);
}

.distance-filter-header input[type="checkbox"] {
    accent-color: var(--primary);
    cursor: pointer;
}

.distance-body-hint {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-bottom: 10px;
    padding: 6px 10px;
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--primary);
    line-height: 1.4;
}

.distance-filter-body {
    margin-top: 10px;
}

.distance-mode-row {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
}

.distance-mode-btn {
    flex: 1;
    padding: 5px 8px;
    font-size: 0.78rem;
    border-radius: var(--radius-pill);
    border: 1.5px solid var(--border);
    background: var(--surface-2);
    color: var(--text-muted);
    cursor: pointer;
    font-weight: 600;
    transition: background var(--transition), border-color var(--transition), color var(--transition);
}

.distance-mode-btn.active {
    border-color: var(--primary);
    background: rgba(232, 93, 4, 0.10);
    color: var(--primary);
}

.distance-mode-btn:hover:not(.active) {
    border-color: var(--text-muted);
    color: var(--text);
    background: var(--surface-2);
    transform: none;
    box-shadow: none;
}

.distance-slider-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.distance-slider {
    flex: 1;
    accent-color: var(--primary);
    cursor: pointer;
}

.distance-label {
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--primary);
    min-width: 46px;
    text-align: right;
}

.distance-location-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.distance-loc-btn {
    font-size: 0.75rem;
    padding: 5px 10px;
    border-radius: var(--radius-pill);
    background: var(--surface-2);
    border: 1.5px solid var(--border);
    color: var(--text);
    cursor: pointer;
    white-space: nowrap;
    font-weight: 500;
    transition: border-color var(--transition), background var(--transition);
}

.distance-loc-btn:hover:not(:disabled) {
    border-color: var(--primary);
    background: rgba(194, 65, 12, 0.08);
    color: var(--text);
    transform: none;
    box-shadow: none;
}

.distance-or {
    font-size: 0.72rem;
    color: var(--text-light);
    flex-shrink: 0;
}

.addr-ac-wrap {
    position: relative;
    flex: 1;
    min-width: 100px;
}

.distance-address-input {
    width: 100%;
    padding: 5px 10px;
    border-radius: var(--radius-pill);
    border: 1.5px solid var(--border);
    background: var(--surface);
    font-size: 0.75rem;
    color: var(--text);
    outline: none;
    transition: border-color var(--transition);
}

.distance-address-input:focus {
    border-color: var(--primary);
}

.addr-suggestions {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
    z-index: 200;
    overflow: hidden;
    display: none;
}

.addr-suggestion-item {
    padding: 7px 12px;
    cursor: pointer;
    border-top: 1px solid var(--border-light);
    text-align: left;
    transition: background var(--transition);
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.addr-suggestion-item:first-child { border-top: none; }

.addr-suggestion-item:hover,
.addr-suggestion-item.focused {
    background: var(--surface-2);
}

.addr-suggestion-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text);
}

.addr-suggestion-detail {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.distance-address-btn {
    font-size: 0.75rem;
    padding: 5px 12px;
    border-radius: var(--radius-pill);
    background: var(--primary);
    color: #fff;
    border: none;
    cursor: pointer;
    font-weight: 700;
    transition: background var(--transition);
}

.distance-address-btn:hover {
    background: var(--primary-dark, #c94d00);
    transform: none;
    box-shadow: none;
}

.distance-status-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 20px;
}

.distance-status {
    flex: 1;
    font-size: 0.72rem;
    color: var(--text-muted);
    font-style: italic;
}

.distance-status.error   { color: var(--red); font-style: normal; }
.distance-status.success { color: var(--green); font-style: normal; }

.distance-reset-btn {
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: color var(--transition), border-color var(--transition);
}

.distance-reset-btn:hover {
    color: var(--red);
    border-color: var(--red);
    background: transparent;
    transform: none;
    box-shadow: none;
}

/* -----------------------------------------------
   Restaurant count pill
   ----------------------------------------------- */
#restaurant-count {
    display: inline-block;
    margin: 6px 0;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-muted);
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-pill);
    padding: 4px 18px;
}

/* -----------------------------------------------
   Presets bar
   ----------------------------------------------- */
.presets-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 6px auto 8px;
    max-width: 900px;
    padding: 0 16px;
    min-height: 0;
}

.preset-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(99, 102, 241, 0.15); color: var(--accent-mid); border: 1px solid rgba(99, 102, 241, 0.25);
    border: 1.5px solid #c7d2fe;
    border-radius: var(--radius-pill);
    padding: 5px 12px 5px 14px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition);
    margin: 0;
}

.preset-chip:hover:not(:disabled) {
    background: rgba(99, 102, 241, 0.22);
    border-color: #818cf8;
    transform: none;
    box-shadow: none;
}

.preset-delete {
    background: transparent;
    border: none;
    color: #818cf8;
    font-size: 0.9rem;
    padding: 0;
    margin: 0;
    cursor: pointer;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    font-weight: 700;
}

.preset-delete:hover:not(:disabled) {
    color: #db2777;
    background: transparent;
    transform: none;
    box-shadow: none;
}

.preset-save-btn {
    background: var(--accent-mid);
    color: #fff;
    border: none;
    padding: 6px 16px;
    font-size: 0.82rem;
    font-weight: 700;
    border-radius: var(--radius-pill);
    cursor: pointer;
    margin: 0;
}

.preset-save-btn:hover:not(:disabled) {
    background: var(--accent);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: var(--shadow-xs);
}

/* -----------------------------------------------
   Streak badge
   ----------------------------------------------- */
.streak-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(232, 93, 4, 0.12);
    color: #c2410c;
    font-size: 0.78rem;
    font-weight: 750;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    border: 1.5px solid rgba(232, 93, 4, 0.30);
    letter-spacing: 0.01em;
}

/* -----------------------------------------------
   Auth bar
   ----------------------------------------------- */
.auth-bar {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--bg);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border);
    padding: 8px 20px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    gap: 10px;
}

/* -----------------------------------------------
   Top Bar Brand Logo (CityNOMNOM)
   ----------------------------------------------- */
.top-bar-logo,
.top-bar-logo:visited {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--primary);
    text-decoration: none;
    user-select: none;
    margin-right: auto;
    flex-shrink: 0;
    min-height: 44px;
    padding: 3px 6px;
    margin-left: -4px;
    border-radius: var(--radius-sm);
    transition: background-color var(--transition);
}

.top-bar-logo:hover {
    background-color: var(--surface-2);
    text-decoration: none;
}

.top-bar-logo:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
}

.top-bar-logo-icon {
    display: flex;
    flex-shrink: 0;
    line-height: 0;
}

.top-bar-logo-icon svg {
    display: block;
    width: 36px;
    height: 36px;
}

.top-bar-logo-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    font-family: 'Inter', Arial, sans-serif;
    line-height: 1;
    white-space: nowrap;
}

.top-bar-logo-text .logo-city {
    color: var(--text-muted);
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.24em;
    text-transform: uppercase;
}

.top-bar-logo-text .logo-nomnom {
    color: var(--primary);
    font-size: 1.125rem;
    font-weight: 800;
    letter-spacing: -0.055em;
}

.auth-utilities {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.auth-utilities .sound-toggle-btn,
.auth-utilities .theme-toggle-btn {
    margin: 0;
}

.mobile-menu-btn {
    display: none;
}

.mobile-menu-drawer {
    display: none;
}

.sound-toggle-btn {
    background: var(--surface);
    color: var(--text);
    border: 1.5px solid var(--border);
    padding: 6px 12px;
    font-size: 0.95rem;
    line-height: 1;
    border-radius: var(--radius-pill);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition), transform var(--transition), border-color var(--transition), opacity var(--transition);
    margin: 0 8px 0 0;
}

.sound-toggle-btn:hover:not(:disabled) {
    background: var(--surface-2);
    color: var(--text);
    border-color: var(--primary);
    transform: translateY(-1px);
}

.sound-toggle-btn.muted {
    color: var(--text-light);
    opacity: 0.65;
    background: var(--surface-2);
    border-color: var(--border);
}


.auth-state {
    align-items: center;
    gap: 10px;
}

.sign-in-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--primary);
    color: #fff;
    border: none;
    padding: 8px 20px;
    font-size: 0.85rem;
    font-weight: 700;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: background var(--transition), transform var(--transition);
    margin: 0;
}

.sign-in-btn:hover {
    background: var(--primary-dark);
    transform: translateY(-1px);
}

.user-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border);
}

.user-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text);
}

.sign-out-btn {
    background: var(--surface);
    color: var(--text-muted);
    border: 1.5px solid var(--border);
    padding: 6px 13px;
    font-size: 0.78rem;
    font-weight: 650;
    border-radius: var(--radius-pill);
    margin: 0;
    cursor: pointer;
    transition: all var(--transition);
}
.sign-out-btn:hover:not(:disabled) {
    background: var(--surface-2);
    color: var(--red);
    border-color: var(--red);
    transform: none;
    box-shadow: none;
}

/* Sign-in dropdown */
.sign-in-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 16px;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 18px;
    width: 292px;
    z-index: 110;
}

.sign-in-brand-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}

.sign-in-brand-icon {
    display: flex;
    color: var(--primary);
    flex-shrink: 0;
}

.sign-in-brand-icon svg {
    display: block;
    width: 32px;
    height: 32px;
}

.sign-in-brand-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1;
}

.sign-in-brand-text .logo-city {
    color: var(--text-muted);
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.sign-in-brand-text .logo-nomnom {
    color: var(--primary);
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.05em;
}

.sign-in-brand-subtitle {
    font-size: 0.78rem;
    color: var(--text-light);
    margin: 0 0 14px 0;
    line-height: 1.35;
}

.sign-in-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    margin: 0 0 8px 0;
    background: var(--surface);
    color: var(--text);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition);
}

.sign-in-option:hover:not(:disabled) {
    background: var(--surface-2);
    border-color: #ccc;
    transform: none;
    box-shadow: none;
}

.provider-icon { width: 18px; height: 18px; flex-shrink: 0; }

.sign-in-divider {
    display: flex;
    align-items: center;
    margin: 12px 0;
    color: var(--text-light);
    font-size: 0.78rem;
}

.sign-in-divider::before,
.sign-in-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid var(--border);
}

.sign-in-divider span { padding: 0 10px; }

.email-form input[type="email"],
.email-form input[type="password"] {
    width: 100%;
    padding: 9px 13px;
    margin-bottom: 8px;
    font-size: 0.875rem;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    box-sizing: border-box;
    font-family: inherit;
    color: var(--text);
    background: var(--surface);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.email-form input[type="email"]:focus,
.email-form input[type="password"]:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-glow);
}

.email-form-actions {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

.email-form-actions button {
    flex: 1;
    padding: 8px 12px;
    font-size: 0.85rem;
}

.forgot-password-btn {
    background: transparent;
    border: none;
    color: var(--primary);
    font-size: 0.78rem;
    cursor: pointer;
    padding: 6px 0 0;
    margin: 0;
    text-decoration: underline;
    font-weight: 500;
}

.forgot-password-btn:hover:not(:disabled) {
    color: var(--primary-dark);
    background: transparent;
    transform: none;
    box-shadow: none;
}

.email-link-divider {
    display: flex;
    align-items: center;
    margin: 10px 0;
    color: var(--text-light);
    font-size: 0.75rem;
}

.email-link-divider::before,
.email-link-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid var(--border-light);
}

.email-link-divider span { padding: 0 8px; }

.email-link-btn {
    width: 100%;
    padding: 8px 12px;
    margin: 0;
    background: transparent;
    color: var(--accent-mid);
    border: 1.5px dashed #a5b4fc;
    border-radius: var(--radius-sm);
    font-size: 0.83rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}

.email-link-btn:hover:not(:disabled) {
    background: rgba(99, 102, 241, 0.12);
    color: var(--text);
    transform: none;
    box-shadow: none;
}

.email-link-sent {
    text-align: center;
    font-size: 0.8rem;
    color: var(--green);
    margin: 8px 0 0;
    padding: 0;
    font-weight: 600;
}

.history-toggle-btn {
    background: var(--surface);
    color: var(--text);
    border: 1.5px solid var(--border);
    padding: 6px 14px;
    font-size: 0.8rem;
    font-weight: 700;
    border-radius: var(--radius-pill);
    margin: 0;
    cursor: pointer;
    transition: all var(--transition);
}
.history-toggle-btn:hover:not(:disabled) {
    background: var(--surface-2);
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-1px);
    box-shadow: var(--shadow-xs);
}

/* -----------------------------------------------
   History panel (slide-in from right)
   ----------------------------------------------- */
.history-panel {
    position: fixed;
    top: 0;
    right: -420px;
    width: 380px;
    height: 100vh;
    background: var(--surface);
    box-shadow: var(--shadow-lg);
    z-index: 1050;
    display: flex;
    flex-direction: column;
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    border-left: 1px solid var(--border);
}

.history-panel.open { right: 0; }

.history-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}

.history-panel-header h2 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.02em;
}

.history-close-btn {
    background: transparent;
    border: none;
    font-size: 1.4rem;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
    margin: 0;
    line-height: 1;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background var(--transition), color var(--transition);
}

.history-close-btn:hover:not(:disabled) {
    background: var(--surface-2);
    color: var(--text);
    transform: none;
    box-shadow: none;
}

/* History stats bar */
.history-stats {
    display: flex;
    justify-content: space-around;
    padding: 10px 14px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.stat-number {
    font-size: 1.1rem;
    font-weight: 900;
    color: var(--text);
}

.stat-label {
    font-size: 1rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
}

.history-controls {
    display: flex;
    flex-direction: column;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border-light);
    gap: 8px;
}

.history-filters-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.history-filter {
    display: flex !important;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    cursor: pointer;
    white-space: nowrap;
    color: var(--text);
}

.history-search {
    flex: 1;
    padding: 6px 11px;
    font-size: 0.8rem;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: inherit;
    min-width: 0;
    color: var(--text);
    background: var(--surface);
    transition: border-color var(--transition);
}

.history-search:focus {
    outline: none;
    border-color: var(--primary);
}

.history-sort {
    padding: 6px 8px;
    font-size: 0.8rem;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: inherit;
    background: var(--surface);
    color: var(--text);
}

.history-list {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

.history-entry {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-light);
    text-align: left;
    transition: background var(--transition);
}

.history-entry:hover { background: var(--surface-2); }

.history-star {
    background: transparent;
    border: none;
    font-size: 1.4rem;
    cursor: pointer;
    padding: 0;
    margin: 3px 0 0 0;
    color: var(--border);
    line-height: 1;
    flex-shrink: 0;
    transition: color var(--transition), transform var(--transition);
}
.history-star:hover:not(:disabled) {
    color: #f59e0b;
    transform: scale(1.15);
    background: transparent;
    box-shadow: none;
}
.history-star.favorited {
    color: #f43f5e;
}

.history-star:hover:not(:disabled) {
    background: transparent;
    color: #f59e0b;
    transform: none;
    box-shadow: none;
}

.history-star.favorited { color: #db2777; }

.history-delete {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    margin: 2px 0 0 0;
    flex-shrink: 0;
    opacity: 0.65;
    line-height: 1;
    transition: all var(--transition);
}
.history-delete:hover {
    color: var(--red);
    opacity: 1;
    background: transparent;
    transform: scale(1.15);
}

.history-delete:hover {
    color: var(--red);
    opacity: 1;
    background: transparent;
    transform: none;
    box-shadow: none;
}

.history-delete-confirm {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 0.8rem;
    color: var(--text);
}

.history-confirm-yes {
    background: var(--red);
    color: #fff;
    border: none;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
}

.history-confirm-yes:hover {
    background: #b91c1c;
    transform: none;
    box-shadow: none;
}

.history-confirm-cancel {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border);
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    font-size: 0.78rem;
    cursor: pointer;
}

.history-confirm-cancel:hover {
    background: var(--surface-2);
    transform: none;
    box-shadow: none;
}

.history-entry-info { flex: 1; min-width: 0; }

.history-entry-name {
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: color var(--transition);
}

.history-entry-name:hover { color: var(--primary); }

.history-entry-meta {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 3px;
    font-weight: 550;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
}

.history-entry-details {
    display: none;
    margin-top: 6px;
    padding: 8px 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    color: var(--text);
    line-height: 1.6;
}
.history-entry-details a {
    color: var(--blue);
    font-weight: 600;
    text-decoration: underline;
}

.history-entry-details.open { display: block; }

.history-entry-details a {
    color: var(--blue);
    text-decoration: none;
    word-break: break-all;
}

.history-entry-details a:hover { text-decoration: underline; }

.history-spin-count {
    display: inline-block;
    background: rgba(99, 102, 241, 0.15); color: var(--accent-mid); border: 1px solid rgba(99, 102, 241, 0.25);
    font-size: 0.62rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: var(--radius-pill);
    margin-left: 6px;
    vertical-align: middle;
}

.history-city-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(16, 185, 129, 0.15); color: var(--green); border: 1px solid rgba(16, 185, 129, 0.3);
    font-size: 0.65rem;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: var(--radius-pill);
    margin-right: 6px;
    vertical-align: middle;
}

.history-entry-medals {
    display: flex;
    gap: 5px;
    margin-top: 6px;
}

.history-medal-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid transparent;
    background: var(--surface-2);
    font-size: 1.05rem;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.2s ease;
}

.history-medal-btn:hover:not(:disabled) {
    transform: scale(1.15);
    background: var(--border);
    box-shadow: none;
}

.history-medal-btn.selected {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--primary-glow);
}

.history-entry-time {
    font-size: 0.74rem;
    color: var(--text-muted);
    margin-top: 5px;
    font-weight: 600;
}

.history-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-top: 1px solid var(--border);
}

.history-pagination button {
    padding: 5px 16px;
    font-size: 0.78rem;
    border-radius: var(--radius-pill);
    background: var(--surface-2);
    color: var(--text);
    border: 1.5px solid var(--border);
}

.history-pagination button:hover:not(:disabled) {
    background: var(--surface-2);
    color: var(--primary);
    border-color: var(--primary);
    transform: none;
    box-shadow: none;
}

#history-page-info {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 600;
}

/* -----------------------------------------------
   Report Modal
   ----------------------------------------------- */
.modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(4px);
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.modal-content {
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: 28px;
    width: 100%;
    max-width: 460px;
    box-shadow: var(--shadow-lg);
    text-align: left;
    border: 1.5px solid var(--border);
}

.modal-content h2 {
    margin: 0 0 18px;
    font-size: 1.15rem;
    color: var(--text);
}

.form-group { margin-bottom: 16px; }

.form-group label {
    display: block !important;
    font-weight: 700;
    font-size: 0.75rem;
    margin-bottom: 5px;
    width: auto !important;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.form-group .required { color: var(--red); }
.form-group .optional  { font-size: 0.75rem; color: var(--text-muted); font-weight: 400; }

/* ── Suggest a Restaurant ──────────────────────────────────────────────────── */

.suggest-footer {
    text-align: center;
    margin: 32px 0 16px;
}

.suggest-btn {
    background: none;
    border: 1.5px dashed var(--border);
    color: var(--text-muted);
    font-size: 0.82rem;
    font-weight: 600;
    padding: 8px 20px;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: border-color var(--transition), color var(--transition);
}

.suggest-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: none;
    box-shadow: none;
    transform: none;
}

.suggest-intro {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0 0 16px;
}

.form-group input[type="text"],
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 9px 13px;
    font-size: 0.9rem;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    box-sizing: border-box;
    font-family: inherit;
    color: var(--text);
    background: var(--surface);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.form-group input[type="text"]:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-glow);
}

.form-group input[readonly] {
    background: var(--surface-2);
    color: var(--text-muted);
}

.form-group textarea { resize: vertical; }

.modal-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 20px;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary-dark), var(--primary));
    color: #fff;
    padding: 9px 22px;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 700;
    transition: opacity var(--transition), transform var(--transition), box-shadow var(--transition);
}

.btn-primary:hover:not(:disabled) {
    background: var(--accent-dark, var(--primary-dark));
    color: #ffffff;
    opacity: 0.95;
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.btn-secondary {
    background: var(--surface);
    color: var(--text-muted);
    border: 1.5px solid var(--border);
    padding: 9px 22px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
}

.btn-secondary:hover:not(:disabled) {
    background: var(--surface-2);
    color: var(--text);
    transform: none;
    box-shadow: none;
}

/* -----------------------------------------------
   Overlay backdrop
   ----------------------------------------------- */
.overlay-backdrop {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(2px);
    z-index: 1000;
}

/* -----------------------------------------------
   Toast notifications
   ----------------------------------------------- */
.toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 1200;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.toast {
    padding: 13px 20px;
    border-radius: var(--radius-sm);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    box-shadow: var(--shadow);
    animation: toastIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    max-width: 320px;
    border-left: 4px solid rgba(255, 255, 255, 0.30);
}

.toast.success { background: #064e3b; border-left-color: #34d399; }
.toast.error   { background: #7f1d1d; border-left-color: #f87171; }
.toast.info    { background: #1e3a5f; border-left-color: #60a5fa; }

.toast.fade-out { animation: toastOut 0.3s ease forwards; }

@keyframes toastIn {
    from { opacity: 0; transform: translateY(16px) scale(0.94); }
    to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

@keyframes toastOut {
    from { opacity: 1; transform: translateY(0)   scale(1);    }
    to   { opacity: 0; transform: translateY(8px) scale(0.95); }
}

/* -----------------------------------------------
   Mobile Auth Bar (<= 640px)
   ----------------------------------------------- */
@media (max-width: 640px) {
    .auth-bar {
        padding: 8px 14px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        width: 100%;
        box-sizing: border-box;
        overflow: visible;
    }

    /* Hide desktop inline utilities on mobile - they live in the drawer */
    .auth-bar .auth-utilities {
        display: none !important;
    }

    /* Signed-out state: Sign In button on right next to hamburger */
    #signed-out-state {
        display: flex;
        align-items: center;
        margin-left: auto;
        margin-right: 6px;
    }

    body:not(.signed-out) #signed-out-state {
        display: none !important;
    }

    body.signed-out #signed-in-state {
        display: none !important;
    }

    .sign-in-btn {
        padding: 7px 15px;
        font-size: 0.84rem;
        margin: 0;
        white-space: nowrap;
        font-weight: 650;
    }

    #sign-in-dropdown {
        right: 10px;
        top: calc(100% + 6px);
        max-width: calc(100vw - 20px);
        width: min(292px, calc(100vw - 20px));
    }

    .top-bar-logo {
        gap: 6px;
        padding: 2px 0;
        margin-left: 0;
    }

    .top-bar-logo-icon svg {
        width: 32px;
        height: 32px;
    }

    .top-bar-logo-text .logo-nomnom {
        font-size: 1rem;
    }

    /* Signed-in state on mobile: Show ONLY streak badge next to hamburger menu */
    #signed-in-state {
        display: flex !important;
        align-items: center;
        justify-content: flex-end;
        flex: 0 0 auto;
        margin-left: auto;
        margin-right: 6px;
        min-width: 0;
        padding: 0;
        gap: 0;
        overflow: visible;
    }

    #signed-in-state .passport-btn,
    #signed-in-state .privacy-btn,
    #signed-in-state .social-toggle-btn,
    #signed-in-state .history-toggle-btn,
    #signed-in-state .sign-out-btn,
    #signed-in-state .edit-profile-btn {
        display: none !important;
    }

    #signed-in-state .streak-badge {
        display: inline-flex !important;
        padding: 4px 10px;
        font-size: 0.82rem;
        font-weight: 700;
        margin: 0;
        border-radius: var(--radius-pill);
    }

    /* history.js only fills the badge when there is a streak; without one it stays empty. */
    #signed-in-state .streak-badge:empty {
        display: none !important;
    }

    /* Mobile Menu Trigger Button in top bar */
    .mobile-menu-btn {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        min-width: 40px;
        min-height: 40px;
        padding: 4px;
        background: var(--surface);
        border: 1.5px solid var(--border);
        border-radius: var(--radius-pill);
        color: var(--text);
        font-size: 1.25rem;
        cursor: pointer;
        transition: background var(--transition), border-color var(--transition), transform var(--transition);
        flex-shrink: 0;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    }

    .mobile-menu-btn:hover {
        background: var(--surface-2);
        border-color: var(--primary);
    }

    .mobile-menu-btn:active {
        transform: scale(0.94);
        background: var(--surface-2);
    }

    .mobile-menu-avatar {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        object-fit: cover;
        border: 1.5px solid var(--primary);
        display: block;
    }

    .mobile-menu-icon {
        line-height: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* ── Slide-Out Menu Drawer ──────────────────────── */
    .mobile-menu-drawer {
        position: fixed;
        top: 0;
        right: -100%;
        width: min(330px, 86vw);
        height: 100vh;
        height: 100dvh;
        background: var(--surface);
        box-shadow: -4px 0 28px rgba(0, 0, 0, 0.22);
        z-index: 1100;
        display: flex;
        flex-direction: column;
        transition: right 0.28s cubic-bezier(0.16, 1, 0.3, 1);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        border-left: 1px solid var(--border);
    }

    .mobile-menu-drawer.open {
        right: 0;
    }

    .mobile-drawer-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 18px;
        border-bottom: 1px solid var(--border);
        background: var(--surface-2);
    }

    .mobile-drawer-user {
        display: flex;
        align-items: center;
        gap: 12px;
        min-width: 0;
        flex: 1 1 auto;
    }

    .drawer-user-avatar {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        object-fit: cover;
        border: 2px solid var(--primary);
        flex-shrink: 0;
    }

    .drawer-user-meta {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

    .drawer-user-name {
        font-size: 0.98rem;
        font-weight: 750;
        color: var(--text);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .drawer-user-subtitle {
        font-size: 0.76rem;
        color: var(--text-muted);
        margin-top: 1px;
    }

    .mobile-drawer-close {
        background: var(--surface);
        border: 1.5px solid var(--border);
        color: var(--text-muted);
        font-size: 1.4rem;
        line-height: 1;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all var(--transition);
        flex-shrink: 0;
        margin-left: 10px;
    }

    .mobile-drawer-close:hover,
    .mobile-drawer-close:active {
        background: var(--surface-2);
        color: var(--text);
        border-color: var(--primary);
    }

    .mobile-drawer-body {
        padding: 16px 18px 32px;
        display: flex;
        flex-direction: column;
        gap: 18px;
        flex: 1 1 auto;
    }

    .drawer-section {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .drawer-section-title {
        font-size: 0.72rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--text-muted);
        padding-left: 4px;
        margin-bottom: 2px;
    }

    .drawer-item {
        display: flex;
        align-items: center;
        width: 100%;
        padding: 12px 14px;
        background: var(--surface);
        border: 1.5px solid var(--border);
        border-radius: var(--radius);
        cursor: pointer;
        text-align: left;
        transition: background var(--transition), border-color var(--transition), transform var(--transition);
        box-sizing: border-box;
    }

    .drawer-item:hover,
    .drawer-item:active {
        background: var(--surface-2);
        border-color: var(--primary);
        transform: translateY(-1px);
    }

    .drawer-item-icon {
        font-size: 1.25rem;
        width: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 12px;
        flex-shrink: 0;
    }

    .drawer-item-text {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

    .drawer-item-title {
        font-size: 0.92rem;
        font-weight: 700;
        color: var(--text);
    }

    .drawer-item-subtitle {
        font-size: 0.74rem;
        color: var(--text-muted);
        margin-top: 1px;
    }

    .drawer-item-arrow {
        font-size: 1.2rem;
        color: var(--text-light);
        font-weight: 700;
        margin-left: 8px;
    }

    .drawer-guest-banner {
        background: linear-gradient(135deg, rgba(232, 93, 4, 0.08), rgba(255, 159, 28, 0.12));
        border: 1.5px solid rgba(232, 93, 4, 0.25);
        border-radius: var(--radius);
        padding: 16px;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .drawer-guest-icon {
        font-size: 2rem;
    }

    .drawer-guest-text {
        font-size: 0.82rem;
        color: var(--text);
        line-height: 1.45;
        margin: 0;
    }

    .drawer-sign-in-btn {
        width: 100%;
        padding: 10px 16px;
        font-size: 0.9rem;
        font-weight: 700;
    }

    .drawer-setting-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 11px 14px;
        background: var(--surface-2);
        border: 1.5px solid var(--border);
        border-radius: var(--radius);
        gap: 12px;
        box-sizing: border-box;
    }

    .drawer-setting-info {
        display: flex;
        align-items: center;
        min-width: 0;
        flex: 1 1 auto;
    }

    .drawer-setting-label {
        font-size: 0.88rem;
        font-weight: 700;
        color: var(--text);
        display: block;
    }

    .drawer-setting-desc {
        font-size: 0.72rem;
        color: var(--text-muted);
        display: block;
        margin-top: 1px;
    }

    .drawer-toggle-switch {
        width: 48px;
        height: 28px;
        background: var(--border);
        border-radius: 14px;
        border: none;
        position: relative;
        cursor: pointer;
        padding: 0;
        transition: background 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        flex-shrink: 0;
    }

    .drawer-toggle-switch.active {
        background: var(--primary);
    }

    .drawer-switch-handle {
        display: block;
        width: 22px;
        height: 22px;
        background: #fff;
        border-radius: 50%;
        position: absolute;
        top: 3px;
        left: 3px;
        transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
        box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    }

    .drawer-toggle-switch.active .drawer-switch-handle {
        transform: translateX(20px);
    }

    .drawer-sign-out-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        padding: 12px;
        background: var(--surface);
        border: 1.5px solid var(--border);
        border-radius: var(--radius);
        color: var(--text-muted);
        font-size: 0.88rem;
        font-weight: 700;
        cursor: pointer;
        transition: all var(--transition);
        margin-top: 6px;
    }

    .drawer-sign-out-btn:hover,
    .drawer-sign-out-btn:active {
        background: rgba(239, 68, 68, 0.1);
        color: #ef4444;
        border-color: #ef4444;
    }
}

/* Dark mode overrides for drawer */
[data-theme="dark"] .mobile-menu-drawer {
    background: var(--bg);
    border-left: 1px solid var(--border);
    box-shadow: -4px 0 28px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .mobile-drawer-header {
    background: var(--surface);
}

[data-theme="dark"] .drawer-item {
    background: var(--surface);
    border-color: var(--border);
}

[data-theme="dark"] .drawer-item:hover,
[data-theme="dark"] .drawer-item:active {
    background: var(--surface-2);
}

[data-theme="dark"] .drawer-setting-row {
    background: var(--surface);
    border-color: var(--border);
}

/* -----------------------------------------------
   Responsive
   ----------------------------------------------- */
@media (max-width: 480px) {
    h1 { font-size: 2rem; margin-top: 1rem; }

    .reel {
        width: 96px;
        height: 96px;
        font-size: 0.78rem;
        padding: 8px;
    }

    #spin-button {
        padding: 14px 42px;
        font-size: 1.05rem;
    }

    .rig-options > div { flex: 1 1 100%; }

    button { padding: 9px 14px; font-size: 0.875rem; }

    .result-container {
        width: calc(100% - 24px);
        padding: 14px 16px;
    }

    .result-actions {
        flex-direction: column;
        align-items: center;
        gap: 10px;
        padding: 12px;
    }

    .medal-btn { width: 42px; height: 42px; font-size: 1.2rem; }

    .history-panel { width: 100vw; right: -100vw; }

    .modal-content { width: calc(100% - 24px); padding: 20px 16px; }

    .toast-container { right: 12px; left: 12px; bottom: 12px; }
    .toast { max-width: none; }
}

@media (min-width: 481px) and (max-width: 768px) {
    .reel { width: 130px; height: 130px; }
    .rig-options > div { flex: 1 1 45%; }
    .history-panel { width: 340px; right: -340px; }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .rig-options > div { flex: 1 1 30%; }
}

@media (min-width: 769px) {
    .photo-strip {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        overflow: visible;
    }

    .enriched-photo {
        width: 100%;
        height: 160px;
        object-fit: cover;
        flex-shrink: unset;
    }
}

/* -----------------------------------------------
   City Selector
   ----------------------------------------------- */

.city-selector-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 8px 0 20px;
}

.city-map-btn {
    background: none;
    border: 2px solid #d1d5db;
    border-radius: 999px;
    width: 34px;
    height: 34px;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s, background 0.15s;
    flex-shrink: 0;
}

.city-map-btn:hover:not(:disabled) {
    border-color: var(--primary);
    background: rgba(194, 65, 12, 0.08);
    color: var(--text);
    transform: none;
    box-shadow: none;
}

.city-selector {
    padding: 6px 28px 6px 14px; border-radius: var(--radius-pill); border: 1.5px solid var(--border); background: var(--surface); color: var(--text);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7280' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    transition: border-color 0.15s;
}

.city-selector:hover {
    border-color: var(--primary);
}
.city-selector:focus-visible {
    border-color: var(--primary);
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* -----------------------------------------------
   City Picker — searchable, region-grouped city switcher
   ----------------------------------------------- */
.city-picker {
    position: relative;
}

.city-picker-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    border: 1.5px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-size: 0.9rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.15s;
}

.city-picker-trigger:hover,
.city-picker-trigger[aria-expanded="true"] {
    border-color: var(--primary);
}
.city-picker-trigger:focus-visible {
    border-color: var(--primary);
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.city-picker-chevron {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.city-picker-dropdown[hidden] {
    display: none;
}

.city-picker-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    width: 260px;
    max-width: 80vw;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    z-index: 1050;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.city-picker-search {
    margin: 8px;
    padding: 7px 10px;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-size: 0.85rem;
    font-family: inherit;
}

.city-picker-search:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-glow);
}

.city-picker-list {
    max-height: 320px;
    overflow-y: auto;
    padding-bottom: 6px;
}

.city-picker-group-label {
    padding: 8px 12px 4px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.city-picker-item {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    padding: 7px 12px;
    border: none;
    background: none;
    color: var(--text);
    font-size: 0.88rem;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.12s;
}

.city-picker-item:hover,
.city-picker-item:focus {
    background: var(--surface-2);
    outline: none;
}

.city-picker-item.active {
    font-weight: 700;
}

#city-picker-current {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.city-picker-badge-icon {
    flex-shrink: 0;
}

.city-picker-item-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 6px;
    flex-shrink: 0;
}

.city-picker-item-emoji {
    display: inline-block;
    width: 1.3em;
    text-align: center;
}

.city-picker-check {
    margin-left: auto;
    color: var(--primary, #c2410c);
}

.city-picker-empty {
    padding: 14px 12px;
    font-size: 0.85rem;
    color: var(--text-muted);
    text-align: center;
}

/* -----------------------------------------------
   Custom Landmark City Vector Badges
   ----------------------------------------------- */
.city-badge-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    flex-shrink: 0;
    line-height: 1;
    transition: transform 0.16s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.city-badge-svg {
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
    vertical-align: middle;
    display: block;
    flex-shrink: 0;
}

[data-theme="dark"] .city-badge-svg {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.city-picker-trigger:hover .city-badge-svg,
.city-picker-item:hover .city-badge-svg,
.passport-ribbon-tab:hover .city-badge-svg,
.stamps-scope-pill:hover .city-badge-svg,
.public-stamps-filter-chip:hover .city-badge-svg {
    transform: scale(1.12);
}

.passport-city-badge-svg {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.customs-hero-badge-svg {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* -----------------------------------------------
   City Map Modal
   ----------------------------------------------- */

.city-map-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 1100;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.city-map-inner {
    background: var(--surface); color: var(--text); border-radius: 16px; border: 1.5px solid var(--border); box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 720px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.city-map-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #e5e7eb;
    flex-shrink: 0;
}

.city-map-header h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
}

.city-map-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--text-muted);
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 6px;
    transition: background 0.15s, color 0.15s;
}

.city-map-close:hover {
    background: var(--surface-2);
    color: var(--text);
}

.city-map-container {
    flex: 1;
    min-height: 400px;
    width: 100%;
}

@media (max-width: 480px) {
    .city-map-inner {
        max-height: 85vh;
        border-radius: 12px;
    }
    .city-map-container {
        min-height: 300px;
    }
}

/* ── Neighborhood Map View ── */
.neighborhood-map-section {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border-light);
}
.map-filter-header {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-muted);
    cursor: pointer;
    user-select: none;
}
.map-filter-header input[type="checkbox"] {
    accent-color: var(--primary);
    cursor: pointer;
}
.neighborhood-map-body {
    margin-top: 10px;
}
.nbhd-map {
    height: 260px;
    width: 100%;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-xs);
}

.nbhd-map-loading {
    font-size: 0.78rem;
    color: var(--text-muted);
    text-align: center;
    padding: 10px 0 4px;
    font-style: italic;
}

/* Clickable polygon areas */
.nbhd-poly {
    cursor: pointer;
    transition: opacity 0.15s;
}
/* Hover tooltip for neighborhood name */
.nbhd-tip {
    font-size: 0.72rem;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid var(--border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    color: var(--text);
    border-radius: 6px;
    padding: 4px 10px;
    white-space: nowrap;
}
.nbhd-tip::before { display: none; }

/* ===============================================
   SOCIAL FEATURES
   =============================================== */

/* ── Privacy button ─────────────────────────────── */
.privacy-btn {
    font-size: 0.74rem;
    font-weight: 700;
    padding: 5px 11px;
    border-radius: var(--radius-pill);
    border: 1.5px solid var(--border);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--transition);
}
.privacy-btn:hover:not(:disabled) {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--surface-2);
    box-shadow: none;
    transform: none;
}
.privacy-btn.privacy-private {
    border-color: var(--amber);
    color: var(--amber);
}

/* ── Friends / Social button ────────────────────── */
.social-toggle-btn {
    font-size: 0.78rem;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: var(--radius-pill);
    border: 1.5px solid var(--border);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--transition);
}
.social-toggle-btn:hover:not(:disabled) {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--surface-2);
    box-shadow: none;
    transform: none;
}

/* ── Spin Together button ───────────────────────── */
.spin-together-btn {
    background: transparent;
    border: 1.5px solid var(--primary);
    color: var(--primary);
    font-weight: 700;
}
.spin-together-btn:hover:not(:disabled) { background: rgba(194, 65, 12, 0.08); color: var(--primary); box-shadow: none; transform: none; }

/* ── Session bar ────────────────────────────────── */
.session-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin: 8px auto 0;
    max-width: 500px;
    padding: 8px 16px;
    background: rgba(232, 93, 4, 0.07);
    border: 1.5px solid var(--primary);
    border-radius: var(--radius-pill);
    font-size: 0.8rem;
    color: var(--primary);
    font-weight: 600;
}
.session-action-btn {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    border: 1.5px solid var(--primary);
    background: transparent;
    color: var(--primary);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--transition);
}
.session-action-btn:hover:not(:disabled) { background: rgba(194, 65, 12, 0.12); color: var(--primary); box-shadow: none; transform: none; }
.session-leave-btn { border-color: var(--text-muted); color: var(--text-muted); }
.session-leave-btn:hover:not(:disabled) { border-color: var(--red); color: var(--red); background: transparent; }

/* ── Social Panel (slides from left) ───────────── */
.social-panel {
    position: fixed;
    top: 0;
    left: 0;
    width: 340px;
    max-width: 92vw;
    height: 100vh;
    background: var(--surface);
    box-shadow: var(--shadow-lg);
    z-index: 1100;
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}
.social-panel.open { transform: translateX(0); }

.social-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--border-light);
    flex-shrink: 0;
}
.social-panel-header h2 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 800;
}

.social-search-row {
    display: flex;
    gap: 8px;
    padding: 12px 16px 8px;
    flex-shrink: 0;
}
.social-search-input {
    flex: 1;
    padding: 7px 12px;
    font-size: 0.82rem;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-pill);
    outline: none;
    font-family: inherit;
    background: var(--surface-2);
    color: var(--text);
    transition: border-color var(--transition);
}
.social-search-input:focus { border-color: var(--primary); }
.social-search-btn {
    font-size: 0.78rem;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    background: var(--primary);
    color: #fff;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--transition);
}
.social-search-btn:hover { background: var(--primary-dark); box-shadow: none; transform: none; }

.social-search-results {
    padding: 0 16px 6px;
    flex-shrink: 0;
    max-height: 160px;
    overflow-y: auto;
}

.search-result-entry {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    transition: background var(--transition);
}
.search-result-entry:hover { background: var(--surface-2); }

/* Follow requests + followers (only shown when there are any) */
.social-followers {
    padding: 4px 16px 8px;
    border-bottom: 1px solid var(--border-light);
    flex-shrink: 0;
    max-height: 40%;
    overflow-y: auto;
}
.social-section-title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
    margin: 8px 0 4px;
}
.social-followers-list summary { cursor: pointer; }
.follower-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
}
.follower-name {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    text-align: left;
}
.follower-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.follower-name:hover { box-shadow: none; transform: none; color: var(--primary); }
.follower-actions { display: flex; gap: 6px; flex-shrink: 0; }
.follower-btn {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 5px 10px;
    border-radius: var(--radius-pill);
    border: 1.5px solid var(--border);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
}
.follower-btn:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); box-shadow: none; transform: none; }
.follower-btn.follower-approve { background: var(--primary); border-color: var(--primary); color: #fff; }
.follower-btn.follower-approve:hover:not(:disabled) { background: var(--primary-dark); color: #fff; }
.social-request-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    margin-left: 6px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--primary);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 800;
    line-height: 1;
}

.social-feed-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}

.feed-entry {
    padding: 12px 20px;
    border-bottom: 1px solid var(--border-light);
}
.feed-entry:last-child { border-bottom: none; }

.feed-user {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    cursor: pointer;
}
.feed-username {
    font-weight: 700;
    font-size: 0.82rem;
    color: var(--primary);
}
.feed-username:hover { text-decoration: underline; }

.feed-restaurant {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text);
    margin-bottom: 2px;
}
.feed-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.feed-avatar, .feed-avatar-placeholder {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.feed-avatar-placeholder {
    background: var(--primary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 800;
}

.social-loading, .social-empty {
    padding: 20px;
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.5;
}

/* ── Profile Modal ──────────────────────────────── */
.profile-modal-content {
    position: relative;
    max-width: 420px;
    width: 100%;
}
.profile-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: none;
    border: none;
    font-size: 1.4rem;
    cursor: pointer;
    color: var(--text-muted);
    line-height: 1;
    padding: 4px;
}
.profile-modal-close:hover { color: var(--text); background: none; box-shadow: none; transform: none; }

.profile-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
    padding-right: 32px;
}
.profile-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.profile-avatar-placeholder {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    font-weight: 800;
    flex-shrink: 0;
}
.profile-name {
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--text);
}
.profile-private-note {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: 4px 0 0;
}
.profile-follow-btn {
    margin-left: auto;
    font-size: 0.82rem;
    padding: 6px 16px;
    white-space: nowrap;
}
.profile-spins-title {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
    margin: 0 0 8px;
}
.profile-spins {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.profile-spin-entry {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 10px;
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
}
.profile-spin-name { font-weight: 700; color: var(--text); }
.profile-spin-meta { font-size: 0.75rem; color: var(--text-muted); }

/* ── Profile Favorite Foods (view) ──────────────────────────────── */
.profile-fav-foods {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0 0 14px;
}
.profile-fav-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-right: 2px;
}
.profile-fav-chip {
    background: var(--primary-glow);
    color: var(--primary-dark);
    border-radius: var(--radius-pill);
    font-size: 0.78rem;
    font-weight: 600;
    padding: 3px 10px;
}

/* ── Edit Profile Button (auth bar) ──────────────────────────────── */
.edit-profile-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    padding: 2px 4px;
    cursor: pointer;
    border-radius: var(--radius-sm);
    color: var(--text);
    font: inherit;
    transition: background 0.15s;
}
.edit-profile-btn:hover:not(:disabled) { background: var(--surface-2); color: var(--text); box-shadow: none; transform: none; }
.edit-profile-btn .user-avatar { margin: 0; }
.edit-profile-btn .user-name { margin: 0; }

/* ── Edit Profile Modal ──────────────────────────────────────────── */
.edit-profile-content {
    max-width: 440px;
    width: 100%;
    position: relative;
}
.edit-profile-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--text);
    margin: 0 0 20px;
}
.edit-avatar-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}
.edit-avatar-wrap {
    flex-shrink: 0;
}
.edit-avatar-img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center center;
    border: 2px solid var(--border);
}
.edit-avatar-placeholder {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    font-weight: 800;
}
.edit-avatar-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.avatar-upload-label {
    display: inline-block;
    padding: 7px 14px;
    border-radius: var(--radius-pill);
    background: var(--surface-2);
    border: 1.5px solid var(--border);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    transition: background 0.15s;
    text-align: center;
}
.avatar-upload-label:hover { background: var(--border); }
.avatar-remove-btn {
    padding: 5px 12px;
    border-radius: var(--radius-pill);
    background: none;
    border: 1.5px solid var(--border);
    font-size: 0.78rem;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}
.avatar-remove-btn:hover { color: var(--red); border-color: var(--red); background: none; box-shadow: none; transform: none; }

/* ── Food Character Avatar Picker ───────────────────────────────── */
.food-avatar-picker {
    margin-bottom: 20px;
    background: var(--surface-2);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md, 12px);
    overflow: hidden;
    transition: border-color var(--transition);
}
.food-avatar-picker[open] {
    border-color: var(--primary);
}
.food-avatar-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--text);
    cursor: pointer;
    user-select: none;
    list-style: none;
}
.food-avatar-summary::-webkit-details-marker {
    display: none;
}
.food-avatar-summary::after {
    content: "▾";
    font-size: 0.95rem;
    color: var(--text-muted);
    transition: transform 0.2s ease;
}
.food-avatar-picker[open] .food-avatar-summary::after {
    transform: rotate(180deg);
}
.avatar-count-badge {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--primary);
    background: rgba(232, 93, 4, 0.12);
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    margin-left: auto;
    margin-right: 10px;
}
.food-avatar-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    padding: 12px 14px 10px;
    max-height: 250px;
    overflow-y: auto;
    border-top: 1px solid var(--border);
    background: var(--surface);
}
@media (min-width: 420px) {
    .food-avatar-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}
.food-avatar-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 6px 4px 8px;
    background: var(--surface-2);
    border: 2px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s ease;
    outline: none;
}
.food-avatar-btn:hover {
    background: var(--surface);
    border-color: var(--border);
    transform: translateY(-2px);
}
.food-avatar-btn.selected {
    border-color: var(--primary);
    background: rgba(232, 93, 4, 0.08);
    box-shadow: 0 0 0 1px var(--primary);
}
.food-avatar-option-img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center center;
    background: rgba(0, 0, 0, 0.03);
    border: 1.5px solid var(--border);
    transition: transform 0.15s ease;
}
.food-avatar-btn:hover .food-avatar-option-img {
    transform: scale(1.08);
}
.food-avatar-btn.selected .food-avatar-option-img {
    border-color: var(--primary);
    box-shadow: 0 2px 8px rgba(232, 93, 4, 0.35);
}
.food-avatar-name {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--text-muted);
    text-align: center;
    line-height: 1.15;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.food-avatar-btn.selected .food-avatar-name {
    color: var(--primary);
    font-weight: 700;
}
.food-avatar-selection {
    font-size: 0.76rem;
    color: var(--text-muted);
    padding: 6px 14px 10px;
    margin: 0;
    background: var(--surface);
    border-top: 1px dashed var(--border);
}

.edit-field-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
    margin: 0 0 6px;
}
.edit-text-input {
    width: 100%;
    padding: 9px 12px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-family: inherit;
    color: var(--text);
    background: var(--surface);
    margin-bottom: 16px;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.15s;
}
.edit-text-input:focus { border-color: var(--primary); }
.edit-select-input {
    cursor: pointer;
    appearance: auto;
}

/* Food tags */
.food-tags-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 28px;
    margin-bottom: 8px;
}
.food-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--primary-glow);
    color: var(--primary-dark);
    border-radius: var(--radius-pill);
    font-size: 0.82rem;
    font-weight: 600;
    padding: 4px 10px 4px 12px;
}
.food-tag-remove {
    background: none;
    border: none;
    color: var(--primary-dark);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    opacity: 0.7;
}
.food-tag-remove:hover { opacity: 1; background: none; box-shadow: none; transform: none; }
.food-tag-input { margin-top: 0; }

.save-profile-btn {
    width: 100%;
    margin-top: 4px;
}
.edit-profile-status {
    font-size: 0.82rem;
    margin: 8px 0 0;
    min-height: 1em;
    text-align: center;
}

.profile-home-port {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin: 4px 0 6px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.profile-home-port strong {
    color: var(--text);
    font-weight: 700;
}

/* Unified reel-rigging layout */
.reel-group {
    position: relative;
    display: flex;
    flex: 0 0 162px;
    width: 162px;
    min-width: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 5px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--radius);
    background: transparent;
    color: inherit;
    box-shadow: none;
}
.reel-group:hover:not(:disabled),
.reel-group:active:not(:disabled) { background: transparent; box-shadow: none; transform: none; }
.reel-group .reel { width: 100%; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.reel-group:hover .reel,
.reel-group:focus-visible .reel { transform: scale(1.025); box-shadow: 0 10px 38px rgba(30,27,75,.36), 0 0 0 3px rgba(232,93,4,.18); }
.reel-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.reel-rig-status {
    display: block;
    width: 100%;
    min-width: 0;
    height: 1.15rem;
    min-height: 1.15rem;
    line-height: 1.15rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    color: var(--primary-dark);
    font-size: .68rem;
    font-weight: 700;
}
.reel-rig-status:empty {
    display: block;
    visibility: hidden;
}

.reel-group.rigged .reel { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary), 0 0 22px rgba(232,93,4,.5), 0 8px 32px rgba(30,27,75,.3); }
/* Magnet artwork (red horseshoe, silver pole tips), defined once and reused as the badge icon
   and as the cursor over the reels. The cursor versions carry a white halo so they stay
   visible on the dark reels; hotspots are centred. */
.reel-group {
    --magnet-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M6 4h7v13a3 3 0 0 0 6 0V4h7v13a10 10 0 0 1-20 0z' fill='%23dc2626' stroke='%23374151' stroke-width='1.4' stroke-linejoin='round'/%3E%3Cpath d='M6 4h7v6H6zM19 4h7v6h-7z' fill='%23e5e7eb' stroke='%23374151' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E");
    --magnet-cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' stroke-linejoin='round'%3E%3Cpath d='M6 4h7v13a3 3 0 0 0 6 0V4h7v13a10 10 0 0 1-20 0z' fill='%23fff' stroke='%23fff' stroke-width='4'/%3E%3Cpath d='M6 4h7v13a3 3 0 0 0 6 0V4h7v13a10 10 0 0 1-20 0z' fill='%23dc2626' stroke='%23374151' stroke-width='1.4'/%3E%3Cpath d='M6 4h7v6H6zM19 4h7v6h-7z' fill='%23e5e7eb' stroke='%23374151' stroke-width='1.4'/%3E%3C/svg%3E");
    --help-cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' stroke-linecap='round'%3E%3Cpath d='M10.5 11.5a5.5 5.5 0 1 1 8.6 4.5c-2 1.4-3.1 2.3-3.1 4.5' fill='none' stroke='%23fff' stroke-width='7'/%3E%3Ccircle cx='16' cy='26.5' r='4.1' fill='%23fff'/%3E%3Cpath d='M10.5 11.5a5.5 5.5 0 1 1 8.6 4.5c-2 1.4-3.1 2.3-3.1 4.5' fill='none' stroke='%231f2937' stroke-width='4'/%3E%3Ccircle cx='16' cy='26.5' r='2.6' fill='%231f2937'/%3E%3C/svg%3E");
    cursor: var(--magnet-cursor) 16 16, pointer;
}
/* A rigged reel shows just a magnet on its bottom edge; clicking/tapping it lists what's rigged
   (handled in setupReelRigging). The status element's text is kept for assistive tech and
   hidden visually. The negative top margin pulls it up to straddle the reel's bottom edge;
   the bottom margin keeps the reel's overall height unchanged. */
.reel-group.rigged .reel-rig-status {
    position: relative;
    z-index: 3;
    box-sizing: border-box;
    width: 28px;
    min-height: 28px;
    height: 28px;
    margin: -19px auto calc(1.15rem - 9px);
    border: 2px solid var(--primary);
    border-radius: 50%;
    background: #fff var(--magnet-icon) center / 16px 16px no-repeat;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .28);
    font-size: 0;
    line-height: 0;
    color: transparent;
    cursor: var(--help-cursor) 16 16, help;
}
/* Invisible touch hit-area extension so tapping the magnet on mobile is effortless and reliable */
.reel-group.rigged .reel-rig-status::after {
    content: '';
    position: absolute;
    top: -10px;
    bottom: -10px;
    left: -10px;
    right: -10px;
}

.rig-section { width: calc(100% - 32px); max-width: 900px; margin: 8px auto 18px; padding: 0; }
.rig-panel { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; }
.rig-panel > .rig-options { display: none; }
.rig-section .quick-filters { display: flex; flex: 0 0 100%; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 0; }
.rig-section .quick-filters label { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 7px 11px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface); font-size: .78rem; font-weight: 650; white-space: nowrap; }
.rig-section .adventure-filter { flex: 0 0 520px; width: 520px; max-width: 100%; display: grid; grid-template-columns: 82px minmax(150px,1fr) 185px; align-items: center; gap: 10px; margin: 0; padding: 7px 12px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface); }
#adventure-value { display: block; width: 82px; min-width: 82px; color: var(--primary-dark); font-size: .76rem; font-weight: 750; text-align: center; }
.rig-section .adventure-filter input[type="range"] { width: 100%; min-width: 0; margin: 0; accent-color: var(--primary); }
.rig-section .presets-bar { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0; }
.rig-section .preset-save-btn { margin: 0; padding: 7px 12px; border-radius: var(--radius-pill); font-size: .75rem; }
.rig-section #restaurant-count { margin: 0 !important; padding: 6px 10px; color: var(--text-muted); font-size: .75rem; font-weight: 650 !important; white-space: nowrap; }
.adventure-filter #restaurant-count { width: 185px; min-width: 185px; overflow: hidden; text-overflow: ellipsis; text-align: right; }
.clean-game-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 172px;
    min-width: 172px;
    height: 36px;
    min-height: 36px;
    padding: 0 12px;
    border: 1.5px solid var(--border);
    color: var(--text-muted);
    background: var(--surface-2);
    box-shadow: none;
    text-align: center;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.clean-game-btn:not(:disabled) {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--surface);
    font-weight: 700;
    cursor: pointer;
}
.clean-game-btn:hover:not(:disabled) {
    border-color: var(--primary-dark);
    color: #fff;
    background: var(--primary);
    box-shadow: var(--shadow-xs);
}
.clean-game-btn:disabled,
.clean-game-btn.clean-state:disabled {
    border-color: var(--border);
    background: var(--surface-2);
    color: var(--text-light);
    opacity: 0.65;
    cursor: not-allowed;
    box-shadow: none;
}
[data-theme="dark"] .clean-game-btn:not(:disabled) {
    border-color: var(--primary);
    color: var(--primary-light);
    background: rgba(232, 93, 4, 0.12);
}
[data-theme="dark"] .clean-game-btn:hover:not(:disabled) {
    border-color: var(--primary);
    color: #fff;
    background: var(--primary);
}
[data-theme="dark"] .clean-game-btn:disabled,
[data-theme="dark"] .clean-game-btn.clean-state:disabled {
    border-color: var(--border);
    background: var(--surface-2);
    color: var(--text-light);
    opacity: 0.5;
}

.result-eyebrow { margin-bottom: 5px; color: var(--primary); font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.result-meta { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 7px; margin: 12px 0 2px; }
.result-chip { display: inline-flex; align-items: center; min-height: 28px; padding: 4px 11px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface-2); color: var(--text-muted); font-size: .74rem; font-weight: 700; line-height: 1.2; box-shadow: inset 0 1px 0 rgba(255,255,255,.7); }
.result-chip-distance { border-color: rgba(37,99,235,.22); background: rgba(37,99,235,.07); color: var(--blue); }

.result-card-shell { width: calc(100% - 32px); max-width: 620px; margin: 16px auto; border-left: 4px solid var(--primary); border-radius: var(--radius); }
.result-card-shell:has(.result-empty) {
    border-left-color: var(--primary);
    border-left-width: 4px;
    box-shadow: 0 4px 20px rgba(232, 93, 4, 0.06), var(--shadow-sm);
}
.result-card-shell:has(.result-empty) .result-container {
    background: radial-gradient(ellipse at 50% 0%, rgba(232, 93, 4, 0.04) 0%, var(--surface) 75%);
    min-height: 160px;
}
.result-card-shell .result-container { width: 100%; max-width: none; margin: 0; border-left: 0; }
.result-card-shell .enriched-info { max-width: none; margin: 0; border-top: 0; border-radius: 0; box-shadow: none; }
.result-card-shell .result-actions { max-width: none; margin: 0; border-top: 0; border-radius: 0 0 var(--radius) var(--radius); }

.empty-result {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 8px 12px;
    gap: 8px;
    max-width: 480px;
    margin: 0 auto;
}

.empty-slot-graphic-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    user-select: none;
    margin-bottom: 4px;
    cursor: default;
}

.custom-slot-machine {
    width: 86px;
    height: 86px;
    display: block;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.3s ease;
    filter: drop-shadow(0 6px 16px rgba(232, 93, 4, 0.24));
}

.empty-slot-graphic-wrap:hover .custom-slot-machine {
    transform: scale(1.06) translateY(-2px);
    filter: drop-shadow(0 10px 24px rgba(232, 93, 4, 0.35));
}

/* Lever pull animation on hover */
.empty-slot-graphic-wrap:hover .slot-lever-assembly .slot-lever-shaft {
    transform-origin: 94px 69px;
    animation: leverPull 0.55s ease-in-out infinite alternate;
}
.empty-slot-graphic-wrap:hover .slot-lever-assembly .slot-lever-ball {
    transform-origin: 94px 69px;
    animation: leverPull 0.55s ease-in-out infinite alternate;
}

@keyframes leverPull {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(28deg); }
}

/* Sparkle twinkle animation */
.slot-star {
    transform-box: fill-box;
    transform-origin: center;
    animation: slotStarTwinkle 2.6s ease-in-out infinite alternate;
}
.slot-star.s-top-right {
    animation-delay: 1.3s;
}

@keyframes slotStarTwinkle {
    0%   { transform: scale(0.85) rotate(0deg); opacity: 0.5; }
    50%  { transform: scale(1.25) rotate(25deg); opacity: 1; filter: drop-shadow(0 0 5px #fbbf24); }
    100% { transform: scale(0.85) rotate(0deg); opacity: 0.5; }
}

.empty-result-headline {
    margin: 4px 0 0;
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text);
    line-height: 1.35;
    letter-spacing: -0.02em;
}

.empty-nomnom-gradient {
    font-weight: 900;
    background: linear-gradient(130deg, var(--primary) 0%, #ff9f1c 50%, var(--primary-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
    letter-spacing: -0.02em;
    filter: drop-shadow(0 1px 2px rgba(232, 93, 4, 0.22));
}

/* Dark mode */
[data-theme="dark"] .result-card-shell:has(.result-empty) {
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
}
[data-theme="dark"] .result-card-shell:has(.result-empty) .result-container {
    background: radial-gradient(ellipse at 50% 0%, rgba(232, 93, 4, 0.08) 0%, var(--surface) 80%);
}
[data-theme="dark"] .custom-slot-machine {
    filter: drop-shadow(0 6px 20px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 12px rgba(232, 93, 4, 0.25));
}
[data-theme="dark"] .empty-slot-graphic-wrap:hover .custom-slot-machine {
    filter: drop-shadow(0 10px 28px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 18px rgba(232, 93, 4, 0.4));
}

@media (max-width: 480px) {
    .empty-result {
        padding: 6px 8px;
        gap: 6px;
    }
    .custom-slot-machine {
        width: 74px;
        height: 74px;
    }
    .empty-result-headline {
        font-size: 1.12rem;
        line-height: 1.32;
    }
}

@media (prefers-reduced-motion: reduce) {
    .slot-star,
    .empty-slot-graphic-wrap:hover .slot-lever-assembly .slot-lever-shaft,
    .empty-slot-graphic-wrap:hover .slot-lever-assembly .slot-lever-ball {
        animation: none;
    }
}

.reel-rig-content { background: var(--surface); color: var(--text); border: 1.5px solid var(--border);  max-width: 760px; max-height: min(82vh,760px); display: flex; flex-direction: column; text-align: left; }
.reel-rig-header { display: flex; align-items: flex-start; justify-content: space-between; padding-right: 30px; }
.reel-rig-header h2 { margin: 0 0 12px; }
.reel-rig-kicker { display: block; color: var(--primary); font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
/* Basic / Advanced level-of-detail toggle for the Cuisine and Area wheels */
.reel-rig-detail { display: inline-flex; align-self: flex-start; gap: 2px; margin: 0 0 8px; padding: 3px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface-2); }
.reel-rig-detail[hidden] { display: none; }
.reel-rig-detail button { margin: 0; padding: 4px 14px; border: 0; border-radius: var(--radius-pill); background: transparent; box-shadow: none; transform: none; color: var(--text-muted); font-size: .76rem; font-weight: 700; cursor: pointer; }
.reel-rig-detail button:hover { background: transparent; box-shadow: none; transform: none; color: var(--text); }
.reel-rig-detail button[aria-pressed="true"] { background: var(--primary); color: #fff; }
/* Basic: cuisine drops the individual cuisines under each region; area drops sub-neighborhoods.
   The caret goes with them, which also tells the pill-click handler to select instead of expand. */
#reel-rig-options[data-detail="basic"] #category-options .tree-children .tree-children,
#reel-rig-options[data-detail="basic"] #category-options .tree-children .tree-parent .expand-icon,
#reel-rig-options[data-detail="basic"] #neighborhood-tree .tree-parent .tree-children,
#reel-rig-options[data-detail="basic"] #neighborhood-tree .tree-parent .tree-header .expand-icon,
#reel-rig-options[data-detail="basic"] .advanced-only { display: none !important; }
#reel-rig-options { overflow-y: auto; padding: 4px 4px 12px; }
#reel-rig-options > div { width: 100%; padding: 0; border: 0; box-shadow: none; }
#reel-rig-options .rig-section-header { display: none; }
#reel-rig-options .rig-section-content { max-height: none !important; opacity: 1 !important; overflow: visible !important; }
.reel-rig-footer { display: flex; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid var(--border); }
.reel-rig-footer button { margin: 0; }

/* "What's rigged" popover opened from a reel's magnet. A fixed, top-level element (see
   toggleRigSummary): left/top/max-height/--arrow-x are set from JS so it sits under the
   magnet and never runs off screen. The header stays put while the chip list scrolls;
   overscroll-behavior stops the list's scrolling from also moving the page behind it. */
.reel-rig-summary {
    position: fixed;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    width: max-content;
    min-width: 200px;
    max-width: min(340px, calc(100vw - 16px));
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-lg);
    text-align: left;
}
.reel-rig-summary::before {   /* arrow pointing at the magnet */
    content: '';
    position: absolute;
    left: var(--arrow-x, 50%);
    width: 12px;
    height: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    transform: translateX(-50%) rotate(45deg);
}
.reel-rig-summary[data-side="below"]::before { top: -7px; border-right: 0; border-bottom: 0; }
.reel-rig-summary[data-side="above"]::before { bottom: -7px; border-left: 0; border-top: 0; }
.reel-rig-summary-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px 10px;
    border-bottom: 1px solid var(--border-light);
    border-radius: var(--radius) var(--radius) 0 0;
    background: var(--surface);
    font-size: .84rem;
}
.reel-rig-summary-count {
    min-width: 22px;
    padding: 1px 8px;
    border-radius: var(--radius-pill);
    background: var(--surface-2);
    color: var(--text-muted);
    font-size: .72rem;
    font-weight: 700;
    text-align: center;
}
.reel-rig-summary-list {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 6px;
    min-height: 0;
    padding: 12px 14px 14px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}
.reel-rig-chip {
    padding: 4px 11px;
    border-radius: var(--radius-pill);
    background: var(--primary-glow);
    color: var(--primary-dark);
    font-size: .8rem;
    font-weight: 650;
    line-height: 1.3;
}

@media (min-width:481px) and (max-width:768px) {
    .reel-group { flex-basis: 130px; width: 130px; }
}
@media (max-width:480px) {
    .slot-machine { gap: 7px; padding: 0 8px; }
    .reel-group { flex-basis: calc((100vw - 38px)/3); width: calc((100vw - 38px)/3); }
    .reel-group .reel { height: 104px; padding: 8px; font-size: .76rem; }
    .rig-panel { align-items: stretch; }
    .spin-secondary-btns {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
        margin: 6px auto 10px;
        padding: 0 8px;
        max-width: 360px;
        width: 100%;
        box-sizing: border-box;
    }
    .spin-secondary-btns .secondary-btn {
        flex: 1 1 125px;
        max-width: 165px;
        min-height: 38px;
        padding: 8px 10px;
        font-size: 0.8rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        white-space: nowrap;
        box-sizing: border-box;
    }
    .spin-secondary-btns .clean-game-btn {
        width: auto;
        min-width: 0;
    }
    .spin-secondary-btns .spin-together-btn {
        flex: 1 1 100%;
        max-width: 270px;
    }
    .rig-section .quick-filters {
        justify-content: center;
        flex-wrap: wrap;
        overflow-x: visible;
        gap: 6px 8px;
        padding: 2px 4px 6px;
    }
    .rig-section .quick-filters::-webkit-scrollbar { display: none; }
    .rig-section .quick-filters label {
        flex: 0 1 auto;
        padding: 6px 12px !important;
        font-size: 0.76rem;
        min-height: 34px;
        box-sizing: border-box;
        cursor: pointer;
    }
    .rig-section #restaurant-count { width: 100%; text-align: center; }
    .rig-section .adventure-filter { grid-template-columns: 82px minmax(0,1fr); width: 100%; border-radius: var(--radius); }
    .adventure-filter #restaurant-count { grid-column: 1 / -1; min-width: 0; }
}

/* -----------------------------------------------
   Theme & Utility Controls
   ----------------------------------------------- */
.theme-toggle-btn {
    font-size: 1.1rem;
    padding: 6px 10px;
    margin: 0 4px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    cursor: pointer;
    line-height: 1;
    color: var(--text);
    transition: transform var(--transition), background var(--transition);
}
.theme-toggle-btn:hover:not(:disabled) {
    transform: rotate(20deg) scale(1.1);
    background: var(--border-light);
    color: var(--text);
}

/* -----------------------------------------------
   3D Reel Enhancements & Motion Blur
   ----------------------------------------------- */
.slot-machine {
    perspective: 1000px;
    transform-style: preserve-3d;
}
.reel {
    transform: translateZ(0);
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
}
.reel.spin::after {
    text-shadow: 0 6px 14px rgba(255, 255, 255, 0.45), 0 -6px 14px rgba(255, 255, 255, 0.45);
    filter: blur(0.6px);
}
.reel.landed {
    animation: reelLandBounce 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes reelLandBounce {
    0%   { transform: scale(1) translateY(0); }
    40%  { transform: scale(1.06) translateY(-4px); box-shadow: 0 0 20px var(--primary-glow); }
    100% { transform: scale(1) translateY(0); }
}

/* -----------------------------------------------
   Multiplayer Reactions Strip & Floating Stage
   ----------------------------------------------- */
.session-reactions-strip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0 8px;
    background: var(--surface-2);
    padding: 4px 8px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border);
}
.reaction-trigger-btn {
    background: none;
    border: none;
    padding: 6px 8px;
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    cursor: pointer;
    border-radius: var(--radius-xs);
    margin: 0;
    transition: transform 0.15s ease;
}
.reaction-trigger-btn:hover {
    transform: scale(1.3);
    background: none;
    box-shadow: none;
}
.reaction-trigger-btn.veto-btn {
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--red);
    padding: 6px 12px;
    min-height: 44px;
    min-width: auto;
    background: rgba(220, 38, 38, 0.10);
    border-radius: var(--radius-pill);
}
.reaction-trigger-btn.veto-btn:hover:not(:disabled) {
    color: #7f1d1d;
    background: rgba(220, 38, 38, 0.10);
}

[data-theme="dark"] .reaction-trigger-btn.veto-btn {
    color: #f87171;
    background: rgba(220, 38, 38, 0.18);
}

[data-theme="dark"] .reaction-trigger-btn.veto-btn:hover:not(:disabled) {
    color: #fecaca;
    background: rgba(220, 38, 38, 0.28);
}
.reaction-floating-stage {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    overflow: hidden;
}
.floating-emoji {
    position: absolute;
    bottom: 40px;
    font-size: 2.2rem;
    animation: floatEmojiUp 2.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
@keyframes floatEmojiUp {
    0%   { opacity: 0; transform: translateY(0) scale(0.6); }
    15%  { opacity: 1; transform: translateY(-30px) scale(1.2); }
    80%  { opacity: 0.9; transform: translateY(-320px) scale(1); }
    100% { opacity: 0; transform: translateY(-460px) scale(0.8); }
}

/* -----------------------------------------------
   Delivery & Reservation Deep Link Buttons
   ----------------------------------------------- */
.reservation-btn {
    background: #0f766e !important;
    color: white !important;
}
.reservation-btn:hover {
    background: #115e59 !important;
}
.delivery-btn {
    background: #ea580c !important;
    color: white !important;
}
.delivery-btn:hover {
    background: #c2410c !important;
}

/* -----------------------------------------------
   Share Card Modal & Canvas Preview
   ----------------------------------------------- */
.share-card-modal {
    z-index: 1200;
}
.share-card-modal .share-card-content {
    max-width: 540px;
    width: 95%;
    text-align: center;
}
.share-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}
.share-card-header h3 {
    margin: 0;
}
.canvas-preview-wrap {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px;
    margin-bottom: 16px;
    display: flex;
    justify-content: center;
}
.canvas-preview-wrap canvas {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
}
.share-card-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* -----------------------------------------------
   Stamp Photo Prompt Modal
   ----------------------------------------------- */
.stamp-photo-prompt-modal {
    z-index: 1250;
}

.stamp-photo-prompt-content {
    max-width: 420px;
    width: 92%;
    text-align: center;
    padding: 28px 24px;
    border-radius: var(--radius-lg);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
    background: var(--surface);
    color: var(--text);
    position: relative;
}

.stamp-photo-prompt-icon {
    font-size: 2.6rem;
    line-height: 1;
    margin-bottom: 12px;
}

.stamp-photo-prompt-title {
    margin: 0 0 22px 0;
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text);
    line-height: 1.45;
}

.stamp-photo-prompt-title span {
    color: var(--primary);
}

.stamp-photo-prompt-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 290px;
    margin: 0 auto;
    width: 100%;
}

.stamp-photo-add-btn {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #ffffff;
    border: none;
    border-radius: var(--radius-pill);
    padding: 11px 22px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 14px var(--primary-glow);
    transition: transform var(--transition), box-shadow var(--transition);
    width: 100%;
}

.stamp-photo-add-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px var(--primary-glow);
}

.stamp-photo-skip-btn {
    background: var(--surface-2);
    color: var(--text);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-pill);
    padding: 10px 20px;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
    width: 100%;
}

.stamp-photo-skip-btn:hover {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border-light);
}

[data-theme="dark"] .stamp-photo-skip-btn {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text);
    border-color: var(--border);
}

[data-theme="dark"] .stamp-photo-skip-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--text);
}

.stamp-photo-cancel-stamp-btn {
    background: transparent;
    color: var(--text-muted);
    border: 1.5px solid transparent;
    border-radius: var(--radius-pill);
    padding: 9px 20px;
    font-size: 0.90rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
    width: 100%;
}

.stamp-photo-cancel-stamp-btn:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.25);
}

[data-theme="dark"] .stamp-photo-cancel-stamp-btn:hover {
    color: #f87171;
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.35);
}

/* -----------------------------------------------
   Stamp Remove Confirmation Modal
   ----------------------------------------------- */
.stamp-remove-confirm-modal {
    z-index: 1260;
}

.stamp-remove-confirm-content {
    max-width: 420px;
    width: 92%;
    text-align: center;
    padding: 28px 24px;
    border-radius: var(--radius-lg);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
    background: var(--surface);
    color: var(--text);
    position: relative;
}

.stamp-remove-confirm-icon {
    font-size: 2.6rem;
    line-height: 1;
    margin-bottom: 12px;
}

.stamp-remove-confirm-title {
    margin: 0 0 10px 0;
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text);
    line-height: 1.4;
}

.stamp-remove-confirm-title span {
    color: var(--primary);
}

.stamp-remove-confirm-desc {
    margin: 0 0 22px 0;
    font-size: 0.92rem;
    color: var(--text-muted);
    line-height: 1.45;
}

.stamp-remove-confirm-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.stamp-remove-danger-btn {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #ffffff;
    border: none;
    border-radius: var(--radius-pill);
    padding: 10px 22px;
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.35);
    transition: transform var(--transition), box-shadow var(--transition);
}

.stamp-remove-danger-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(239, 68, 68, 0.45);
}

.stamp-remove-cancel-btn {
    background: var(--surface-2);
    color: var(--text-muted);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-pill);
    padding: 10px 20px;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.stamp-remove-cancel-btn:hover {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border-light);
}

[data-theme="dark"] .stamp-remove-cancel-btn {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-muted);
    border-color: var(--border);
}

[data-theme="dark"] .stamp-remove-cancel-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--text);
}


/* ===============================================
   DARK MODE COMPREHENSIVE CONTRAST & LEGIBILITY
   =============================================== */
[data-theme="dark"] body {
    color: var(--text);
    background-color: var(--bg);
    background-image:
        radial-gradient(ellipse at 15% 0%, rgba(232, 93, 4, 0.12) 0%, transparent 55%),
        radial-gradient(ellipse at 85% 100%, rgba(99, 102, 241, 0.10) 0%, transparent 55%);
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] strong {
    color: var(--text);
}

[data-theme="dark"] .city-selector {
    background-color: var(--surface) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}

[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] select,
[data-theme="dark"] textarea {
    background-color: var(--surface) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}

[data-theme="dark"] select option {
    background-color: var(--surface);
    color: var(--text);
}

[data-theme="dark"] input:-webkit-autofill,
[data-theme="dark"] input:-webkit-autofill:hover,
[data-theme="dark"] input:-webkit-autofill:focus,
[data-theme="dark"] textarea:-webkit-autofill,
[data-theme="dark"] select:-webkit-autofill {
    -webkit-text-fill-color: var(--text) !important;
    -webkit-box-shadow: 0 0 0 1000px var(--surface) inset !important;
    box-shadow: 0 0 0 1000px var(--surface) inset !important;
    caret-color: var(--text) !important;
}

[data-theme="dark"] .secondary-btn {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border);
}

[data-theme="dark"] .secondary-btn:hover:not(:disabled) {
    background: var(--surface-2);
    color: var(--text);
    border-color: var(--primary);
}

[data-theme="dark"] .secondary-btn:disabled {
    background: var(--surface-2);
    color: var(--text-light);
    border-color: var(--border);
}

[data-theme="dark"] .reel {
    background: linear-gradient(150deg, #131620 0%, #1e2434 100%);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

[data-theme="dark"] .reel::before {
    background: linear-gradient(to bottom, rgba(13, 15, 20, 0.85) 0%, transparent 30%, transparent 70%, rgba(13, 15, 20, 0.85) 100%);
}

[data-theme="dark"] .reel-placeholder {
    color: #e2e8f0;
}

[data-theme="dark"] .reel-rig-status {
    color: var(--primary-dark);
}

[data-theme="dark"] .result-container {
    background: var(--surface);
    border-color: var(--border);
}

[data-theme="dark"] #scrolling-result strong {
    color: var(--text);
}

[data-theme="dark"] #scrolling-result p {
    color: var(--text-muted);
}

[data-theme="dark"] .result-actions {
    background: var(--surface);
    border-color: var(--border);
}

[data-theme="dark"] .result-chip {
    background: var(--surface-2);
    color: var(--text);
    border-color: var(--border);
}

[data-theme="dark"] .medal-btn {
    background: var(--surface-2);
    color: var(--text);
}

[data-theme="dark"] .medal-btn.selected {
    background: var(--surface);
    border-color: var(--primary);
}

[data-theme="dark"] .enriched-info {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border);
}

[data-theme="dark"] .enriched-row {
    border-color: var(--border-light);
}

[data-theme="dark"] .enriched-row span:first-child {
    color: var(--text-muted);
}

[data-theme="dark"] .enriched-row span:last-child {
    color: var(--text);
}

[data-theme="dark"] .enriched-actions .enriched-action-btn.website-btn {
    background: var(--surface-2);
    color: var(--text);
    border-color: var(--border);
}

[data-theme="dark"] .rig-panel {
    color: var(--text);
}

[data-theme="dark"] .rig-section .quick-filters label,
[data-theme="dark"] .quick-filters label {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border);
}

[data-theme="dark"] .rig-section .quick-filters label:hover,
[data-theme="dark"] .quick-filters label:hover {
    background: var(--surface-2);
    border-color: var(--primary);
    color: var(--text);
}

[data-theme="dark"] .rig-section .quick-filters label:has(input:checked),
[data-theme="dark"] .quick-filters label:has(input:checked) {
    background: rgba(249, 115, 22, 0.18);
    border-color: var(--primary);
    color: var(--primary-light);
}

[data-theme="dark"] .rig-section .adventure-filter {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border);
}

[data-theme="dark"] #adventure-value {
    color: var(--primary-dark);
}

[data-theme="dark"] .rig-section-header {
    background: linear-gradient(135deg, var(--surface-2) 0%, var(--surface) 100%);
    border-bottom: 1.5px solid var(--border);
    color: var(--text);
}

[data-theme="dark"] .rig-section-header:hover {
    background: var(--surface-2);
}

[data-theme="dark"] .tree-header,
[data-theme="dark"] .tree-parent,
[data-theme="dark"] .tree-children label:not(:has(input:checked)),
[data-theme="dark"] .tier-header {
    color: var(--text);
}

[data-theme="dark"] label:has(input.child-checkbox):has(input:checked),
[data-theme="dark"] #price-options label:has(input:checked) {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #0b0d13 !important;
    font-weight: 750;
    box-shadow: 0 2px 8px var(--primary-glow);
}

[data-theme="dark"] .tree-header.nbhd-in-range:not(:has(input.parent-checkbox:checked)):not(:has(input.parent-checkbox:indeterminate)) {
    border-color: var(--blue);
    background: rgba(96, 165, 250, 0.12);
    color: var(--blue);
}

[data-theme="dark"] .search-suggestions {
    background: var(--surface);
    border-color: var(--border);
    box-shadow: 0 10px 30px rgba(0,0,0,0.6);
}

[data-theme="dark"] .search-suggestion-item {
    color: var(--text);
}

[data-theme="dark"] .search-suggestion-item:hover {
    background: var(--surface-2);
    color: var(--primary-light);
}

[data-theme="dark"] .modal-content {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border);
}

[data-theme="dark"] .modal-content h2,
[data-theme="dark"] .modal-content h3 {
    color: var(--text);
}

[data-theme="dark"] .form-group label {
    color: var(--text);
}

[data-theme="dark"] .reel-rig-header {
    border-color: var(--border);
}

[data-theme="dark"] .reel-rig-footer {
    border-color: var(--border);
    background: var(--surface);
}

[data-theme="dark"] .profile-modal-close,


[data-theme="dark"] .profile-modal-close:hover,


[data-theme="dark"] .history-panel,
[data-theme="dark"] .social-panel {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border);
}

[data-theme="dark"] .history-panel-header,
[data-theme="dark"] .social-panel-header {
    background: var(--surface);
    border-color: var(--border);
}

[data-theme="dark"] .history-entry-name {
    color: var(--text);
}

[data-theme="dark"] .history-entry-details {
    display: none;
    margin-top: 6px;
    padding: 8px 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    color: var(--text);
    line-height: 1.6;
}
.history-entry-details a {
    color: var(--blue);
    font-weight: 600;
    text-decoration: underline;
}

[data-theme="dark"] .history-spin-count {
    background: rgba(99, 102, 241, 0.25);
    color: #c7d2fe;
}

[data-theme="dark"] .history-city-badge {
    background: rgba(16, 185, 129, 0.25);
    color: #6ee7b7;
}





[data-theme="dark"] .photo-lightbox-close {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
}


/* -----------------------------------------------
   DARK MODE CONTRAST OVERRIDES: TOP BANNER & HISTORY
   ----------------------------------------------- */
[data-theme="dark"] .auth-bar {
    background: var(--bg);
    border-bottom: 1px solid var(--border);
}

[data-theme="dark"] .streak-badge {
    background: rgba(251, 146, 60, 0.18);
    color: #fb923c;
    border: 1.5px solid rgba(251, 146, 60, 0.40);
}

[data-theme="dark"] .history-panel {
    background: var(--surface);
    border-left: 1px solid var(--border);
}

[data-theme="dark"] .history-panel-header {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

[data-theme="dark"] .history-panel-header h2 {
    color: #f8fafc;
}

[data-theme="dark"] .history-stats {
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
}

[data-theme="dark"] .stat-number {
    color: #f8fafc;
}

[data-theme="dark"] .stat-label {
    color: #94a3b8;
}

[data-theme="dark"] .history-controls {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

[data-theme="dark"] .history-filter {
    color: #f8fafc;
}

[data-theme="dark"] .history-search,
[data-theme="dark"] .history-sort {
    background: var(--surface-2) !important;
    color: #f8fafc !important;
    border: 1.5px solid var(--border) !important;
}

[data-theme="dark"] .history-entry {
    border-bottom: 1px solid var(--border-light);
}

[data-theme="dark"] .history-entry:hover {
    background: var(--surface-2);
}

[data-theme="dark"] .history-entry-name {
    color: #f8fafc;
}

[data-theme="dark"] .history-entry-meta {
    color: #cbd5e1;
}

[data-theme="dark"] .history-entry-time {
    color: #94a3b8;
}

[data-theme="dark"] .history-entry-details {
    background: var(--surface-2);
    color: #f8fafc;
    border: 1px solid var(--border);
}

[data-theme="dark"] .history-entry-details a {
    color: #60a5fa;
}

[data-theme="dark"] .history-medal-btn {
    background: var(--surface-2);
    border-color: var(--border);
}

[data-theme="dark"] .history-medal-btn:hover:not(:disabled) {
    background: var(--surface);
}

[data-theme="dark"] .history-medal-btn.selected {
    background: var(--surface);
    border-color: var(--primary);
}

[data-theme="dark"] .history-pagination {
    background: var(--surface);
    border-top: 1px solid var(--border);
}

[data-theme="dark"] .history-pagination button {
    background: var(--surface-2);
    color: #f8fafc;
    border: 1.5px solid var(--border);
}

[data-theme="dark"] .history-pagination button:hover:not(:disabled) {
    background: var(--surface);
    color: var(--primary);
    border-color: var(--primary);
}

[data-theme="dark"] #history-page-info {
    color: #f8fafc;
}

[data-theme="dark"] .wishlist-btn {
    color: #f472b6;
    border-color: #db2777;
}

[data-theme="dark"] .wishlist-btn:hover:not(:disabled) {
    background: rgba(219, 39, 119, 0.22);
    color: #fbcfe8;
    border-color: #f472b6;
}

[data-theme="dark"] .wishlist-btn.active {
    background: #db2777 !important;
    color: #ffffff !important;
    border-color: #f472b6 !important;
}

[data-theme="dark"] .wishlist-btn.active:hover:not(:disabled) {
    background: #be185d !important;
    color: #ffffff !important;
    border-color: #f472b6 !important;
}

[data-theme="dark"] .visited-btn {
    color: #34d399;
    border-color: #059669;
}

[data-theme="dark"] .visited-btn:hover:not(:disabled) {
    background: rgba(16, 185, 129, 0.20);
    color: #6ee7b7;
    border-color: #34d399;
}

[data-theme="dark"] .visited-btn.active {
    background: #059669 !important;
    color: #ffffff !important;
    border-color: #34d399 !important;
}

[data-theme="dark"] .visited-btn.active:hover:not(:disabled) {
    background: #047857 !important;
    color: #ffffff !important;
    border-color: #34d399 !important;
}

[data-theme="dark"] .stamp-share-btn {
    color: #c7d2fe;
    border-color: #6366f1;
}

[data-theme="dark"] .stamp-share-btn:hover:not(:disabled) {
    background: rgba(99, 102, 241, 0.22);
    color: #e0e7ff;
    border-color: #818cf8;
}

[data-theme="dark"] .report-btn {
    color: #f87171;
    border-color: #ef4444;
}

[data-theme="dark"] .report-btn:hover:not(:disabled) {
    background: rgba(248, 113, 113, 0.20);
    color: #fca5a5;
    border-color: #f87171;
}

[data-theme="dark"] .medal-btn:hover:not(:disabled) {
    background: var(--surface-2);
    color: var(--text);
    border-color: var(--border-light);
}

[data-theme="dark"] .preset-chip:hover:not(:disabled) {
    background: rgba(99, 102, 241, 0.28);
    border-color: #818cf8;
}

[data-theme="dark"] .preset-save-btn {
    background: var(--accent-mid);
    color: #0b0d13;
}

[data-theme="dark"] .preset-save-btn:hover:not(:disabled) {
    background: #c7d2fe;
    color: #0b0d13;
}

[data-theme="dark"] .email-link-btn:hover:not(:disabled) {
    background: rgba(99, 102, 241, 0.22);
    color: var(--text);
}

[data-theme="dark"] .city-map-btn:hover {
    border-color: var(--primary);
    background: var(--surface-2);
}

/* ==========================================================================
   NomNom Passport & Neighborhood Stamp Book
   ========================================================================== */

.passport-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--surface-2);
    color: var(--text);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-pill);
    padding: 6px 14px;
    font-size: 0.84rem;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--transition);
}

.passport-btn:hover {
    border-color: var(--primary);
    background: rgba(232, 93, 4, 0.12);
    color: var(--primary);
    transform: translateY(-1px);
}

.modal-content.passport-modal-content,
.passport-modal-content {
    max-width: 720px;
    width: 100%;
    max-height: 88vh;
    overflow-y: auto;
    background-color: #0d1726;
    background: linear-gradient(150deg, #0d1726 0%, #17243b 45%, #0b1422 100%);
    color: #e2e8f0;
    border-radius: 16px;
    border: 2px solid #d4af37;
    padding: 22px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(212, 175, 55, 0.4), inset 0 0 35px rgba(0, 0, 0, 0.55);
    position: relative;
    box-sizing: border-box;
}

[data-theme="dark"] .modal-content.passport-modal-content,
[data-theme="dark"] .passport-modal-content {
    background-color: #070c14;
    background: linear-gradient(150deg, #070c14 0%, #0f1826 45%, #060a10 100%);
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(212, 175, 55, 0.3), inset 0 0 40px rgba(0, 0, 0, 0.7);
}

.passport-modal-content .profile-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    color: #e5c07b;
    background: rgba(13, 23, 38, 0.9);
    border: 1px solid rgba(212, 175, 55, 0.6);
    border-radius: 50%;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    cursor: pointer;
    transition: all var(--transition);
    z-index: 20;
}

.passport-modal-content .profile-modal-close:hover {
    color: #ffffff;
    background: var(--primary);
    border-color: var(--primary);
    transform: scale(1.1);
}

.passport-booklet-shell {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* ── Leatherette Cover Header (Gold Foil Stamping) ────────────────────────── */
.passport-cover-header {
    text-align: center;
    padding: 10px 14px 18px 14px;
    border-bottom: 1.5px solid rgba(212, 175, 55, 0.35);
    position: relative;
}

.passport-gold-crest {
    display: flex;
    justify-content: center;
    margin-bottom: 8px;
}

.passport-crest-svg {
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
}

.passport-cover-kicker {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.24em;
    background: linear-gradient(135deg, #ffe57f 0%, #d4af37 60%, #b8860b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-transform: uppercase;
}

.passport-cover-main {
    font-size: 1.85rem;
    font-weight: 900;
    letter-spacing: 0.18em;
    margin: 4px 0 2px 0;
    background: linear-gradient(135deg, #fff3b0 0%, #ffd54f 35%, #d4af37 70%, #aa7c11 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}

.passport-cover-sub {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: #cbd5e1;
    opacity: 0.85;
    text-transform: uppercase;
}

.passport-cover-filigree {
    color: #d4af37;
    font-size: 0.72rem;
    opacity: 0.8;
    letter-spacing: 0.12em;
    margin-top: 6px;
}

/* ── Banknote / Security Paper Page Sheets ────────────────────────────────── */
.passport-page-sheet {
    background-color: #faf6ed;
    background-image: 
        radial-gradient(circle at 50% 50%, rgba(212, 175, 55, 0.06) 0%, transparent 60%),
        repeating-linear-gradient(45deg, rgba(180, 150, 90, 0.035) 0, rgba(180, 150, 90, 0.035) 1px, transparent 0, transparent 10px),
        repeating-linear-gradient(-45deg, rgba(180, 150, 90, 0.035) 0, rgba(180, 150, 90, 0.035) 1px, transparent 0, transparent 10px);
    color: #1e293b;
    border-radius: 10px;
    border: 1px solid rgba(180, 150, 90, 0.4);
    border-left: 4px dashed rgba(220, 38, 38, 0.45); /* Red security thread */
    box-shadow: inset 0 0 16px rgba(0, 0, 0, 0.04), 0 4px 14px rgba(0, 0, 0, 0.25);
    padding: 18px 20px;
    position: relative;
    box-sizing: border-box;
}

[data-theme="dark"] .passport-page-sheet {
    background-color: #131923;
    background-image: 
        radial-gradient(circle at 50% 50%, rgba(212, 175, 55, 0.08) 0%, transparent 60%),
        repeating-linear-gradient(45deg, rgba(212, 175, 55, 0.03) 0, rgba(212, 175, 55, 0.03) 1px, transparent 0, transparent 10px),
        repeating-linear-gradient(-45deg, rgba(212, 175, 55, 0.03) 0, rgba(212, 175, 55, 0.03) 1px, transparent 0, transparent 10px);
    color: #e2e8f0;
    border-color: rgba(212, 175, 55, 0.28);
    border-left: 4px dashed rgba(239, 68, 68, 0.65);
    box-shadow: inset 0 0 22px rgba(0, 0, 0, 0.4), 0 4px 14px rgba(0, 0, 0, 0.45);
}

.passport-page-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border-bottom: 1.5px solid rgba(180, 150, 90, 0.35);
    padding-bottom: 8px;
    margin-bottom: 14px;
}

[data-theme="dark"] .passport-page-banner {
    border-bottom-color: rgba(212, 175, 55, 0.25);
}

.page-stamp-tag {
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: #b91c1c;
    border: 1.5px solid #b91c1c;
    padding: 1px 7px;
    border-radius: 3px;
    text-transform: uppercase;
    transform: rotate(-2deg);
    display: inline-block;
}

[data-theme="dark"] .page-stamp-tag {
    color: #ef4444;
    border-color: #ef4444;
}

.page-title-tag {
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #0f172a;
}

[data-theme="dark"] .page-title-tag {
    color: #f1f5f9;
}

.page-emblem-tag {
    font-size: 1.15rem;
    line-height: 1;
}

.passport-page-desc {
    font-size: 0.75rem;
    color: #334155;
    margin: -6px 0 14px 0;
    font-style: italic;
}

[data-theme="dark"] .passport-page-desc {
    color: #94a3b8;
}

/* ── PAGE 01: Traveler Bearer ID Data Page ────────────────────────────────── */
.passport-id-grid {
    display: grid;
    grid-template-columns: 136px 1fr;
    gap: 18px;
    align-items: start;
}

@media (max-width: 540px) {
    .passport-id-grid {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }
}

.passport-id-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.passport-photo-box {
    width: 120px;
    height: 144px;
    border: 2px solid rgba(180, 150, 90, 0.6);
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    background: #e2e8f0;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
}

[data-theme="dark"] .passport-photo-box {
    border-color: rgba(212, 175, 55, 0.4);
    background: #1e293b;
}

.passport-photo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.passport-photo-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #f1f5f9 0%, #cbd5e1 100%);
    color: #475569;
}

[data-theme="dark"] .passport-photo-placeholder {
    background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
    color: #94a3b8;
}

.photo-placeholder-icon {
    font-size: 2.8rem;
    line-height: 1;
}

.photo-placeholder-initials {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    margin-top: 4px;
}

.passport-photo-watermark {
    position: absolute;
    bottom: 6px;
    right: -6px;
    transform: rotate(-14deg);
    border: 1.5px solid rgba(220, 38, 38, 0.85);
    background: rgba(255, 255, 255, 0.85);
    color: #dc2626;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.5rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    line-height: 1.15;
    text-align: center;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    pointer-events: none;
}

[data-theme="dark"] .passport-photo-watermark {
    background: rgba(15, 23, 42, 0.85);
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.85);
}

.watermark-sub {
    display: block;
    font-size: 0.44rem;
    letter-spacing: 0.04em;
    opacity: 0.85;
}

.passport-sig-area {
    text-align: center;
    width: 100%;
}

.passport-sig-line {
    border-bottom: 1px solid rgba(180, 150, 90, 0.5);
    padding-bottom: 2px;
    min-height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.passport-signature-hand {
    font-family: 'Brush Script MT', 'Dancing Script', 'Caveat', 'Segoe Script', cursive;
    font-size: 1.3rem;
    color: #1e3a8a;
    font-weight: 600;
    transform: rotate(-2deg);
    letter-spacing: 0.04em;
    line-height: 1;
}

[data-theme="dark"] .passport-signature-hand {
    color: #93c5fd;
}

.passport-sig-label {
    font-size: 0.58rem;
    font-weight: 700;
    color: #334155;
    margin-top: 3px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

[data-theme="dark"] .passport-sig-label {
    color: #94a3b8;
}

.passport-id-right {
    width: 100%;
}

.passport-id-header-line {
    border-bottom: 1px dashed rgba(180, 150, 90, 0.4);
    padding-bottom: 4px;
    margin-bottom: 8px;
}

.passport-doc-type {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: #854d0e;
    text-transform: uppercase;
}

[data-theme="dark"] .passport-doc-type {
    color: #fbbf24;
}

.passport-fields-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px 12px;
}

@media (max-width: 480px) {
    .passport-fields-grid {
        grid-template-columns: 1fr;
    }
}

.passport-field-cell {
    display: flex;
    flex-direction: column;
}

.passport-field-cell.pfield-full {
    grid-column: 1 / -1;
}

.pfield-label {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #334155;
    letter-spacing: 0.04em;
    margin-bottom: 1px;
}

[data-theme="dark"] .pfield-label {
    color: #94a3b8;
}

.pfield-val {
    font-size: 0.85rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.2;
}

[data-theme="dark"] .pfield-val {
    color: #f8fafc;
}

.pfield-val.pfield-bold {
    font-size: 0.95rem;
    font-weight: 900;
    letter-spacing: 0.02em;
}

.pfield-val.pfield-no {
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 0.98rem;
    font-weight: 900;
    color: #b91c1c;
    letter-spacing: 0.08em;
}

[data-theme="dark"] .pfield-val.pfield-no {
    color: #f87171;
}

.pfield-val.pfield-rank {
    color: #9a3412;
    font-weight: 800;
}

[data-theme="dark"] .pfield-val.pfield-rank {
    color: #fbbf24;
}

.pfield-val-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.passport-field-edit-btn {
    background: none;
    border: none;
    padding: 1px 4px;
    cursor: pointer;
    font-size: 0.78rem;
    color: #1e293b;
    opacity: 0.75;
    border-radius: var(--radius-sm);
    transition: opacity 0.15s, transform 0.15s;
    line-height: 1;
}

.passport-field-edit-btn:hover {
    opacity: 1;
    transform: scale(1.15);
    background: rgba(0, 0, 0, 0.05);
}

[data-theme="dark"] .passport-field-edit-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* Monospace Machine Readable Zone (MRZ) */
.passport-mrz-block {
    font-family: 'OCR-B', 'Consolas', 'Courier New', monospace;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    background: rgba(0, 0, 0, 0.04);
    border-top: 1.5px dashed rgba(180, 150, 90, 0.4);
    padding: 10px 12px;
    margin-top: 14px;
    border-radius: 4px;
    color: #1e293b;
    line-height: 1.5;
    word-break: break-all;
    overflow-x: auto;
}

[data-theme="dark"] .passport-mrz-block {
    background: rgba(0, 0, 0, 0.35);
    border-top-color: rgba(212, 175, 55, 0.25);
    color: #cbd5e1;
}

.passport-mrz-line {
    white-space: nowrap;
}

/* ── PAGE 02: Diplomatic Commendations / Badges ──────────────────────────── */
.passport-badges-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(95px, 1fr));
    gap: 12px;
    margin-top: 6px;
}

.passport-badge-card {
    background: rgba(255, 255, 255, 0.75);
    border: 1.5px solid rgba(180, 150, 90, 0.45);
    border-radius: 8px;
    padding: 12px 8px;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    transition: all var(--transition);
}

[data-theme="dark"] .passport-badge-card {
    background: rgba(19, 25, 36, 0.75);
    border-color: rgba(212, 175, 55, 0.3);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.passport-badge-card.unlocked {
    border-color: #d4af37;
    background: linear-gradient(180deg, rgba(251, 191, 36, 0.16) 0%, rgba(251, 191, 36, 0.04) 100%);
    box-shadow: 0 4px 14px rgba(212, 175, 55, 0.25);
    transform: translateY(-1px);
}

.passport-badge-card.locked {
    opacity: 0.55;
    filter: grayscale(70%);
}

.badge-icon-wrap {
    font-size: 1.75rem;
    line-height: 1;
    margin-bottom: 5px;
}

.badge-name {
    font-size: 0.72rem;
    font-weight: 800;
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.badge-status {
    font-size: 0.62rem;
    font-weight: 700;
    color: #15803d;
    margin-top: 3px;
}

[data-theme="dark"] .badge-status {
    color: #34d399;
}

.passport-badge-card.locked .badge-status {
    color: #475569;
}

[data-theme="dark"] .passport-badge-card.locked .badge-status {
    color: #94a3b8;
}

/* ── Page Flip Turning Animation ────────────────────────────────────────── */
@keyframes pageTurnIn {
    0% {
        opacity: 0.35;
        transform: rotateY(-5deg) scale(0.98);
    }
    100% {
        opacity: 1;
        transform: rotateY(0deg) scale(1);
    }
}

.passport-page-turning {
    animation: pageTurnIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    transform-origin: left center;
}

/* ── City Page Quick-Flip Ribbon & Flip Controls ─────────────────────────── */
.passport-page-ribbon {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    background: rgba(0, 0, 0, 0.03);
    border: 1px dashed rgba(180, 150, 90, 0.4);
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 12px;
}

[data-theme="dark"] .passport-page-ribbon {
    background: rgba(0, 0, 0, 0.25);
    border-color: rgba(212, 175, 55, 0.25);
}

.ribbon-tabs-wrap {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.ribbon-label {
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: #334155;
    text-transform: uppercase;
}

[data-theme="dark"] .ribbon-label {
    color: #94a3b8;
}

.ribbon-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.passport-ribbon-tab {
    background: rgba(255, 255, 255, 0.85);
    color: #1e293b;
    border: 1.5px solid rgba(180, 150, 90, 0.5);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 0.76rem;
    font-weight: 800;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all var(--transition);
}

[data-theme="dark"] .passport-ribbon-tab {
    background: rgba(19, 25, 36, 0.85);
    color: #e2e8f0;
    border-color: rgba(212, 175, 55, 0.3);
}

.passport-ribbon-tab:hover {
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-1px);
}

.passport-ribbon-tab.active {
    background: var(--primary);
    color: #ffffff;
    border-color: var(--primary);
    box-shadow: 0 2px 8px var(--primary-glow);
    transform: translateY(-1px);
}

.tab-page-no {
    font-size: 0.6rem;
    font-weight: 900;
    opacity: 0.85;
    letter-spacing: 0.04em;
}

.tab-badge {
    background: rgba(0, 0, 0, 0.14);
    border-radius: 10px;
    padding: 1px 6px;
    font-size: 0.64rem;
    font-weight: 900;
    line-height: 1.2;
}

[data-theme="dark"] .tab-badge {
    background: rgba(255, 255, 255, 0.12);
}

.passport-ribbon-tab.active .tab-badge {
    background: rgba(0, 0, 0, 0.28);
    color: #ffffff;
}

.passport-city-picker-inline {
    margin-left: auto;
}

.passport-city-select-mini {
    background: #ffffff;
    color: #0f172a;
    border: 1.5px solid rgba(180, 150, 90, 0.5);
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 0.76rem;
    font-weight: 800;
    cursor: pointer;
    outline: none;
    transition: all var(--transition);
}

[data-theme="dark"] .passport-city-select-mini {
    background: #0f172a;
    color: #f8fafc;
    border-color: rgba(212, 175, 55, 0.4);
}

.passport-city-select-mini:hover,
.passport-city-select-mini:focus {
    border-color: #d4af37;
}

/* Page Flip Controls */
.passport-page-flip-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
    padding: 4px 0;
}

.passport-flip-btn {
    background: rgba(255, 255, 255, 0.85);
    color: #0f172a;
    border: 1.5px solid rgba(180, 150, 90, 0.5);
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 0.75rem;
    font-weight: 800;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all var(--transition);
}

[data-theme="dark"] .passport-flip-btn {
    background: rgba(19, 25, 36, 0.85);
    color: #f1f5f9;
    border-color: rgba(212, 175, 55, 0.3);
}

.passport-flip-btn:hover:not(:disabled) {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-glow);
    transform: translateY(-1px);
}

.passport-flip-btn:disabled {
    opacity: 0.55;
    color: var(--text-light);
    border-color: var(--border);
    cursor: not-allowed;
}

.passport-flip-indicator {
    text-align: center;
}

.flip-page-label {
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    color: #854d0e;
    display: block;
    text-transform: uppercase;
}

[data-theme="dark"] .flip-page-label {
    color: #fbbf24;
}

.flip-city-name {
    font-size: 0.95rem;
    font-weight: 900;
    color: inherit;
    letter-spacing: 0.04em;
}

.customs-port-hero {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 1.15rem;
    font-weight: 900;
    color: inherit;
    margin-top: 2px;
}

.passport-bottom-flip-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 20px;
    padding-top: 14px;
    border-top: 1px dashed rgba(180, 150, 90, 0.4);
}

[data-theme="dark"] .passport-bottom-flip-bar {
    border-top-color: rgba(212, 175, 55, 0.25);
}

.bottom-flip-indicator {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: #334155;
    text-transform: uppercase;
}

[data-theme="dark"] .bottom-flip-indicator {
    color: #94a3b8;
}

/* ── PAGE 03: City Chomp Stamps & Rubber Cachets ─────────────────────────── */
.passport-customs-control {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    background: rgba(255, 255, 255, 0.6);
    border: 1.5px solid rgba(180, 150, 90, 0.35);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
}

[data-theme="dark"] .passport-customs-control {
    background: rgba(19, 25, 36, 0.6);
    border-color: rgba(212, 175, 55, 0.25);
}

.customs-control-label {
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: #334155;
    display: block;
    margin-bottom: 4px;
    text-transform: uppercase;
}

[data-theme="dark"] .customs-control-label {
    color: #94a3b8;
}

.passport-city-select-wrap {
    margin-top: 2px;
}

.passport-city-select {
    background: #ffffff;
    color: #0f172a;
    border: 1.5px solid rgba(180, 150, 90, 0.5);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 0.92rem;
    font-weight: 800;
    cursor: pointer;
    outline: none;
    transition: all var(--transition);
}

[data-theme="dark"] .passport-city-select {
    background: #0f172a;
    color: #f8fafc;
    border-color: rgba(212, 175, 55, 0.4);
}

.passport-city-select:hover,
.passport-city-select:focus {
    border-color: #d4af37;
    box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.2);
}

.customs-control-right {
    min-width: 170px;
}

.customs-stat-tally {
    text-align: right;
}

.stat-count {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--primary);
    line-height: 1;
}

.stat-denom {
    font-size: 0.85rem;
    font-weight: 700;
    color: #334155;
}

[data-theme="dark"] .stat-denom {
    color: #94a3b8;
}

.customs-stat-pct {
    font-size: 0.74rem;
    font-weight: 700;
    color: inherit;
    margin-top: 2px;
}

.passport-hero-progress {
    height: 7px;
    background: rgba(0, 0, 0, 0.12);
    border-radius: 4px;
    margin-top: 6px;
    overflow: hidden;
}

[data-theme="dark"] .passport-hero-progress {
    background: rgba(255, 255, 255, 0.12);
}

.passport-hero-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), #d97706);
    border-radius: 4px;
    transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.passport-city-actions {
    margin-top: 6px;
    display: flex;
    justify-content: flex-end;
}

.passport-clear-city-btn {
    background: transparent;
    color: #dc2626;
    border: 1px solid rgba(220, 38, 38, 0.35);
    border-radius: var(--radius-pill);
    padding: 3px 10px;
    font-size: 0.68rem;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--transition);
}

.passport-clear-city-btn:hover {
    background: rgba(220, 38, 38, 0.1);
    border-color: #dc2626;
}

/* ── Neighborhood Sectors & Authentic Rubber Postal Stamps ────────────────── */
.passport-neighborhoods-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.passport-nb-row {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(180, 150, 90, 0.35);
    border-radius: 8px;
    padding: 14px 16px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

[data-theme="dark"] .passport-nb-row {
    background: rgba(19, 25, 36, 0.7);
    border-color: rgba(212, 175, 55, 0.2);
}

.passport-nb-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.passport-sector-kicker {
    font-size: 0.88rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    color: #854d0e;
    text-transform: uppercase;
}

[data-theme="dark"] .passport-sector-kicker {
    color: #fbbf24;
}

.passport-nb-count-group {
    text-align: right;
}

.passport-nb-count {
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--primary);
}

.passport-nb-pct {
    font-size: 0.75rem;
    color: #334155;
    font-weight: 600;
    margin-left: 4px;
}

[data-theme="dark"] .passport-nb-pct {
    color: #94a3b8;
}

.passport-progress-track {
    height: 6px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 12px;
}

[data-theme="dark"] .passport-progress-track {
    background: rgba(255, 255, 255, 0.1);
}

.passport-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), #ea580c);
    border-radius: 3px;
    transition: width 0.5s ease;
}

.passport-stamped-cachets {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 8px;
    align-items: stretch;
}

/* Authentic Postal Rubber Entry Stamp */
.passport-rubber-stamp {
    flex: 1 1 180px;
    min-width: 175px;
    max-width: 230px;
    box-sizing: border-box;
    border: 2.5px solid var(--stamp-ink, #dc2626);
    border-radius: 7px;
    padding: 7px 9px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), inset 0 0 0 1.5px var(--stamp-ink, #dc2626);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

[data-theme="dark"] .passport-rubber-stamp {
    background: rgba(15, 20, 30, 0.88);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05), inset 0 0 0 1.5px var(--stamp-ink, #dc2626);
}

.passport-rubber-stamp:hover {
    transform: scale(1.04) !important;
    z-index: 10;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25), inset 0 0 0 1.5px var(--stamp-ink, #dc2626);
}

.passport-rubber-stamp.is-private {
    opacity: 0.9;
    border-style: dashed;
}

.rubber-stamp-border {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
}

.rubber-stamp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px dashed var(--stamp-ink, #dc2626);
    padding-bottom: 3px;
    margin-bottom: 5px;
}

.rubber-stamp-port {
    font-size: 0.62rem;
    font-weight: 900;
    color: var(--stamp-ink, #dc2626);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.rubber-stamp-type {
    font-size: 0.58rem;
    font-weight: 900;
    color: var(--stamp-ink, #dc2626);
    letter-spacing: 0.08em;
    border: 1px solid var(--stamp-ink, #dc2626);
    padding: 0 3px;
    border-radius: 2px;
    text-transform: uppercase;
}

.rubber-stamp-body {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 5px;
}

.rubber-stamp-shape-seal {
    color: var(--stamp-ink, #dc2626);
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.rubber-stamp-restaurant-name {
    font-size: 0.85rem;
    font-weight: 900;
    color: var(--stamp-ink, #dc2626);
    line-height: 1.15;
    word-break: break-word;
    letter-spacing: 0.01em;
}

.rubber-stamp-date-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 0.66rem;
    font-weight: 800;
    color: var(--stamp-ink, #dc2626);
    border-top: 1px dashed var(--stamp-ink, #dc2626);
    padding-top: 3px;
    margin-bottom: 5px;
    letter-spacing: 0.06em;
}

.rubber-stamp-star {
    font-size: 0.58rem;
    opacity: 0.85;
}

.rubber-stamp-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    padding-top: 5px;
}

[data-theme="dark"] .rubber-stamp-controls {
    border-top-color: rgba(255, 255, 255, 0.08);
}

.passport-stamp-privacy-btn {
    background: transparent;
    border: 1px solid var(--stamp-ink, #dc2626);
    color: var(--stamp-ink, #dc2626);
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    padding: 2px 5px;
    border-radius: 8px;
    cursor: pointer;
    transition: all var(--transition);
    line-height: 1.2;
}

.passport-stamp-privacy-btn:hover {
    background: var(--stamp-ink, #dc2626);
    color: #ffffff;
}

.rubber-stamp-actions {
    display: flex;
    align-items: center;
    gap: 3px;
}

.passport-stamp-share-btn,
.passport-stamp-unstamp-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 0.78rem;
    color: var(--stamp-ink, #dc2626);
    opacity: 0.7;
    padding: 1px 3px;
    transition: opacity var(--transition), transform var(--transition);
}

.passport-stamp-unstamp-btn {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
}

.passport-stamp-share-btn:hover,
.passport-stamp-unstamp-btn:hover {
    opacity: 1;
    transform: scale(1.22);
}

.passport-empty-sector {
    border: 1.5px dashed rgba(180, 150, 90, 0.4);
    border-radius: 6px;
    padding: 12px;
    text-align: center;
    background: rgba(0, 0, 0, 0.02);
    margin-top: 6px;
}

[data-theme="dark"] .passport-empty-sector {
    border-color: rgba(212, 175, 55, 0.2);
    background: rgba(0, 0, 0, 0.15);
}

.empty-watermark-icon {
    font-size: 1.1rem;
    opacity: 0.45;
    display: block;
    margin-bottom: 2px;
}

.empty-watermark-text {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: #334155;
    display: block;
}

[data-theme="dark"] .empty-watermark-text {
    color: #94a3b8;
}

.empty-watermark-hint {
    font-size: 0.65rem;
    color: #334155;
    opacity: 0.85;
    font-style: italic;
    display: block;
    margin-top: 2px;
}

[data-theme="dark"] .empty-watermark-hint {
    color: #94a3b8;
}

.visited-btn.active {
    background: #10b981 !important;
    color: #ffffff !important;
    border-color: #059669 !important;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.35);
}

.share-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
    justify-content: center;
}

.share-card-actions button {
    flex: 1 1 140px;
}

/* ==========================================================================
   Global Modal Overlay & Dialog Styles
   ========================================================================== */

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
    animation: fadeInModal 0.2s ease-out;
}

@keyframes fadeInModal {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-content {
    background: var(--surface);
    color: var(--text);
    border-radius: var(--radius-lg);
    border: 1.5px solid var(--border);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    position: relative;
    max-width: 92vw;
    max-height: 90vh;
    overflow-y: auto;
    box-sizing: border-box;
    animation: popInModal 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes popInModal {
    from { transform: scale(0.92); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.profile-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 1.4rem;
    line-height: 1;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition);
    z-index: 10;
}

.profile-modal-close:hover {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

.share-card-content {
    max-width: 520px;
    width: 100%;
    padding: 24px;
    text-align: center;
}

.share-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.share-card-header h3 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text);
}

.canvas-preview-wrap {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 12px 0;
}

.canvas-preview-wrap canvas {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

.history-entry-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 6px;
    flex-wrap: wrap;
}

.history-stamp-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--surface-2);
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    padding: 3px 10px;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--transition);
}

.history-stamp-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(232, 93, 4, 0.1);
}

.history-stamp-btn.active {
    background: #10b981;
    color: #ffffff;
    border-color: #059669;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3);
}

/* ==========================================================================
   Stacked Modals (Ensure share card preview & photo prompts pop up over any modal)
   ========================================================================== */
#share-card-modal,
.share-card-modal {
    z-index: 100010 !important;
}

#stamp-photo-prompt-modal,
.stamp-photo-prompt-modal {
    z-index: 100020 !important;
}

#stamp-remove-confirm-modal,
.stamp-remove-confirm-modal {
    z-index: 100030 !important;
}



/* -----------------------------------------------
   Look-and-feel pass (2026-09-27)
   ----------------------------------------------- */

/* Title: give the city its own ink color so it stands out distinctly from NomNom */
.city-reel-item {
    background: linear-gradient(130deg, #1e1b4b 0%, #312e81 100%);
    -webkit-background-clip: text;
    background-clip: text;
}
[data-theme="dark"] .city-reel-item {
    background: linear-gradient(130deg, #f8fafc 0%, #cbd5e1 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

/* Keep the result card clear of the sticky auth bar when it's scrolled into view */
#result-card-shell { scroll-margin-top: 64px; }

/* Hours: collapsed to an open/closed badge + today's hours */
.enriched-info .hours-details { min-width: 0; }
.enriched-info .hours-details summary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    cursor: pointer;
    list-style: none;
    font-weight: 700;
    color: var(--text);
}
.enriched-info .hours-details summary::-webkit-details-marker { display: none; }
.enriched-info .hours-details summary::after {
    content: 'Full week ▾';
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--primary);
}
.enriched-info .hours-details[open] summary::after { content: 'Hide ▴'; }
.enriched-info .hours-week { margin-top: 8px; color: var(--text-muted); }
.hours-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: var(--radius-pill);
    font-size: 0.75rem;
    font-weight: 800;
}
.hours-badge.is-open   { background: color-mix(in srgb, var(--green) 14%, transparent); color: var(--green); }
.hours-badge.is-closed { background: color-mix(in srgb, var(--red) 12%, transparent);   color: var(--red); }

/* Readability: nothing informational below 12px */
.result-eyebrow { font-size: 0.75rem; }
.result-chip { font-size: 0.8rem; }
.rating-source,
.enriched-info .enriched-label,
.enriched-info .data-freshness,
.osm-attribution,
.medal-count { font-size: 0.75rem; }

/* Inactive secondary buttons should still read as buttons */
.secondary-btn:disabled,
.clean-game-btn:disabled,
.clean-game-btn.clean-state:disabled,
[data-theme="dark"] .clean-game-btn:disabled,
[data-theme="dark"] .clean-game-btn.clean-state:disabled {
    opacity: 1;
    color: var(--text-muted);
    border-color: var(--border);
    cursor: not-allowed;
}

/* Desktop: show the full pool count instead of truncating it */
.rig-section .adventure-filter { grid-template-columns: 82px minmax(120px,1fr) auto; }
.adventure-filter #restaurant-count { width: auto; min-width: 0; overflow: visible; text-overflow: clip; }
@media (max-width: 480px) {
    .rig-section .adventure-filter { grid-template-columns: 82px minmax(0,1fr); }
}

/* Guests can't use stamps, so don't offer a stamp-based filter */
body.signed-out .quick-filters label:has(#avoid-stamped-filter) { display: none !important; }

/* Touch targets: at least 44px on touch devices */
@media (pointer: coarse) {
    .sound-toggle-btn,
    .theme-toggle-btn { min-height: 44px; min-width: 44px; }
    .history-close-btn,
    .profile-modal-close { min-width: 44px; min-height: 44px; }
    .rig-section .quick-filters label { min-height: 44px; }
    .quick-filters input[type="checkbox"],
    .history-filter input[type="checkbox"] { width: 20px; height: 20px; }
    .forgot-password-btn { padding: 10px 12px; }
    .leaderboard-tab,
    .share-btn,
    .social-search-btn { min-height: 44px; }
}

/* Stamp photo completion */
#stamp-photo-dialog { width: min(440px, calc(100vw - 40px)); max-height: 85vh; overflow: auto; border: 0; border-radius: 18px; padding: 24px; color: #172033; background: #fff; }
#stamp-photo-dialog::backdrop { background: rgb(0 0 0 / 55%); }
#stamp-photo-dialog p { line-height: 1.5; }
#stamp-photo-dialog input { display: block; max-width: 100%; margin: 12px 0; }
.stamp-photo-preview { max-width: 100%; max-height: 220px; object-fit: contain; border-radius: 10px; }
.stamp-photo-preview[hidden] { display: none; }
.public-stamp-photo { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; }
.stamp-leaderboard-help { flex-basis: 100%; margin: 0 0 8px; font-size: 0.85rem; }
.leaderboard-stamps-controls { flex-wrap: wrap; }
.passport-stamp-photo-btn { font-size: 11px; cursor: pointer; border: 1px solid currentColor; border-radius: 5px; background: transparent; color: inherit; padding: 4px; }