/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary-color: #000000;
    --secondary-color: #000000;
    --accent-color: #000000;
    --gold-color: #FFFFFF;
    --yellow-color: #FFFFFF;
    --red-color: #000000;
    --white-color: #FFFFFF;
    --black-color: #000000;
    --text-light: #FFFFFF;
    --text-dark: #000000;
    --bg-light: #FFFFFF;
    --bg-dark: #000000;
    --gray-light: #F5F5F5;
    --gray-medium: #808080;
    --gray-dark: #333333;
}

body {
    font-family: 'Georgia', 'Times New Roman', serif;
    line-height: 1.6;
    color: var(--text-dark);
    overflow-x: hidden;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Navigation */
.navbar {
    background: rgba(0, 0, 0, 0.95);
    padding: 1rem 0;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo h1 {
    color: var(--white-color);
    font-size: 1.5rem;
    font-weight: bold;
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 2rem;
}

.nav-menu > li > a {
    color: var(--text-light);
    text-decoration: none;
    font-size: 1rem;
    transition: color 0.3s;
    font-weight: 500;
}

.nav-menu > li > a:hover {
    color: var(--gray-medium);
}

.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
    gap: 5px;
}

.hamburger span {
    width: 25px;
    height: 3px;
    background: var(--text-light);
    transition: 0.3s;
}

/* Hero Section */
.hero {
    height: 100vh;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.4) 0%, rgba(220, 20, 60, 0.3) 100%),
                url('IMAGES/Chinesca.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-top: 70px;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
}

.hero-content {
    position: relative;
    z-index: 1;
    text-align: center;
    color: var(--text-light);
}

.hero-title {
    font-size: 4.5rem;
    margin-bottom: 1rem;
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.8);
    color: var(--white-color);
}

.hero-subtitle {
    font-size: 1.5rem;
    margin-bottom: 2rem;
    font-style: italic;
}

.hero-buttons {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 15px 30px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: all 0.3s;
    font-size: 1.1rem;
    border: 2px solid transparent;
}

.btn-primary {
    background: var(--black-color);
    color: var(--white-color);
}

.btn-primary:hover {
    background: transparent;
    border-color: var(--black-color);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.6);
}

.btn-secondary {
    background: transparent;
    color: var(--white-color);
    border: 2px solid var(--white-color);
}

.btn-secondary:hover {
    background: var(--white-color);
    color: var(--black-color);
    transform: translateY(-2px);
}

/* About Section */
.about {
    padding: 80px 0;
    background: var(--bg-light);
    text-align: center;
}

.about h2 {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    color: var(--black-color);
}

.about-text {
    font-size: 1.2rem;
    max-width: 800px;
    margin: 0 auto;
    color: var(--black-color);
    line-height: 1.8;
}

/* Menu Section */
.menu {
    padding: 80px 0;
    background: var(--bg-dark);
    color: var(--text-light);
}

.menu h2 {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: var(--white-color);
}

.section-subtitle {
    text-align: center;
    font-size: 1.2rem;
    margin-bottom: 3rem;
    color: var(--text-light);
    opacity: 0.9;
}

.menu-tabs {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 3rem;
    flex-wrap: wrap;
}

.tab-btn {
    padding: 12px 24px;
    background: transparent;
    color: var(--white-color);
    border: 2px solid var(--white-color);
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.3s;
    font-weight: 500;
}

.tab-btn:hover,
.tab-btn.active {
    background: var(--white-color);
    color: var(--black-color);
    transform: translateY(-2px);
}

.menu-content {
    min-height: 400px;
}

.menu-category {
    display: none;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.menu-category.active {
    display: grid;
}

.menu-item {
    background: rgba(255, 255, 255, 0.1);
    padding: 2rem;
    border-radius: 10px;
    border-left: 4px solid var(--white-color);
    transition: transform 0.3s, box-shadow 0.3s;
}

.menu-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(255, 255, 255, 0.4);
}

.menu-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.menu-item-header h3 {
    color: var(--white-color);
    font-size: 1.3rem;
}

.price {
    color: var(--white-color);
    font-weight: bold;
    font-size: 1.2rem;
}

.menu-item p {
    color: var(--text-light);
    opacity: 0.9;
    line-height: 1.6;
}

.call-to-order {
    text-align: center;
    margin-top: 3rem;
}

/* Reservations Section */
.reservations {
    padding: 80px 0;
    background: var(--bg-light);
}

.reservations h2 {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: var(--black-color);
}

.reservation-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    margin-top: 3rem;
}

.reservation-info {
    background: var(--black-color);
    color: var(--white-color);
    padding: 2.5rem;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}

.reservation-info h3 {
    color: var(--white-color);
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

.phone-link {
    display: inline-block;
    color: var(--white-color);
    font-size: 1.5rem;
    font-weight: bold;
    text-decoration: none;
    margin: 1rem 0;
    transition: color 0.3s;
}

.phone-link:hover {
    color: var(--gray-medium);
}

.hours {
    margin-top: 2rem;
}

.hours h3 {
    margin-bottom: 1rem;
}

.hours ul {
    list-style: none;
}

.hours li {
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Seating Chart - Complete Redesign */
.seating-chart-container {
    margin-top: 2rem;
    background: rgba(0, 0, 0, 0.3);
    padding: 1.5rem;
    border-radius: 8px;
    border: 2px solid var(--white-color);
}

.chart-top-header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.chart-main-title {
    color: var(--white-color);
    font-size: 1.1rem;
    margin: 0;
    text-align: center;
    font-weight: bold;
}

.wc-top-left,
.wc-top-right {
    color: var(--white-color);
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

.chart-main-content {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.chart-left-side {
    flex: 1;
}

.chart-left-side {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.chart-right-side {
    flex-shrink: 0;
}


/* VIP Container */
.vip-container {
    display: flex;
    gap: 0.6rem;
    justify-content: flex-start;
    margin-bottom: 0.8rem;
    margin-left: 10rem;
}

.vip-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
}

.vip-label {
    color: var(--white-color);
    font-size: 0.7rem;
    font-weight: bold;
}

.vip-seat {
    width: 32px;
    height: 32px;
    background: var(--white-color);
    color: var(--black-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: bold;
    border: 1.5px solid var(--black-color);
    border-radius: 2px;
}


/* Main Seating */
.main-seating {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 0.8rem;
}

.legend-box {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
    color: var(--white-color);
    font-size: 0.75rem;
}

.legend-circle {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--white-color);
    border: 1.5px solid var(--black-color);
}

/* Seat Rows */
.seat-row-top {
    display: flex;
    gap: 0.4rem;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    margin-left: calc(3 * (32px + 0.4rem));
}

.seat-spacer-small {
    width: 20px;
    height: 32px;
    display: inline-block;
}

.seat-row-main {
    display: flex;
    gap: 0.4rem;
    justify-content: flex-start;
    margin-left: calc(3 * (32px + 0.4rem));
}

.seat-row-middle {
    display: flex;
    gap: 0.4rem;
    justify-content: flex-start;
}

.seat-row-bottom {
    display: flex;
    gap: 0.4rem;
    justify-content: flex-start;
}

.seat-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--white-color);
    color: var(--black-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: bold;
    border: 1.5px solid var(--black-color);
    transition: transform 0.2s;
}

.seat-circle:hover {
    transform: scale(1.1);
}

/* Stage Front Container */
.stage-front-container {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-top: 0.5rem;
}

.stage-front-left,
.stage-front-right {
    display: flex;
    gap: 0.4rem;
}

.seat-square {
    width: 32px;
    height: 32px;
    background: var(--white-color);
    color: var(--black-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: bold;
    border: 1.5px solid var(--black-color);
    border-radius: 2px;
    transition: transform 0.2s;
}

.seat-square:hover {
    transform: scale(1.1);
}

/* Reserved Table Styling */
.vip-seat.reserved,
.seat-circle.reserved,
.seat-square.reserved {
    background: var(--white-color);
    color: #DC143C;
    border-color: #DC143C;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1px;
    min-height: 32px;
}

.reserved-x {
    font-size: 0.9rem;
    font-weight: bold;
    color: #DC143C;
    line-height: 0.9;
    display: block;
}

.reserved-time {
    font-size: 0.45rem;
    color: #DC143C;
    font-weight: normal;
    line-height: 0.9;
    display: block;
    margin-top: -1px;
}

/* Stage */
.stage-box {
    width: 50%;
    height: 25px;
    background: var(--black-color);
    color: var(--white-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.75rem;
    border: 2px solid var(--white-color);
    border-radius: 4px;
    letter-spacing: 1px;
    margin-top: 0.5rem;
    margin-left: auto;
    margin-right: auto;
}

/* Right Side */
.chart-right-side {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    align-items: center;
}

.dj-box {
    width: 70px;
    height: 50px;
    background: var(--black-color);
    color: var(--white-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.9rem;
    border: 2px solid var(--white-color);
    border-radius: 4px;
}

.extra-seats {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 8rem;
}

.chart-bottom-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.5rem;
}

.wc-bottom-right {
    color: var(--white-color);
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

/* Reservation Form */
.reservation-form {
    background: white;
    padding: 2.5rem;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.reservation-form .btn-primary {
    width: 100%;
    display: block;
    text-align: center;
}

.reservation-form h3 {
    color: var(--black-color);
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
}

.form-note {
    color: var(--gray-dark);
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
    font-style: italic;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--black-color);
    font-weight: 500;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px;
    border: 2px solid #ddd;
    border-radius: 5px;
    font-size: 1rem;
    font-family: inherit;
    transition: border-color 0.3s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--black-color);
}

.form-group textarea {
    resize: vertical;
}

.cancel-link-container {
    text-align: center;
    margin-top: 1rem;
}

.cancel-link {
    font-size: 0.9rem;
    text-decoration: underline;
    color: var(--black-color);
    display: inline-block;
    transition: color 0.3s;
}

.cancel-link:hover {
    color: var(--gray-dark);
}

/* Cancellation Section */
.cancellation {
    padding: 80px 0;
    background: var(--bg-light);
}

.cancellation h2 {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: var(--black-color);
}

.cancellation .section-subtitle {
    text-align: center;
    font-size: 1.2rem;
    margin-bottom: 3rem;
    color: var(--gray-dark);
}

.cancellation-form {
    max-width: 500px;
    margin: 0 auto;
    background: white;
    padding: 2.5rem;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.cancellation-form h3 {
    color: var(--black-color);
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
    text-align: center;
}

.cancellation-step {
    width: 100%;
}

.confirmation-question {
    font-size: 1.2rem;
    font-weight: bold;
    text-align: center;
    margin-bottom: 1rem;
    color: var(--black-color);
}

.table-number-display {
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
    color: var(--black-color);
    padding: 1rem;
    background: var(--gray-light);
    border-radius: 5px;
    margin-bottom: 1.5rem;
}

.button-group {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.button-group .btn {
    flex: 1;
    max-width: 200px;
}

.thank-you-message {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
    padding: 3rem;
    background: white;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.thank-you-message h2 {
    color: var(--black-color);
    font-size: 2rem;
    line-height: 1.6;
}

/* Contact Section */
.contact {
    padding: 80px 0;
    background: var(--black-color);
    color: var(--white-color);
}

.contact h2 {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 3rem;
    color: var(--white-color);
}

.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.contact-card {
    background: rgba(255, 255, 255, 0.1);
    padding: 2rem;
    border-radius: 10px;
    text-align: center;
    transition: transform 0.3s, box-shadow 0.3s;
    border-top: 3px solid var(--white-color);
}

.contact-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(255, 255, 255, 0.4);
}

.contact-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.contact-card h3 {
    color: var(--white-color);
    margin-bottom: 1rem;
    font-size: 1.3rem;
}

.contact-card p {
    margin-bottom: 1rem;
    line-height: 1.6;
    opacity: 0.9;
}

.contact-link {
    color: var(--white-color);
    text-decoration: none;
    font-weight: bold;
    font-size: 1.2rem;
    transition: color 0.3s;
}

.contact-link:hover {
    color: var(--gray-medium);
}

/* Footer */
.footer {
    background: var(--bg-dark);
    color: var(--text-light);
    padding: 2rem 0;
    text-align: center;
}

.footer p {
    margin: 0.5rem 0;
    opacity: 0.8;
}

.footer a {
    color: var(--white-color);
    text-decoration: none;
}

.footer a:hover {
    text-decoration: underline;
}

/* Smooth Scrolling */
html {
    scroll-behavior: smooth;
}

/* Responsive Design */
@media (max-width: 768px) {
    .hamburger {
        display: flex;
    }

    .nav-menu {
        position: fixed;
        left: -100%;
        top: 70px;
        flex-direction: column;
        background: var(--black-color);
        width: 100%;
        text-align: center;
        transition: 0.3s;
        box-shadow: 0 10px 27px rgba(0, 0, 0, 0.3);
        padding: 2rem 0;
    }

    .nav-menu.active {
        left: 0;
    }

    .hero-title {
        font-size: 3rem;
    }

    .hero-subtitle {
        font-size: 1.2rem;
    }

    .hero-buttons {
        flex-direction: column;
        align-items: center;
    }

    .hero-buttons .btn {
        width: 90%;
        max-width: 300px;
    }

    .reservation-content {
        grid-template-columns: 1fr;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .menu-tabs {
        gap: 0.5rem;
    }

    .tab-btn {
        padding: 10px 16px;
        font-size: 0.9rem;
    }

    .menu-category {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 2.5rem;
    }

    .about h2,
    .menu h2,
    .reservations h2,
    .contact h2 {
        font-size: 2rem;
    }

    .menu-tabs {
        flex-direction: column;
    }

    .tab-btn {
        width: 100%;
    }
}

/* Auth Modal */
.auth-modal {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
}

.auth-modal-content {
    background-color: var(--white-color);
    margin: 5% auto;
    padding: 2rem;
    border: 2px solid var(--black-color);
    width: 90%;
    max-width: 400px;
    position: relative;
    border-radius: 8px;
}

.auth-close {
    color: var(--black-color);
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    position: absolute;
    right: 1rem;
    top: 1rem;
}

.auth-close:hover {
    color: var(--gray-medium);
}

.auth-form h2 {
    margin-bottom: 0.5rem;
    color: var(--black-color);
}

.auth-form p {
    margin-bottom: 1.5rem;
    color: var(--gray-dark);
}

.auth-form-intro {
    margin-bottom: 1rem;
    font-size: 0.95rem;
}

.auth-switch {
    margin-top: 1rem;
    text-align: center;
}

.auth-switch a {
    color: var(--black-color);
    text-decoration: underline;
}

.auth-divider {
    text-align: center;
    margin: 1rem 0;
    color: var(--gray-dark);
    font-size: 0.9rem;
}

.auth-google-label {
    text-align: center;
    margin: 0 0 0.5rem 0;
    color: var(--gray-dark);
    font-size: 0.9rem;
}

.google-signin-container {
    display: flex;
    justify-content: center;
    margin: 1rem 0;
    min-height: 44px;
}

.google-signin-container iframe {
    margin: 0 auto;
}

.btn-google {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    max-width: 320px;
    padding: 12px 20px;
    background: #fff;
    border: 1px solid #dadce0;
    border-radius: 4px;
    font-size: 15px;
    font-weight: 500;
    color: #3c4043;
    cursor: pointer;
    pointer-events: auto;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.2s, box-shadow 0.2s;
}

.btn-google:hover {
    background: #f8f9fa;
    border-color: #dadce0;
}

.btn-google:active {
    background: #e8eaed;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.btn-google-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-google-icon svg {
    display: block;
}

.login-required {
    background: #fff3cd;
    border: 1px solid #ffc107;
    padding: 1rem;
    border-radius: 4px;
    margin-bottom: 1rem;
}

.login-required a {
    color: var(--black-color);
    text-decoration: underline;
    font-weight: bold;
}

/* Login page (login.html) */
.login-page-section {
    padding: 120px 0 80px;
    min-height: 60vh;
}

.container-narrow {
    max-width: 420px;
    margin: 0 auto;
}

.login-page-title {
    text-align: center;
    margin-bottom: 0.5rem;
    color: var(--black-color);
}

.login-page-subtitle {
    text-align: center;
    color: var(--gray-dark);
    margin-bottom: 2rem;
}

.auth-form-page {
    background: var(--white-color);
    border: 2px solid var(--black-color);
    border-radius: 8px;
    padding: 2rem;
    margin-bottom: 1.5rem;
}

.auth-form-page h3 {
    margin-top: 0;
    margin-bottom: 1.5rem;
    color: var(--black-color);
}

.btn-block {
    width: 100%;
    margin-top: 0.5rem;
}

.login-page-back {
    text-align: center;
    margin-top: 1rem;
}

.login-page-back a {
    color: var(--gray-dark);
    text-decoration: underline;
}

.login-page-message {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    border-radius: 6px;
    text-align: center;
    font-weight: 500;
}

.login-page-message-show {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

/* Profile Section */
.profile-section {
    padding: 100px 0 80px;
    background: var(--bg-light);
}

.profile-user-name {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--black-color);
    margin-bottom: 1.5rem;
    padding: 0;
}

.profile-user {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.profile-user .profile-user-name {
    margin-bottom: 0.25rem;
}

.profile-user-email {
    color: #666;
    margin: 0;
}

.profile-user-photo {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.profile-icon img.profile-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.profile-info {
    background: var(--black-color);
    color: var(--white-color);
    padding: 2rem;
    border-radius: 8px;
    margin-bottom: 2rem;
}

.profile-info h3 {
    margin-bottom: 1rem;
    color: var(--white-color);
}

.profile-info p {
    margin: 0.5rem 0;
}

.reservations-list {
    margin-top: 2rem;
}

.reservations-list h3 {
    margin-bottom: 1.5rem;
    color: var(--black-color);
}

.reservations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}

.reservation-card {
    background: var(--white-color);
    border: 2px solid var(--black-color);
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.reservation-card h4 {
    color: var(--black-color);
    margin-bottom: 1rem;
    font-size: 1.2rem;
}

.reservation-card p {
    margin: 0.5rem 0;
    color: var(--gray-dark);
}

/* Profile page – simple card: order #, table, name, people */
.profile-card-simple {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.profile-card-order {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--black-color);
    letter-spacing: 0.05em;
}

.profile-card-table {
    font-size: 1.1rem;
    color: var(--gray-dark);
}

.profile-card-name {
    font-size: 1rem;
    color: var(--black-color);
}

.profile-card-guests {
    font-size: 0.95rem;
    color: var(--gray-dark);
}

.profile-logout-wrap {
    margin-top: 2rem;
    text-align: center;
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.profile-icon {
    color: var(--white-color);
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    transition: all 0.3s;
}

.profile-icon:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

.profile-icon.active {
    background: rgba(255, 255, 255, 0.3);
}

/* Header "Sign out" button (only visible when signed in) */
.nav-signout {
    display: none;
    padding: 6px 16px;
    font-size: 0.95rem;
    font-family: inherit;
    line-height: 1.4;
    cursor: pointer;
    white-space: nowrap;
}

.is-signed-in .nav-signout {
    display: inline-block;
}

.nav-signout:disabled {
    opacity: 0.6;
    cursor: default;
}

/* Pages without a profile icon: keep the header layout unchanged while signed out */
.nav-right-auth {
    display: contents;
}

.is-signed-in .nav-right-auth {
    display: flex;
}

/* Profile page Sign out button sits on a white background */
.profile-logout-wrap .btn-secondary {
    color: var(--black-color);
    border-color: var(--black-color);
    cursor: pointer;
    font-family: inherit;
}

.profile-logout-wrap .btn-secondary:hover {
    background: var(--black-color);
    color: var(--white-color);
}

/* Small phones: keep logo, Sign out, profile icon and menu on one row */
@media (max-width: 480px) {
    .nav-signout {
        padding: 4px 9px;
        font-size: 0.8rem;
    }

    .is-signed-in .nav-right {
        gap: 0.6rem;
    }

    .is-signed-in .navbar .logo h1 {
        font-size: 1.2rem;
        white-space: nowrap;
    }
}

/* Reservation form notices (2 tables per account, sign-in required) */
.reservation-limit-message {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.reservation-limit-message a {
    color: inherit;
    font-weight: bold;
    text-decoration: underline;
}

/* Phone/address links inside regular text: look exactly like the surrounding text */
.inline-contact-link {
    color: inherit;
    text-decoration: none;
}

.inline-contact-link:hover {
    text-decoration: underline;
}

/* ==========================================================================
   Chinese bar theme – Bar Chinesca Mxli
   Deep Chinese red, near-black and gold; lanterns, hui-wen / lattice patterns
   and cloud trims are inline SVG (no extra image requests).
   ========================================================================== */
:root {
    --cn-red: #b0121b;
    --cn-red-dark: #8b0000;
    --cn-red-deep: #5c0609;
    --cn-black: #0d0a0a;
    --cn-ink: #1c1414;
    --cn-gold: #d4a017;
    --cn-gold-light: #f2c14e;
    --cn-paper: #fbf3e4;
    --cn-paper-dark: #f3e4c8;
    --cn-font-display: 'Noto Serif SC', 'Songti SC', 'SimSun', Georgia, serif;
    --cn-font-brush: 'Ma Shan Zheng', 'Noto Serif SC', serif;
    --cn-lantern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 150'%3E %3Cdefs%3E%3CradialGradient id='g' cx='50%25' cy='45%25' r='60%25'%3E%3Cstop offset='0' stop-color='%23ff5a3c'/%3E%3Cstop offset='.55' stop-color='%23c8161d'/%3E%3Cstop offset='1' stop-color='%237a0a0f'/%3E%3C/radialGradient%3E%3C/defs%3E %3Cline x1='32' y1='0' x2='32' y2='26' stroke='%23d4a017' stroke-width='2'/%3E %3Crect x='20' y='24' width='24' height='9' rx='2' fill='%23d4a017'/%3E %3Cellipse cx='32' cy='64' rx='29' ry='33' fill='url(%23g)'/%3E %3Cpath d='M32 31v66M19 34c-9 18-9 42 0 60M45 34c9 18 9 42 0 60M9 50c-3 9-3 19 0 28M55 50c3 9 3 19 0 28' stroke='%238b0000' stroke-width='1.6' fill='none' opacity='.8'/%3E %3Crect x='20' y='95' width='24' height='9' rx='2' fill='%23d4a017'/%3E %3Cline x1='32' y1='104' x2='32' y2='112' stroke='%23d4a017' stroke-width='2'/%3E %3Cpath d='M27 112h10l3 34h-16z' fill='%23f2c14e'/%3E %3Cpath d='M29 114v30M32 114v31M35 114v30' stroke='%23b8860b' stroke-width='.8'/%3E %3C/svg%3E");
    --cn-meander: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E %3Cpath d='M4 4h36v36H12V12h20v20h-12v-8h4' fill='none' stroke='%238b0000' stroke-width='1.4' opacity='.05'/%3E %3C/svg%3E");
    --cn-band: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='14' viewBox='0 0 32 14'%3E %3Crect width='32' height='14' fill='%238b0000'/%3E %3Cpath d='M0 11h6V3h12v6h-6V6' fill='none' stroke='%23d4a017' stroke-width='1.3'/%3E %3Cpath d='M16 11h6V3h12' fill='none' stroke='%23d4a017' stroke-width='1.3'/%3E %3Cpath d='M0 .7h32M0 13.3h32' stroke='%23f2c14e' stroke-width='1.2'/%3E %3C/svg%3E");
    --cn-lattice: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E %3Cg fill='none' stroke='%23d4a017' stroke-width='1' opacity='.09'%3E %3Crect x='5' y='5' width='50' height='50'/%3E%3Crect x='15' y='15' width='30' height='30'/%3E %3Cpath d='M5 30h10M45 30h10M30 5v10M30 45v10M15 15L5 5M45 15l10-10M15 45L5 55M45 45l10 10'/%3E %3C/g%3E%3C/svg%3E");
    --cn-cloud: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'%3E %3Cg fill='none' stroke='%23d4a017' stroke-width='2.2' stroke-linecap='round'%3E %3Cpath d='M4 34h40c6 0 10-4 10-9s-4-9-9-9c-4 0-7 3-7 7 0 3 2 5 5 5'/%3E %3Cpath d='M22 34c-6 0-10-4-10-9s4-9 9-9c1-6 6-10 12-10 7 0 12 5 12 12'/%3E %3Cpath d='M21 16c4 0 7 3 7 7 0 3-2 5-5 5'/%3E %3C/g%3E%3C/svg%3E");
}

body {
    color: var(--cn-ink);
    background: var(--cn-black);
}

h1, h2, h3, h4,
.btn,
.chart-main-title,
.stage-box,
.dj-box,
.profile-card-order,
.table-number-display {
    font-family: var(--cn-font-display);
}

.btn,
button,
input,
select,
textarea {
    font-family: inherit;
}

.btn {
    font-family: var(--cn-font-display);
    letter-spacing: 0.02em;
    cursor: pointer;
}

/* ---------- Navbar ---------- */
.navbar,
.navbar.scrolled {
    background: linear-gradient(180deg, #140c0c 0%, var(--cn-black) 100%);
    border-bottom: 2px solid var(--cn-red);
    box-shadow: 0 1px 0 var(--cn-gold), 0 6px 18px rgba(0, 0, 0, 0.55);
}

.navbar.scrolled {
    background: rgba(13, 10, 10, 0.98);
}

.logo h1 {
    color: var(--cn-gold-light);
    letter-spacing: 0.02em;
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

/* Red "酒吧" (bar) seal next to the name */
.logo h1::after {
    content: '酒吧';
    font-family: var(--cn-font-brush);
    font-weight: normal;
    font-size: 1.05rem;
    line-height: 1;
    color: var(--cn-gold-light);
    background: var(--cn-red);
    border: 1px solid var(--cn-gold);
    border-radius: 3px;
    padding: 4px 5px 3px;
    box-shadow: inset 0 0 0 2px var(--cn-red), inset 0 0 0 3px rgba(242, 193, 78, 0.55);
}

.nav-menu > li > a {
    color: #f6eadb;
    position: relative;
    padding: 4px 0;
}

.nav-menu > li > a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 2px;
    background: var(--cn-gold);
    transform: scaleX(0);
    transition: transform 0.25s;
}

.nav-menu > li > a:hover,
.nav-menu > li > a.active {
    color: var(--cn-gold-light);
}

.nav-menu > li > a:hover::after,
.nav-menu > li > a.active::after {
    transform: scaleX(1);
}

.hamburger span {
    background: var(--cn-gold-light);
}

.profile-icon {
    color: var(--cn-gold-light);
    background: rgba(176, 18, 27, 0.35);
    border: 1px solid rgba(212, 160, 23, 0.6);
}

.profile-icon:hover {
    background: var(--cn-red);
}

.profile-icon.active {
    background: var(--cn-red);
}

/* ---------- Buttons ---------- */
.btn-primary {
    background: linear-gradient(180deg, #c8161d 0%, var(--cn-red) 55%, var(--cn-red-dark) 100%);
    color: #fff8e7;
    border: 2px solid var(--cn-gold);
    box-shadow: inset 0 0 0 1px rgba(255, 220, 150, 0.35), 0 4px 12px rgba(139, 0, 0, 0.35);
}

.btn-primary:hover {
    background: linear-gradient(180deg, var(--cn-red) 0%, var(--cn-red-dark) 100%);
    border-color: var(--cn-gold-light);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: inset 0 0 0 1px rgba(255, 220, 150, 0.45), 0 6px 18px rgba(212, 160, 23, 0.35);
}

.btn-secondary {
    background: transparent;
    color: var(--cn-gold-light);
    border: 2px solid var(--cn-gold);
}

.btn-secondary:hover {
    background: var(--cn-gold);
    color: var(--cn-black);
    border-color: var(--cn-gold);
}

/* ---------- Hero (home page) ---------- */
.hero {
    height: auto;
    min-height: 78vh;
    margin-top: 70px;
    padding: 4.5rem 0 5rem;
    background:
        linear-gradient(180deg, rgba(13, 10, 10, 0.55) 0%, rgba(13, 10, 10, 0.25) 45%, rgba(13, 10, 10, 0.9) 100%),
        radial-gradient(ellipse at center, rgba(176, 18, 27, 0.15) 0%, rgba(13, 10, 10, 0.55) 75%),
        url('IMAGES/Chinesca.webp') center 38% / cover no-repeat;
    overflow: hidden;
    border-bottom: 14px solid transparent;
    border-image: var(--cn-band) 0 0 14 0 / 0 0 14px 0 repeat;
}

.hero-overlay {
    background: none;
}

.hero::before,
.hero::after {
    content: '';
    position: absolute;
    top: -6px;
    width: 64px;
    height: 150px;
    background: var(--cn-lantern) center top / contain no-repeat;
    transform-origin: 50% 0;
    animation: cn-lantern-swing 4.5s ease-in-out infinite alternate;
    filter: drop-shadow(0 0 18px rgba(255, 90, 60, 0.45));
    z-index: 1;
    pointer-events: none;
}

.hero::before {
    left: 7%;
}

.hero::after {
    right: 7%;
    animation-delay: -2.2s;
    height: 120px;
    width: 52px;
}

.hero-content {
    z-index: 2;
    padding: 0 20px;
}

.hero-logo {
    display: block;
    width: min(460px, 78vw);
    height: auto;
    margin: 0 auto 1.25rem;
    filter: drop-shadow(0 6px 22px rgba(0, 0, 0, 0.85)) drop-shadow(0 0 30px rgba(176, 18, 27, 0.45));
}

.hero-subtitle {
    font-family: var(--cn-font-display);
    font-style: normal;
    font-size: 1.15rem;
    color: #f6eadb;
    letter-spacing: 0.04em;
    margin-bottom: 1.75rem;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
}

.hero-subtitle::before,
.hero-subtitle::after {
    content: '';
    display: inline-block;
    width: 38px;
    height: 1px;
    background: var(--cn-gold);
    vertical-align: middle;
    margin: 0 0.8rem;
}

.hero-buttons .btn-secondary {
    background: rgba(13, 10, 10, 0.55);
}

.hero-buttons .btn-secondary:hover {
    background: var(--cn-gold);
}

@keyframes cn-lantern-swing {
    from { transform: rotate(-4deg); }
    to { transform: rotate(4deg); }
}

@media (prefers-reduced-motion: reduce) {
    .hero::before,
    .hero::after,
    .login-page-section::before,
    .login-page-section::after,
    .profile-section::before,
    .profile-section::after,
    .cancellation::before,
    .cancellation::after {
        animation: none;
    }
}

/* ---------- Section headings: gold rule with a red 福 diamond ---------- */
.reservations h2,
.contact h2,
.reviews h2,
.gallery h2,
.cancellation h2,
.login-page-title,
.profile-section h2 {
    font-family: var(--cn-font-display);
    font-weight: 900;
    letter-spacing: 0.02em;
    position: relative;
    text-align: center;
    padding-bottom: 2.1rem;
    background:
        linear-gradient(90deg, transparent, var(--cn-gold)) calc(50% - 68px) calc(100% - 13px) / 96px 1.5px no-repeat,
        linear-gradient(90deg, var(--cn-gold), transparent) calc(50% + 68px) calc(100% - 13px) / 96px 1.5px no-repeat;
}

.reservations h2::before,
.contact h2::before,
.reviews h2::before,
.gallery h2::before,
.cancellation h2::before,
.login-page-title::before,
.profile-section h2::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 2px;
    width: 22px;
    height: 22px;
    margin-left: -11px;
    background: var(--cn-red);
    border: 1px solid var(--cn-gold);
    transform: rotate(45deg);
}

.reservations h2::after,
.contact h2::after,
.reviews h2::after,
.gallery h2::after,
.cancellation h2::after,
.login-page-title::after,
.profile-section h2::after {
    content: '福';
    position: absolute;
    left: 50%;
    bottom: 3px;
    width: 24px;
    margin-left: -12px;
    font-family: var(--cn-font-brush);
    font-weight: normal;
    font-size: 17px;
    line-height: 24px;
    text-align: center;
    color: var(--cn-gold-light);
}

/* ---------- Paper sections (reservations, login, profile, cancel) ---------- */
.reservations,
.login-page-section,
.profile-section,
.cancellation {
    background-color: var(--cn-paper);
    background-image: var(--cn-meander), linear-gradient(180deg, var(--cn-paper) 0%, var(--cn-paper-dark) 100%);
    background-size: 44px 44px, 100% 100%;
    position: relative;
}

.reservations h2,
.cancellation h2,
.login-page-title,
.profile-section h2 {
    color: var(--cn-red-dark);
}

/* Readable subtitle under "Make a Reservation" (was white on white) */
.reservations .section-subtitle,
.cancellation .section-subtitle,
.login-page-subtitle {
    color: #4a3a33;
    opacity: 1;
}

.reservations .section-subtitle .inline-contact-link {
    color: var(--cn-red);
    font-weight: bold;
}

/* Lanterns on the inner pages */
.login-page-section::before,
.login-page-section::after,
.profile-section::before,
.profile-section::after,
.cancellation::before,
.cancellation::after {
    content: '';
    position: absolute;
    top: 64px;
    width: 52px;
    height: 122px;
    background: var(--cn-lantern) center top / contain no-repeat;
    transform-origin: 50% 0;
    animation: cn-lantern-swing 4.5s ease-in-out infinite alternate;
    filter: drop-shadow(0 6px 10px rgba(139, 0, 0, 0.25));
    pointer-events: none;
}

.login-page-section::before,
.profile-section::before,
.cancellation::before {
    left: 6%;
}

.login-page-section::after,
.profile-section::after,
.cancellation::after {
    right: 6%;
    animation-delay: -2.2s;
}

.cancellation {
    padding-top: 120px;
}

/* Cancel page: space between the two steps */
.cancellation-step + .cancellation-step {
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px dashed rgba(212, 160, 23, 0.6);
}

/* Profile page: centered content that clears the lanterns */
.profile-section {
    min-height: 62vh;
}

.profile-section .container {
    max-width: 860px;
}

#notLoggedIn {
    text-align: center;
}

.profile-section a:not(.btn) {
    color: var(--cn-red);
}

.profile-section::before {
    left: max(12px, calc(50% - 520px));
}

.profile-section::after {
    right: max(12px, calc(50% - 520px));
}

@media (max-width: 1100px) {
    .profile-section::before,
    .profile-section::after {
        display: none;
    }
}

/* ---------- Reservation box (dark lacquer card with gold trim) ---------- */
.reservation-info {
    background:
        var(--cn-lattice),
        radial-gradient(ellipse at top, #2a0a0b 0%, var(--cn-black) 70%);
    color: #f6eadb;
    border: 1px solid var(--cn-gold);
    border-radius: 6px;
    box-shadow: inset 0 0 0 5px var(--cn-black), inset 0 0 0 6px rgba(212, 160, 23, 0.55), 0 10px 28px rgba(92, 6, 9, 0.35);
}

.reservation-info h3 {
    color: var(--cn-gold-light);
}

.phone-link {
    color: var(--cn-gold-light);
}

.phone-link:hover {
    color: #fff;
}

.hours li {
    border-bottom-color: rgba(212, 160, 23, 0.25);
}

/* Seating chart */
.seating-chart-container {
    background: rgba(92, 6, 9, 0.35);
    border: 1px solid var(--cn-gold);
    border-radius: 6px;
    box-shadow: inset 0 0 0 3px rgba(13, 10, 10, 0.6), inset 0 0 0 4px rgba(212, 160, 23, 0.35);
}

.chart-main-title {
    color: var(--cn-gold-light);
    letter-spacing: 0.06em;
}

.wc-top-left,
.wc-top-right,
.wc-bottom-right {
    color: var(--cn-gold-light);
    background: rgba(212, 160, 23, 0.12);
    border: 1px solid rgba(212, 160, 23, 0.35);
}

.vip-label {
    color: var(--cn-gold-light);
}

.vip-seat {
    background: linear-gradient(180deg, var(--cn-gold-light), var(--cn-gold));
    color: var(--cn-black);
    border: 1.5px solid #7a5a00;
}

.seat-circle,
.seat-square {
    background: var(--cn-paper);
    color: var(--cn-ink);
    border: 1.5px solid var(--cn-gold);
}

.vip-seat.reserved,
.seat-circle.reserved,
.seat-square.reserved {
    background: var(--cn-red);
    color: #fff;
    border-color: var(--cn-gold-light);
}

.reserved-x,
.reserved-time {
    color: #fff;
}

.stage-box,
.dj-box {
    background: linear-gradient(180deg, var(--cn-red), var(--cn-red-dark));
    color: var(--cn-gold-light);
    border: 1.5px solid var(--cn-gold);
    letter-spacing: 0.08em;
}

/* ---------- Forms / cards with gold trim ---------- */
.reservation-form,
.cancellation-form,
.auth-form-page,
.thank-you-message,
.auth-modal-content {
    background: #fffdf8;
    border: 1px solid rgba(212, 160, 23, 0.8);
    border-top: 4px solid var(--cn-red);
    border-radius: 6px;
    box-shadow: inset 0 0 0 4px #fffdf8, inset 0 0 0 5px rgba(212, 160, 23, 0.35), 0 10px 28px rgba(92, 6, 9, 0.14);
    position: relative;
}

/* Cloud (xiangyun) ornaments in the top corners of the cards */
.reservation-form::before,
.reservation-form::after,
.cancellation-form::before,
.cancellation-form::after,
.auth-form-page::before,
.auth-form-page::after {
    content: '';
    position: absolute;
    top: 10px;
    width: 42px;
    height: 28px;
    background: var(--cn-cloud) center / contain no-repeat;
    opacity: 0.75;
    pointer-events: none;
}

.reservation-form::before,
.cancellation-form::before,
.auth-form-page::before {
    left: 12px;
}

.reservation-form::after,
.cancellation-form::after,
.auth-form-page::after {
    right: 12px;
    transform: scaleX(-1);
}

.reservation-form h3,
.cancellation-form h3,
.auth-form-page h3,
.auth-form h2,
.thank-you-message h2 {
    color: var(--cn-red-dark);
}

.form-note {
    color: #6b5a50;
}

.form-group label,
.confirmation-question,
.table-number-display {
    color: var(--cn-ink);
}

.form-group input,
.form-group select,
.form-group textarea {
    background: #fffaf0;
    border: 1.5px solid #e2cfa6;
    color: var(--cn-ink);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--cn-red);
    box-shadow: 0 0 0 3px rgba(212, 160, 23, 0.25);
}

.table-number-display {
    background: var(--cn-paper);
    border: 1px solid rgba(212, 160, 23, 0.6);
}

.cancel-link,
.auth-switch a,
.login-page-back a,
.login-required a {
    color: var(--cn-red);
}

.cancel-link:hover,
.auth-switch a:hover,
.login-page-back a:hover {
    color: var(--cn-red-dark);
}

.auth-close {
    color: var(--cn-red-dark);
}

.auth-divider {
    color: #8a6d3b;
}

.reservation-limit-message {
    background: #fdecea;
    color: var(--cn-red-dark);
    border: 1px solid rgba(176, 18, 27, 0.45);
}

/* ---------- Profile ---------- */
.profile-user-name {
    color: var(--cn-red-dark);
    font-family: var(--cn-font-display);
}

.profile-user-photo {
    border: 2px solid var(--cn-gold);
}

.reservation-card {
    background: #fffdf8;
    border: 1px solid rgba(212, 160, 23, 0.8);
    border-top: 4px solid var(--cn-red);
    border-radius: 6px;
    box-shadow: 0 6px 16px rgba(92, 6, 9, 0.12);
}

.profile-card-order {
    color: var(--cn-red-dark);
}

.profile-logout-wrap .btn-secondary {
    color: var(--cn-red);
    border-color: var(--cn-red);
    background: transparent;
}

.profile-logout-wrap .btn-secondary:hover {
    background: var(--cn-red);
    color: #fff8e7;
    border-color: var(--cn-gold);
}

/* ---------- Contact (dark, lattice) ---------- */
.contact {
    background:
        var(--cn-lattice),
        radial-gradient(ellipse at 50% 0%, rgba(176, 18, 27, 0.4) 0%, rgba(13, 10, 10, 0) 60%),
        var(--cn-black);
    background-size: 60px 60px, 100% 100%, auto;
    color: #f6eadb;
    border-top: 14px solid transparent;
    border-image: var(--cn-band) 14 0 0 0 / 14px 0 0 0 repeat;
}

.contact h2 {
    color: var(--cn-gold-light);
}

.contact-card {
    background: linear-gradient(180deg, rgba(176, 18, 27, 0.22) 0%, rgba(13, 10, 10, 0.6) 100%);
    border: 1px solid rgba(212, 160, 23, 0.55);
    border-top: 3px solid var(--cn-gold);
    border-radius: 6px;
    position: relative;
}

.contact-card:hover {
    box-shadow: 0 10px 25px rgba(212, 160, 23, 0.22);
}

.contact-card h3 {
    color: var(--cn-gold-light);
}

.contact-link {
    color: var(--cn-gold-light);
}

.contact-link:hover {
    color: #fff;
}

/* ---------- Footer ---------- */
.footer {
    background: var(--cn-black);
    color: #e9dccb;
    border-top: 14px solid transparent;
    border-image: var(--cn-band) 14 0 0 0 / 14px 0 0 0 repeat;
}

.footer a {
    color: var(--cn-gold-light);
}

/* Contact section already has the band on top; the footer right after it gets a thin gold rule */
.contact + .footer {
    border-top: 1px solid rgba(212, 160, 23, 0.4);
    border-image: none;
}

/* ---------- Phones ---------- */
@media (max-width: 768px) {
    .nav-menu {
        background: var(--cn-black);
        border-bottom: 2px solid var(--cn-red);
        box-shadow: none; /* the closed menu sits off-screen; its shadow must not bleed in */
    }

    .nav-menu.active {
        box-shadow: 0 1px 0 var(--cn-gold), 0 10px 27px rgba(0, 0, 0, 0.5);
    }

    .chart-main-title {
        font-size: 0.9rem;
    }

    /* Keep the page 100% wide: grid columns may shrink below the seating chart's width */
    .reservation-content > * {
        min-width: 0;
    }

    .reservation-info,
    .reservation-form {
        padding: 1.75rem 1.25rem;
    }

    /* The seating chart keeps its real size and scrolls sideways inside its box */
    .seating-chart-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 1rem 0.75rem;
    }

    .chart-main-content {
        width: max-content;
    }

    .hero {
        min-height: 64vh;
        padding: 3.5rem 0 4rem;
    }

    .hero::before {
        left: 3%;
        width: 44px;
        height: 104px;
    }

    .hero::after {
        right: 3%;
        width: 38px;
        height: 88px;
    }
}

@media (max-width: 600px) {
    .login-page-section::before,
    .login-page-section::after,
    .profile-section::before,
    .profile-section::after,
    .cancellation::before,
    .cancellation::after {
        display: none;
    }

    .logo h1::after {
        display: none;
    }

    .hero-subtitle::before,
    .hero-subtitle::after {
        display: none;
    }

    .hero-subtitle {
        font-size: 1rem;
        margin-bottom: 1.25rem;
    }

    .hero {
        min-height: 0;
        padding: 2.75rem 0 3rem;
    }

    .hero-buttons .btn {
        padding: 12px 24px;
    }
}

/* Small phones: the display font is wider than Georgia, keep the logo on one line */
@media (max-width: 480px) {
    .navbar .logo h1 {
        font-size: 1.15rem;
        white-space: nowrap;
    }

    .is-signed-in .navbar .logo h1 {
        font-size: 0.92rem;
    }

    .navbar .container {
        gap: 8px;
        padding: 0 14px;
    }

    .reservations h2,
    .contact h2,
    .reviews h2,
    .gallery h2,
    .cancellation h2,
    .profile-section h2 {
        font-size: 1.9rem;
    }

    .login-page-title {
        font-size: 1.5rem;
    }
}

/* ==========================================================================
   Neon signboards – left panel of the reservation section
   (night-market style: saturated signs, thin white inner frame, glow)
   ========================================================================== */
.reservation-info {
    --neon-pink: #ff2d95;
    --neon-lime: #6dff2e;
    --neon-purple: #a13bff;
    --neon-blue: #1f5bff;
    --neon-orange: #ff7a1a;
    --neon-yellow: #ffd60a;
    --neon-red: #ff2323;
    --neon-cyan: #19d3ff;
}

.seating-chart-container {
    background: radial-gradient(ellipse at 50% 0%, rgba(60, 12, 50, 0.55) 0%, rgba(6, 4, 6, 0.94) 70%);
}

/* Sign base: colour comes from --neon / --neon-ink */
.seat-circle,
.seat-square,
.vip-seat {
    --neon: var(--neon-pink);
    --neon-ink: #ffffff;
    background: var(--neon);
    color: var(--neon-ink);
    border: 1.5px solid rgba(255, 255, 255, 0.55);
    font-family: var(--cn-font-display);
    font-weight: 900;
    font-size: 0.8rem;
    text-shadow: 0 0 4px rgba(255, 255, 255, 0.55);
    box-shadow:
        inset 0 0 0 2px var(--neon),
        inset 0 0 0 3.5px rgba(255, 255, 255, 0.92),
        0 0 5px var(--neon),
        0 0 13px var(--neon);
    transition: transform 0.2s, box-shadow 0.2s, filter 0.2s;
    cursor: pointer;
    user-select: none;
    touch-action: manipulation;
}

.seat-circle {
    border-radius: 9px;   /* rounded signboard = round table */
}

.seat-square {
    border-radius: 2px;   /* square signboard = square table */
}

/* Dark ink on the light neons */
.seat-circle:nth-child(8n+1), .seat-square:nth-child(8n+1) { --neon: var(--neon-pink); }
.seat-circle:nth-child(8n+2), .seat-square:nth-child(8n+2) { --neon: var(--neon-lime); --neon-ink: #0b1a02; }
.seat-circle:nth-child(8n+3), .seat-square:nth-child(8n+3) { --neon: var(--neon-purple); }
.seat-circle:nth-child(8n+4), .seat-square:nth-child(8n+4) { --neon: var(--neon-orange); }
.seat-circle:nth-child(8n+5), .seat-square:nth-child(8n+5) { --neon: var(--neon-blue); }
.seat-circle:nth-child(8n+6), .seat-square:nth-child(8n+6) { --neon: var(--neon-yellow); --neon-ink: #2a1600; }
.seat-circle:nth-child(8n+7), .seat-square:nth-child(8n+7) { --neon: var(--neon-red); }
.seat-circle:nth-child(8n+8), .seat-square:nth-child(8n+8) { --neon: var(--neon-cyan); --neon-ink: #021a22; }

/* Shift the colour cycle per row so neighbouring rows don't line up */
.seat-row-main .seat-circle:nth-child(8n+1) { --neon: var(--neon-blue); --neon-ink: #fff; }
.seat-row-main .seat-circle:nth-child(8n+5) { --neon: var(--neon-pink); --neon-ink: #fff; }
.seat-row-middle .seat-circle:nth-child(8n+2) { --neon: var(--neon-cyan); --neon-ink: #021a22; }
.seat-row-middle .seat-circle:nth-child(8n+8) { --neon: var(--neon-lime); --neon-ink: #0b1a02; }
.seat-row-bottom .seat-circle:nth-child(8n+3) { --neon: var(--neon-red); --neon-ink: #fff; }
.seat-row-bottom .seat-circle:nth-child(8n+7) { --neon: var(--neon-purple); --neon-ink: #fff; }

.seat-circle:nth-child(8n+2),
.seat-circle:nth-child(8n+6),
.seat-circle:nth-child(8n+8),
.seat-square:nth-child(8n+2),
.seat-square:nth-child(8n+6),
.seat-square:nth-child(8n+8) {
    text-shadow: none;
}

/* Table 5 is drawn as two signs: same colour for both */
.extra-seats .seat-square:nth-child(n) {
    --neon: var(--neon-orange);
    --neon-ink: #ffffff;
    text-shadow: 0 0 4px rgba(255, 255, 255, 0.55);
}

/* VIP: gold sign, red characters, double frame and a stronger glow */
.vip-container .vip-seat,
.vip-table-seat {
    --neon: var(--neon-yellow);
    --neon-ink: #9b0000;
    background: linear-gradient(180deg, #fff27a 0%, var(--neon-yellow) 55%, #ffb000 100%);
    border: 1.5px solid #fff;
    text-shadow: none;
    box-shadow:
        inset 0 0 0 2px #ffb000,
        inset 0 0 0 3.5px #ffffff,
        0 0 6px var(--neon-yellow),
        0 0 16px #ff9f0a,
        0 0 26px rgba(255, 159, 10, 0.55);
}

.vip-table-seat {
    position: relative;
    overflow: visible;
}

.vip-table-seat::before {
    content: "VIP";
    position: absolute;
    bottom: calc(100% + 3px);
    left: 50%;
    transform: translateX(-50%);
    color: #fff6b0;
    font-family: var(--cn-font-display);
    font-size: 0.54rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.08em;
    text-shadow: 0 0 4px #ffd60a, 0 0 8px #ff9f0a;
    pointer-events: none;
}

.vip-table-seat.reserved::before {
    color: #8a8080;
    text-shadow: none;
}

.vip-label {
    color: #fff6b0;
    font-family: var(--cn-font-display);
    font-weight: 900;
    letter-spacing: 0.08em;
    text-shadow: 0 0 4px #ffd60a, 0 0 10px #ff9f0a;
}

/* Hover: a touch brighter with a quick neon flicker */
.seat-circle:hover,
.seat-square:hover,
.vip-seat:hover {
    filter: brightness(1.15) saturate(1.1);
    animation: neon-flicker 0.6s linear 1;
}

.seat-circle:focus-visible,
.seat-square:focus-visible,
.vip-seat:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 3px;
}

/* Selected table (picked in the form): white outline, bright pulsing glow */
.seat-circle.is-selected,
.seat-square.is-selected,
.vip-container .vip-seat.is-selected {
    position: relative;
    z-index: 2;
    transform: scale(1.15);
    outline: 2px solid #ffffff;
    outline-offset: 2px;
    filter: brightness(1.2) saturate(1.15);
    box-shadow:
        inset 0 0 0 2px var(--neon),
        inset 0 0 0 3.5px #ffffff,
        0 0 8px #ffffff,
        0 0 16px var(--neon),
        0 0 30px var(--neon),
        0 0 46px var(--neon);
    animation: neon-pulse 1.4s ease-in-out infinite alternate;
}

/* Taken table: switched-off sign (dark, grey, no glow) */
.seat-circle.reserved,
.seat-square.reserved,
.vip-container .vip-seat.reserved {
    background: #1c1919;
    color: #8a8080;
    border: 1.5px solid #3b3434;
    text-shadow: none;
    filter: none;
    outline: none;
    transform: none;
    animation: none;
    box-shadow: inset 0 0 0 2px #1c1919, inset 0 0 0 3px rgba(255, 255, 255, 0.1);
    cursor: not-allowed;
}

.seat-circle.reserved .reserved-x,
.seat-square.reserved .reserved-x,
.vip-seat.reserved .reserved-x,
.seat-circle.reserved .reserved-time,
.seat-square.reserved .reserved-time,
.vip-seat.reserved .reserved-time {
    color: #9a9090;
}

.seat-circle.reserved:hover,
.seat-square.reserved:hover,
.vip-seat.reserved:hover {
    filter: none;
    animation: none;
}

/* Other chart signs */
.reservation-info .chart-main-title {
    color: #ffe6f3;
    text-shadow: 0 0 3px #fff, 0 0 9px var(--neon-pink), 0 0 18px var(--neon-pink), 0 0 30px var(--neon-pink);
    animation: neon-title-flicker 7s linear infinite;
}

.wc-top-left,
.wc-top-right,
.wc-bottom-right {
    background: var(--neon-blue);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 2px;
    font-family: var(--cn-font-display);
    font-weight: 900;
    text-shadow: 0 0 4px rgba(255, 255, 255, 0.6);
    box-shadow: inset 0 0 0 2px var(--neon-blue), inset 0 0 0 3px rgba(255, 255, 255, 0.85), 0 0 6px var(--neon-blue), 0 0 14px var(--neon-blue);
}

.dj-box {
    background: var(--neon-purple);
    color: #ffffff;
    border: 1.5px solid rgba(255, 255, 255, 0.6);
    border-radius: 3px;
    font-weight: 900;
    font-size: 1.05rem;
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.7);
    box-shadow: inset 0 0 0 3px var(--neon-purple), inset 0 0 0 4.5px #ffffff, 0 0 8px var(--neon-purple), 0 0 20px var(--neon-purple), 0 0 32px rgba(161, 59, 255, 0.5);
}

.stage-box {
    background: var(--neon-red);
    color: #ffffff;
    border: 1.5px solid rgba(255, 255, 255, 0.6);
    border-radius: 2px;
    font-weight: 900;
    letter-spacing: 0.18em;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.7);
    box-shadow: inset 0 0 0 2px var(--neon-red), inset 0 0 0 3.5px #ffffff, 0 0 8px var(--neon-red), 0 0 20px var(--neon-red);
}

/* Phone number: a pink neon sign button */
.reservation-info .phone-link {
    background: var(--neon-pink);
    color: #ffffff;
    padding: 0.45rem 1.1rem;
    border: 1.5px solid rgba(255, 255, 255, 0.6);
    border-radius: 3px;
    font-family: var(--cn-font-display);
    font-weight: 900;
    font-size: 1.35rem;
    letter-spacing: 0.03em;
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.7);
    box-shadow: inset 0 0 0 3px var(--neon-pink), inset 0 0 0 4.5px #ffffff, 0 0 8px var(--neon-pink), 0 0 22px var(--neon-pink), 0 0 36px rgba(255, 45, 149, 0.45);
    transition: filter 0.2s, transform 0.2s;
}

.reservation-info .phone-link:hover {
    color: #ffffff;
    filter: brightness(1.15);
    transform: translateY(-1px);
    animation: neon-flicker 0.6s linear 1;
}

@keyframes neon-flicker {
    0%, 100% { opacity: 1; }
    12% { opacity: 0.55; }
    18% { opacity: 1; }
    30% { opacity: 0.75; }
    36% { opacity: 1; }
}

@keyframes neon-pulse {
    from { filter: brightness(1.1) saturate(1.1); }
    to { filter: brightness(1.35) saturate(1.25); }
}

@keyframes neon-title-flicker {
    0%, 91%, 93.5%, 96%, 100% { opacity: 1; }
    92% { opacity: 0.6; }
    95% { opacity: 0.8; }
}

@media (prefers-reduced-motion: reduce) {
    .seat-circle:hover,
    .seat-square:hover,
    .vip-seat:hover,
    .seat-circle.is-selected,
    .seat-square.is-selected,
    .vip-container .vip-seat.is-selected,
    .reservation-info .chart-main-title,
    .reservation-info .phone-link:hover {
        animation: none;
    }
}

/* ==========================================================================
   Nav bookmarks: Reservations / Location / Social / Login hang on the left
   edge of the page as Chinese bookmarks (vertical tabs with knot and tassel).
   The links stay in the same <ul class="nav-menu">, so all nav logic is kept.
   ========================================================================== */
.nav-menu {
    --bm-tassel-gold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 44'%3E%3Cpath d='M10 0v6M10 16v5' stroke='%23f2c14e' stroke-width='1.4'/%3E%3Cpath d='M10 5l6 6-6 6-6-6z' fill='%23b0121b' stroke='%23f2c14e' stroke-width='1.2'/%3E%3Cpath d='M10 8.2l2.8 2.8-2.8 2.8-2.8-2.8z' fill='none' stroke='%23f2c14e' stroke-width='.8'/%3E%3Crect x='6.5' y='20' width='7' height='4' rx='1' fill='%23f2c14e'/%3E%3Cpath d='M7 24h6l2.6 19H4.4z' fill='%23f2c14e'/%3E%3Cpath d='M8 25v17M10 25v18M12 25v17' stroke='%23b8860b' stroke-width='.7'/%3E%3C/svg%3E");
    --bm-tassel-red: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 44'%3E%3Cpath d='M10 0v6M10 16v5' stroke='%23d4a017' stroke-width='1.4'/%3E%3Cpath d='M10 5l6 6-6 6-6-6z' fill='%23d4a017' stroke='%238b0000' stroke-width='1.2'/%3E%3Cpath d='M10 8.2l2.8 2.8-2.8 2.8-2.8-2.8z' fill='none' stroke='%238b0000' stroke-width='.8'/%3E%3Crect x='6.5' y='20' width='7' height='4' rx='1' fill='%23d4a017'/%3E%3Cpath d='M7 24h6l2.6 19H4.4z' fill='%23d0161f'/%3E%3Cpath d='M8 25v17M10 25v18M12 25v17' stroke='%237a0a0f' stroke-width='.7'/%3E%3C/svg%3E");
}

/* Colours: cinnabar red, black lacquer, oxblood, imperial gold */
.nav-menu li {
    --bm-edge: var(--cn-gold);
    --bm-bg: linear-gradient(180deg, #d0161f 0%, #9c0d14 100%);
    --bm-ink: #fbeccb;
    --bm-char: var(--cn-gold-light);
    --bm-frame: rgba(242, 193, 78, 0.75);
    --bm-tassel: var(--bm-tassel-gold);
}

.nav-menu li:nth-child(2) {
    --bm-bg: linear-gradient(180deg, #2e1818 0%, #0d0a0a 100%);
    --bm-ink: var(--cn-gold-light);
    --bm-char: #ff4b3e;
    --bm-tassel: var(--bm-tassel-red);
}

.nav-menu li:nth-child(3) {
    --bm-bg: linear-gradient(180deg, #74101a 0%, #420509 100%);
    --bm-ink: #fbeccb;
    --bm-char: var(--cn-gold-light);
}

.nav-menu li#navLoginItem {
    --bm-edge: #8b0000;
    --bm-bg: linear-gradient(180deg, #f9dc7c 0%, #d9a520 100%);
    --bm-ink: #7a0a0f;
    --bm-char: #b0121b;
    --bm-frame: rgba(139, 0, 0, 0.6);
    --bm-tassel: var(--bm-tassel-red);
}

.nav-menu li:nth-child(1)::before { content: '订' / ''; }
.nav-menu li:nth-child(2)::before { content: '址' / ''; }
.nav-menu li:nth-child(3)::before { content: '社' / ''; }
.nav-menu li#navLoginItem::before { content: '登' / ''; }

.nav-menu li {
    position: relative;
    filter: drop-shadow(2px 3px 4px rgba(0, 0, 0, 0.55));
    transition: transform 0.28s ease, filter 0.28s ease;
}

/* Chinese character on the bookmark (decorative, clicks go to the link) */
.nav-menu li::before {
    position: absolute;
    z-index: 1;
    font-family: var(--cn-font-display);
    font-weight: 900;
    line-height: 1;
    color: var(--bm-char);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
    pointer-events: none;
}

/* Knot and tassel */
.nav-menu li::after {
    content: '';
    position: absolute;
    z-index: 1;
    width: 16px;
    height: 35px;
    background: var(--bm-tassel) center top / 100% 100% no-repeat;
    pointer-events: none;
    transform-origin: 50% 0;
    transition: transform 0.4s ease;
}

.nav-menu > li > a,
.nav-menu > li > a:hover,
.nav-menu > li > a.active {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    position: relative;
    isolation: isolate;
    font-family: var(--cn-font-display);
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.1;
    color: var(--bm-ink);
    text-decoration: none;
    background: var(--bm-edge);
    outline: none;
}

/* Lacquer body (inside the 2px edge) */
.nav-menu > li > a::before {
    content: '';
    position: absolute;
    z-index: -1;
    background: var(--bm-bg);
}

/* Thin inner frame (replaces the old underline) */
.nav-menu > li > a::after,
.nav-menu > li > a:hover::after,
.nav-menu > li > a.active::after {
    content: '';
    position: absolute;
    z-index: -1;
    height: auto;
    background: none;
    border: 1px solid var(--bm-frame);
    border-left: 0;
    transform: none;
    transition: border-color 0.2s;
}

.nav-menu > li > a:focus-visible::after {
    border: 2px solid #ffffff;
    border-left: 0;
}

.nav-menu li:hover,
.nav-menu li:has(a:focus-visible) {
    filter: drop-shadow(2px 3px 4px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 9px rgba(242, 193, 78, 0.85));
}

.nav-menu li:has(a:focus-visible) {
    filter: drop-shadow(0 0 2px #ffffff) drop-shadow(0 0 10px rgba(242, 193, 78, 0.95));
}

.nav-menu li:hover::after,
.nav-menu li:has(a:focus-visible)::after {
    transform: rotate(6deg);
}

/* ---------- Desktop: fixed tabs on the left edge of the page ---------- */
@media (min-width: 769px) {
    .navbar .nav-menu {
        position: fixed;
        top: 92px;
        left: 0;
        z-index: 5;
        flex-direction: column;
        align-items: flex-start;
        gap: 30px;
        margin: 0;
        padding: 0;
        pointer-events: none;
    }

    .nav-menu li {
        pointer-events: auto;
        transform: translateX(-10px); /* 10px tucked behind the edge */
    }

    .nav-menu li:hover,
    .nav-menu li:has(a:focus-visible),
    .nav-menu li:has(a.active) {
        transform: translateX(0);
    }

    .nav-menu li:has(a.active) {
        filter: drop-shadow(2px 3px 4px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 5px rgba(242, 193, 78, 0.6));
    }

    .nav-menu > li > a,
    .nav-menu > li > a:hover,
    .nav-menu > li > a.active {
        justify-content: center;
        width: 54px;
        height: 148px;
        padding: 40px 0 22px 10px;
        writing-mode: vertical-rl;
        font-size: 12.5px;
        white-space: nowrap;
        /* swallowtail notch at the bottom */
        clip-path: polygon(0 0, 100% 0, 100% 100%, calc(50% + 5px) calc(100% - 11px), 0 100%);
    }

    .nav-menu > li > a::before {
        inset: 2px 2px 2px 0;
        clip-path: polygon(0 0, 100% 0, 100% 100%, calc(50% + 5px) calc(100% - 11px), 0 100%);
    }

    .nav-menu > li > a::after,
    .nav-menu > li > a:hover::after,
    .nav-menu > li > a.active::after {
        top: 6px;
        right: 6px;
        bottom: 19px;
        left: 0;
    }

    .nav-menu li::before {
        top: 13px;
        left: 10px;
        width: 44px;
        text-align: center;
        font-size: 17px;
    }

    .nav-menu li::after {
        top: 135px;
        left: 24px;
    }

    /* Keep page content clear of the tabs (the header keeps its own padding) */
    .container {
        padding-left: max(20px, calc(70px - max(0px, (100vw - 1200px) / 2)));
        padding-right: max(20px, calc(70px - max(0px, (100vw - 1200px) / 2)));
    }

    .navbar .container {
        padding-left: 20px;
        padding-right: 20px;
    }

    .hero::before {
        left: max(7%, 76px);
    }

    .login-page-section::before,
    .cancellation::before {
        left: max(6%, 72px);
    }

    .profile-section::before {
        left: max(76px, calc(50% - 520px));
    }
}

/* Shorter screens: smaller bookmarks so all of them fit */
@media (min-width: 769px) and (max-height: 820px) {
    .navbar .nav-menu {
        top: 86px;
        gap: 26px;
    }

    .nav-menu > li > a,
    .nav-menu > li > a:hover,
    .nav-menu > li > a.active {
        height: 132px;
        padding-top: 36px;
        font-size: 11.5px;
        letter-spacing: 0.05em;
    }

    .nav-menu li::before {
        top: 12px;
        font-size: 15px;
    }

    .nav-menu li::after {
        top: 119px;
    }
}

@media (min-width: 769px) and (max-height: 680px) {
    .navbar .nav-menu {
        top: 80px;
        gap: 22px;
    }

    .nav-menu > li > a,
    .nav-menu > li > a:hover,
    .nav-menu > li > a.active {
        height: 116px;
        padding-top: 10px;
        font-size: 10.5px;
        letter-spacing: 0.03em;
    }

    .nav-menu li::before {
        display: none;
    }

    .nav-menu li::after {
        top: 103px;
    }
}

/* ---------- Phones: horizontal bookmarks inside the hamburger menu ---------- */
@media (max-width: 768px) {
    .nav-menu {
        align-items: flex-start;
        text-align: left;
        gap: 22px;
        padding: 1.4rem 0 2.1rem;
    }

    .nav-menu li {
        transform: translateX(-14px);
    }

    .nav-menu li:hover,
    .nav-menu li:has(a:focus-visible),
    .nav-menu li:has(a.active) {
        transform: translateX(0);
    }

    .nav-menu > li > a,
    .nav-menu > li > a:hover,
    .nav-menu > li > a.active {
        width: 240px;
        height: 46px;
        padding: 0 30px 0 60px;
        font-size: 1rem;
        clip-path: polygon(0 0, 100% 0, calc(100% - 13px) 50%, 100% 100%, 0 100%);
    }

    .nav-menu > li > a::before {
        inset: 2px 2px 2px 0;
        clip-path: polygon(0 0, 100% 0, calc(100% - 13px) 50%, 100% 100%, 0 100%);
    }

    .nav-menu > li > a::after,
    .nav-menu > li > a:hover::after,
    .nav-menu > li > a.active::after {
        top: 5px;
        right: 19px;
        bottom: 5px;
        left: 0;
    }

    .nav-menu li::before {
        top: 50%;
        left: 28px;
        transform: translateY(-50%);
        font-size: 19px;
    }

    .nav-menu li::after {
        top: 23px;
        left: 219px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nav-menu li,
    .nav-menu li::after,
    .nav-menu > li > a::after {
        transition: none;
    }

    .nav-menu li:hover::after,
    .nav-menu li:has(a:focus-visible)::after {
        transform: none;
    }
}

/* ==========================================================================
   Social links (Facebook / Instagram / TikTok): red lacquer coins with a gold rim,
   neon glow in the brand colour on hover
   ========================================================================== */
.social-links {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.social-link {
    --social-glow: var(--cn-gold-light);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    color: var(--cn-gold-light);
    background: radial-gradient(circle at 35% 30%, #d0161f 0%, #8b0000 70%, #5c0609 100%);
    border: 2px solid var(--cn-gold);
    box-shadow: inset 0 0 0 3px #8b0000, inset 0 0 0 4px rgba(242, 193, 78, 0.55), 0 3px 8px rgba(0, 0, 0, 0.45);
    text-decoration: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.social-link svg {
    display: block;
    width: 22px;
    height: 22px;
}

.social-facebook {
    --social-glow: #3b82ff;
}

.social-instagram {
    --social-glow: #ff2d95;
}

.social-tiktok {
    --social-glow: #25f4ee;
}

.social-link:hover,
.social-link:focus-visible {
    color: #ffffff;
    border-color: #ffffff;
    transform: translateY(-3px);
    box-shadow: inset 0 0 0 3px #8b0000, inset 0 0 0 4px rgba(255, 255, 255, 0.6),
        0 0 6px var(--social-glow), 0 0 16px var(--social-glow), 0 0 28px var(--social-glow);
    text-decoration: none;
}

.social-link:focus-visible {
    outline: 2px solid var(--cn-gold-light);
    outline-offset: 4px;
}

/* Contact section: four cards (one row on wide screens, 2 x 2 below) */
@media (min-width: 1101px) {
    .contact-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 1.5rem;
    }
}

@media (min-width: 601px) and (max-width: 1100px) {
    .contact-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .contact-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.contact-card-social .social-links {
    margin-top: 0.25rem;
}

/* Footer row */
.footer-social {
    margin-top: 1rem;
    gap: 14px;
}

.footer-social .social-link {
    width: 42px;
    height: 42px;
}

.footer-social .social-link svg {
    width: 19px;
    height: 19px;
}

@media (prefers-reduced-motion: reduce) {
    .social-link {
        transition: none;
    }

    .social-link:hover,
    .social-link:focus-visible {
        transform: none;
    }
}

/* ==========================================================================
   Club layer: darker nightclub / rockstar look on top of the Chinese theme.
   Dark lattice sections, neon pink / red / purple accents, dark glass cards,
   stage beams, haze and grain in the hero, equalizer under the hero buttons.
   All effects are CSS (no image downloads); motion stops with reduced motion.
   ========================================================================== */
:root {
    --club-pink: #ff2d95;
    --club-red: #ff2340;
    --club-purple: #a13bff;
    --club-text: #efe4ee;
    --club-muted: #c9bacd;
    --club-glass: linear-gradient(160deg, rgba(38, 20, 44, 0.82) 0%, rgba(12, 8, 14, 0.9) 100%);
    --club-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

body {
    background: #060407;
}

/* ---------- Header ---------- */
.navbar,
.navbar.scrolled {
    background: linear-gradient(180deg, #0d080f 0%, #060407 100%);
    border-bottom: 1px solid var(--club-pink);
    box-shadow: 0 0 14px rgba(255, 45, 149, 0.45), 0 6px 18px rgba(0, 0, 0, 0.7);
}

.navbar.scrolled {
    background: rgba(6, 4, 7, 0.96);
}

.logo h1 {
    text-shadow: 0 0 10px rgba(255, 45, 149, 0.35);
}

/* ---------- Dark sections (were cream paper) ---------- */
.reservations,
.login-page-section,
.profile-section,
.cancellation {
    background-color: #09060b;
    background-image:
        var(--cn-lattice),
        radial-gradient(ellipse at 15% 0%, rgba(255, 45, 149, 0.13) 0%, rgba(9, 6, 11, 0) 55%),
        radial-gradient(ellipse at 90% 100%, rgba(161, 59, 255, 0.14) 0%, rgba(9, 6, 11, 0) 55%),
        linear-gradient(180deg, #0e0911 0%, #060407 100%);
    background-size: 60px 60px, 100% 100%, 100% 100%, 100% 100%;
    color: var(--club-text);
}

.contact {
    background:
        var(--cn-lattice),
        radial-gradient(ellipse at 50% 0%, rgba(255, 35, 64, 0.28) 0%, rgba(6, 4, 7, 0) 60%),
        radial-gradient(ellipse at 100% 100%, rgba(161, 59, 255, 0.14) 0%, rgba(6, 4, 7, 0) 50%),
        #060407;
    background-size: 60px 60px, 100% 100%, 100% 100%, auto;
}

.footer {
    background: #050306;
}

.login-page-section::before,
.login-page-section::after,
.profile-section::before,
.profile-section::after,
.cancellation::before,
.cancellation::after {
    filter: drop-shadow(0 0 14px rgba(255, 60, 90, 0.5));
}

/* ---------- Headings: bold, uppercase, neon ---------- */
.reservations h2,
.contact h2,
.reviews h2,
.gallery h2,
.cancellation h2,
.login-page-title,
.profile-section h2 {
    color: #fff4fa;
    text-transform: uppercase;
    font-weight: 900;
    letter-spacing: 0.07em;
    text-shadow: 0 0 4px rgba(255, 255, 255, 0.55), 0 0 12px var(--club-pink), 0 0 26px rgba(255, 45, 149, 0.7), 0 0 44px rgba(255, 35, 64, 0.45);
}

.reservations h2:hover,
.contact h2:hover,
.reviews h2:hover,
.gallery h2:hover,
.cancellation h2:hover,
.login-page-title:hover,
.profile-section h2:hover {
    animation: club-glitch 0.9s steps(2, end) infinite;
}

.reservation-form h3,
.cancellation-form h3,
.auth-form-page h3,
.auth-form h2,
.thank-you-message h2,
.contact-card h3,
.reservation-info h3,
.reservations-list h3 {
    color: #ffe3f1;
    text-transform: uppercase;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-shadow: 0 0 8px rgba(255, 45, 149, 0.75), 0 0 18px rgba(255, 45, 149, 0.35);
}

.reservation-info h3 {
    color: #ffe9b0;
    text-shadow: 0 0 8px rgba(255, 170, 60, 0.7), 0 0 18px rgba(255, 35, 64, 0.4);
}

.reservation-info .chart-main-title {
    text-transform: uppercase;
}

.reservations .section-subtitle,
.cancellation .section-subtitle,
.login-page-subtitle {
    color: var(--club-muted);
}

.reservations .section-subtitle .inline-contact-link {
    color: #ff6cb8;
    text-shadow: 0 0 8px rgba(255, 45, 149, 0.5);
}

/* ---------- Buttons: neon borders, glow on hover ---------- */
.btn-primary {
    background: linear-gradient(135deg, #ff2d95 0%, #e0162f 55%, #8b0010 100%);
    color: #ffffff;
    border: 2px solid #ff8cc8;
    letter-spacing: 0.06em;
    font-weight: 900;
    box-shadow: 0 0 8px rgba(255, 45, 149, 0.6), 0 0 22px rgba(255, 35, 64, 0.3), inset 0 0 10px rgba(255, 255, 255, 0.18);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.btn-primary:hover,
.btn-primary:focus-visible {
    background: linear-gradient(135deg, #ff4fa8 0%, #ff2340 55%, #a30016 100%);
    border-color: #ffffff;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 0 10px #ff2d95, 0 0 26px rgba(255, 45, 149, 0.75), 0 0 48px rgba(255, 35, 64, 0.45), inset 0 0 12px rgba(255, 255, 255, 0.25);
}

.btn-secondary,
.hero-buttons .btn-secondary {
    background: rgba(12, 6, 16, 0.6);
    color: #f1ddff;
    border: 2px solid #b86bff;
    letter-spacing: 0.04em;
    box-shadow: 0 0 8px rgba(161, 59, 255, 0.55), inset 0 0 8px rgba(161, 59, 255, 0.25);
}

.btn-secondary:hover,
.btn-secondary:focus-visible,
.hero-buttons .btn-secondary:hover {
    background: rgba(161, 59, 255, 0.22);
    color: #ffffff;
    border-color: #e2c2ff;
    box-shadow: 0 0 10px #a13bff, 0 0 26px rgba(161, 59, 255, 0.7), inset 0 0 12px rgba(161, 59, 255, 0.4);
}

.profile-logout-wrap .btn-secondary {
    color: #ffd6e8;
    border-color: var(--club-pink);
    box-shadow: 0 0 8px rgba(255, 45, 149, 0.5), inset 0 0 8px rgba(255, 45, 149, 0.2);
}

.profile-logout-wrap .btn-secondary:hover {
    background: rgba(255, 45, 149, 0.2);
    color: #ffffff;
    border-color: #ffffff;
    box-shadow: 0 0 10px #ff2d95, 0 0 26px rgba(255, 45, 149, 0.65);
}

/* ---------- Cards: dark glass with neon edges ---------- */
.reservation-form,
.cancellation-form,
.auth-form-page,
.thank-you-message,
.auth-modal-content,
.reservation-card,
.contact-card {
    background: var(--club-glass);
    color: var(--club-text);
    border: 1px solid rgba(255, 45, 149, 0.55);
    border-top: 3px solid var(--club-pink);
    border-radius: 8px;
    box-shadow: 0 0 0 1px rgba(161, 59, 255, 0.22), 0 0 22px rgba(255, 45, 149, 0.22), 0 14px 32px rgba(0, 0, 0, 0.55), inset 0 0 36px rgba(255, 45, 149, 0.05);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.contact-card:hover,
.reservation-card:hover {
    box-shadow: 0 0 0 1px rgba(161, 59, 255, 0.4), 0 0 30px rgba(255, 45, 149, 0.4), 0 14px 32px rgba(0, 0, 0, 0.55);
}

.reservation-info {
    border-color: rgba(255, 45, 149, 0.6);
    box-shadow: inset 0 0 0 5px var(--cn-black), inset 0 0 0 6px rgba(255, 45, 149, 0.4), 0 0 22px rgba(255, 45, 149, 0.25), 0 14px 32px rgba(0, 0, 0, 0.6);
}

/* Text inside the (now dark) cards */
.form-note,
.auth-form p,
.auth-divider,
.auth-google-label,
.profile-user-email,
.reservation-card p,
.profile-card-table,
.profile-card-name,
.profile-card-guests,
.contact-card p,
.login-required {
    color: var(--club-muted);
}

.form-group label,
.confirmation-question,
.profile-user-name,
.reservation-card h4 {
    color: var(--club-text);
}

.profile-user-name {
    text-shadow: 0 0 10px rgba(255, 45, 149, 0.5);
}

.profile-card-order {
    color: #ff7cc0;
}

.cancel-link,
.auth-switch a,
.login-page-back a,
.login-required a,
.profile-section a:not(.btn),
.auth-close {
    color: #ff6cb8;
}

.cancel-link:hover,
.auth-switch a:hover,
.login-page-back a:hover,
.login-required a:hover,
.profile-section a:not(.btn):hover,
.auth-close:hover {
    color: #ffffff;
    text-shadow: 0 0 8px var(--club-pink);
}

.form-group input,
.form-group select,
.form-group textarea {
    background: rgba(6, 3, 8, 0.78);
    border: 1.5px solid rgba(255, 45, 149, 0.38);
    color: #ffffff;
    color-scheme: dark;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #9d8ca3;
}

.form-group select option {
    background: #140d17;
    color: #ffffff;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--club-pink);
    box-shadow: 0 0 0 3px rgba(255, 45, 149, 0.22), 0 0 14px rgba(255, 45, 149, 0.35);
    outline: none;
}

.table-number-display {
    background: rgba(255, 45, 149, 0.1);
    border: 1px solid rgba(255, 45, 149, 0.5);
    color: #ffffff;
}

.reservation-limit-message {
    background: rgba(255, 35, 64, 0.12);
    color: #ffc2cc;
    border: 1px solid rgba(255, 35, 64, 0.55);
}

.contact-link {
    color: #ff8cc8;
    text-shadow: 0 0 8px rgba(255, 45, 149, 0.45);
}

.contact-card .inline-contact-link,
.footer a {
    color: #ffc9e4;
}

/* ---------- Hero: stage beams, haze, grain, pulsing logo, equalizer ---------- */
.hero {
    background:
        linear-gradient(180deg, rgba(6, 4, 7, 0.72) 0%, rgba(6, 4, 7, 0.35) 45%, rgba(6, 4, 7, 0.95) 100%),
        radial-gradient(ellipse at center, rgba(255, 35, 64, 0.12) 0%, rgba(6, 4, 7, 0.7) 78%),
        url('IMAGES/Chinesca.webp') center 38% / cover no-repeat;
}

.club-beams {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}

.club-beams span {
    position: absolute;
    top: -8%;
    width: 180px;
    height: 125%;
    margin-left: -90px;
    transform-origin: 50% 0;
    clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%);
    background: linear-gradient(180deg, var(--beam) 0%, rgba(0, 0, 0, 0) 88%);
    filter: blur(5px);
    mix-blend-mode: screen;
    opacity: 0.55;
    animation: club-sweep 7s ease-in-out infinite alternate;
}

.club-beams span:nth-child(1) { left: 14%; --beam: rgba(255, 45, 149, 0.75); --from: -28deg; --to: 18deg; }
.club-beams span:nth-child(2) { left: 38%; --beam: rgba(161, 59, 255, 0.7); --from: 22deg; --to: -20deg; animation-duration: 8.5s; animation-delay: -3s; }
.club-beams span:nth-child(3) { left: 62%; --beam: rgba(255, 35, 64, 0.7); --from: -18deg; --to: 24deg; animation-duration: 6.5s; animation-delay: -1.5s; }
.club-beams span:nth-child(4) { left: 86%; --beam: rgba(255, 220, 240, 0.45); --from: 26deg; --to: -24deg; animation-duration: 9s; animation-delay: -4.5s; }

/* haze and grain live on the (empty) hero overlay */
.hero .hero-overlay {
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.hero .hero-overlay::before {
    content: '';
    position: absolute;
    inset: -10% -20%;
    background:
        radial-gradient(ellipse 45% 30% at 25% 85%, rgba(220, 200, 255, 0.16) 0%, rgba(0, 0, 0, 0) 70%),
        radial-gradient(ellipse 40% 26% at 75% 78%, rgba(255, 140, 200, 0.14) 0%, rgba(0, 0, 0, 0) 70%),
        radial-gradient(ellipse 60% 22% at 50% 100%, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0) 70%);
    animation: club-haze 18s ease-in-out infinite alternate;
}

.hero .hero-overlay::after {
    content: '';
    position: absolute;
    inset: -40px;
    background: var(--club-grain) 0 0 / 160px 160px repeat;
    opacity: 0.12;
    mix-blend-mode: overlay;
    animation: club-grain 0.9s steps(3) infinite;
}

.hero-logo {
    animation: club-logo-pulse 2.6s ease-in-out infinite;
}

.hero-subtitle {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 700;
    text-shadow: 0 0 10px rgba(255, 45, 149, 0.55), 0 2px 8px rgba(0, 0, 0, 0.9);
}

.hero-subtitle::before,
.hero-subtitle::after {
    background: var(--club-pink);
    box-shadow: 0 0 6px var(--club-pink);
}

.club-eq {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 4px;
    height: 34px;
    margin: 1.6rem auto 0;
}

.club-eq span {
    width: 5px;
    height: 100%;
    border-radius: 2px;
    background: linear-gradient(0deg, #ff2340 0%, #ff2d95 55%, #c77dff 100%);
    box-shadow: 0 0 6px rgba(255, 45, 149, 0.7);
    transform-origin: 50% 100%;
    transform: scaleY(0.35);
    animation: club-eq 1s ease-in-out infinite alternate;
}

.club-eq span:nth-child(3n+1) { animation-duration: 0.72s; }
.club-eq span:nth-child(3n+2) { animation-duration: 0.95s; animation-delay: -0.3s; }
.club-eq span:nth-child(3n) { animation-duration: 0.6s; animation-delay: -0.5s; }
.club-eq span:nth-child(4n) { animation-duration: 1.15s; animation-delay: -0.2s; }
.club-eq span:nth-child(5n) { animation-duration: 0.82s; animation-delay: -0.65s; }

.reservation-form h3,
.cancellation-form h3,
.auth-form-page h3 {
    font-size: 1.35rem;
    line-height: 1.3;
}

@media (max-width: 600px) {
    .hero-subtitle {
        font-size: 0.9rem;
        letter-spacing: 0.04em;
    }
}

@keyframes club-sweep {
    from { transform: rotate(var(--from)); }
    to { transform: rotate(var(--to)); }
}

@keyframes club-haze {
    from { transform: translateX(-4%) scale(1); }
    to { transform: translateX(4%) scale(1.08); }
}

@keyframes club-grain {
    0% { transform: translate(0, 0); }
    33% { transform: translate(-17px, 11px); }
    66% { transform: translate(13px, -19px); }
    100% { transform: translate(-7px, 23px); }
}

@keyframes club-logo-pulse {
    0%, 100% { filter: drop-shadow(0 6px 22px rgba(0, 0, 0, 0.85)) drop-shadow(0 0 14px rgba(255, 45, 149, 0.45)); }
    50% { filter: drop-shadow(0 6px 22px rgba(0, 0, 0, 0.85)) drop-shadow(0 0 34px rgba(255, 45, 149, 0.95)); }
}

@keyframes club-eq {
    0% { transform: scaleY(0.2); }
    50% { transform: scaleY(0.9); }
    100% { transform: scaleY(0.45); }
}

@keyframes club-glitch {
    0% {
        text-shadow: -2px 0 #00e5ff, 2px 0 #ff2340, 0 0 12px var(--club-pink), 0 0 26px rgba(255, 45, 149, 0.7);
        transform: translate(0, 0);
    }
    50% {
        text-shadow: 2px 0 #00e5ff, -2px 0 #ff2340, 0 0 16px var(--club-pink), 0 0 36px rgba(255, 45, 149, 0.9);
        transform: translate(1px, -1px);
    }
    100% {
        text-shadow: -1px 0 #00e5ff, 1px 0 #ff2340, 0 0 12px var(--club-pink), 0 0 26px rgba(255, 45, 149, 0.7);
        transform: translate(-1px, 1px);
    }
}

@media (max-width: 768px) {
    .club-beams span {
        width: 120px;
        margin-left: -60px;
    }

    .club-eq {
        height: 26px;
        margin-top: 1.2rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .club-beams span,
    .hero .hero-overlay::before,
    .hero .hero-overlay::after,
    .hero-logo,
    .club-eq span,
    .reservations h2:hover,
    .contact h2:hover,
    .reviews h2:hover,
    .gallery h2:hover,
    .cancellation h2:hover,
    .login-page-title:hover,
    .profile-section h2:hover {
        animation: none;
    }

    .club-beams span {
        transform: rotate(var(--from));
    }

    .club-eq span {
        transform: scaleY(0.55);
    }

    .club-eq span:nth-child(odd) {
        transform: scaleY(0.85);
    }
}

/* ==========================================================================
   "Continue with Facebook" (login page): Facebook blue, same size as the
   Google button, neon-blue glow on hover to match the club theme.
   Hidden until FIREBASE_CONFIG.facebookLogin is true.
   ========================================================================== */
.facebook-signin-container[hidden] {
    display: none;
}

.google-signin-container + .facebook-signin-container {
    margin-top: -0.25rem;
}

.btn-facebook {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    max-width: 320px;
    padding: 12px 20px;
    background: #1877f2;
    border: 1px solid #1877f2;
    border-radius: 4px;
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.btn-facebook:hover,
.btn-facebook:focus-visible {
    background: #166fe5;
    border-color: #8fbcff;
    color: #ffffff;
    box-shadow: 0 0 8px rgba(59, 130, 255, 0.8), 0 0 20px rgba(59, 130, 255, 0.45);
}

.btn-facebook:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 3px;
}

.btn-facebook:active {
    background: #1464d8;
}

.btn-facebook-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-facebook-icon svg {
    display: block;
}

@media (prefers-reduced-motion: reduce) {
    .btn-facebook {
        transition: none;
    }
}

/* ==========================================================================
   Privacy page (/privacy): dark club section, glass cards, neon title
   ========================================================================== */
.privacy-section {
    position: relative;
    padding: 120px 0 5rem;
    color: var(--club-text);
    background-color: #09060b;
    background-image:
        var(--cn-lattice),
        radial-gradient(ellipse at 15% 0%, rgba(255, 45, 149, 0.13) 0%, rgba(9, 6, 11, 0) 55%),
        radial-gradient(ellipse at 90% 100%, rgba(161, 59, 255, 0.14) 0%, rgba(9, 6, 11, 0) 55%),
        linear-gradient(180deg, #0e0911 0%, #060407 100%);
    background-size: 60px 60px, 100% 100%, 100% 100%, 100% 100%;
}

.privacy-section .container {
    max-width: 900px;
}

.privacy-section h2 {
    position: relative;
    text-align: center;
    font-family: var(--cn-font-display);
    font-size: 2.5rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #fff4fa;
    margin-bottom: 1rem;
    padding-bottom: 2.1rem;
    text-shadow: 0 0 4px rgba(255, 255, 255, 0.55), 0 0 12px var(--club-pink), 0 0 26px rgba(255, 45, 149, 0.7), 0 0 44px rgba(255, 35, 64, 0.45);
    background:
        linear-gradient(90deg, transparent, var(--cn-gold)) calc(50% - 68px) calc(100% - 13px) / 96px 1.5px no-repeat,
        linear-gradient(90deg, var(--cn-gold), transparent) calc(50% + 68px) calc(100% - 13px) / 96px 1.5px no-repeat;
}

.privacy-section h2::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 2px;
    width: 22px;
    height: 22px;
    margin-left: -11px;
    background: var(--cn-red);
    border: 1px solid var(--cn-gold);
    transform: rotate(45deg);
}

.privacy-section h2::after {
    content: '福';
    position: absolute;
    left: 50%;
    bottom: 3px;
    width: 24px;
    margin-left: -12px;
    font-family: var(--cn-font-brush);
    font-weight: normal;
    font-size: 17px;
    line-height: 24px;
    text-align: center;
    color: var(--cn-gold-light);
    text-shadow: none;
}

.privacy-section h2:hover {
    animation: club-glitch 0.9s steps(2, end) infinite;
}

.privacy-section .section-subtitle {
    text-align: center;
    color: var(--club-muted);
    margin-bottom: 2.5rem;
}

.privacy-card {
    background: var(--club-glass);
    color: var(--club-text);
    border: 1px solid rgba(255, 45, 149, 0.55);
    border-top: 3px solid var(--club-pink);
    border-radius: 8px;
    box-shadow: 0 0 0 1px rgba(161, 59, 255, 0.22), 0 0 22px rgba(255, 45, 149, 0.22), 0 14px 32px rgba(0, 0, 0, 0.55);
    padding: 2.25rem 2.5rem;
    line-height: 1.7;
}

.privacy-card + .privacy-card {
    margin-top: 2rem;
}

.privacy-card h3 {
    font-family: var(--cn-font-display);
    font-weight: 900;
    font-size: 1.15rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #ffe3f1;
    text-shadow: 0 0 8px rgba(255, 45, 149, 0.7);
    margin: 1.9rem 0 0.6rem;
}

.privacy-card h3[id] {
    scroll-margin-top: 96px;
}

.privacy-card h3:first-child {
    margin-top: 0;
}

.privacy-card p,
.privacy-card li {
    color: var(--club-muted);
}

.privacy-card strong {
    color: var(--club-text);
}

.privacy-card ul,
.privacy-card ol {
    padding-left: 1.4rem;
    margin: 0.4rem 0 0.8rem;
}

.privacy-card li + li {
    margin-top: 0.45rem;
}

.privacy-card .privacy-lead {
    color: var(--club-text);
    font-size: 1.05rem;
}

.privacy-card a {
    color: #ff6cb8;
    word-break: break-word;
}

.privacy-card a:hover,
.privacy-card a:focus-visible {
    color: #ffffff;
    text-shadow: 0 0 8px var(--club-pink);
}

.footer .footer-legal {
    margin-top: 0.9rem;
    font-size: 0.9rem;
}

@media (max-width: 600px) {
    .privacy-section {
        padding-top: 100px;
    }

    .privacy-section h2 {
        font-size: 1.9rem;
    }

    .privacy-card {
        padding: 1.6rem 1.25rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .privacy-section h2:hover {
        animation: none;
    }
}

/* ==========================================================================
   Cookie notice (cookie-consent.js): small, non-blocking, bottom of the page.
   Desktop: a card at the bottom right, clear of the left-edge bookmarks.
   Phones: a compact strip across the bottom (the bookmarks live in the menu there).
   ========================================================================== */
.cookie-banner {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 990; /* under the navbar (1000) and the sign-in modal (2000) */
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: min(540px, calc(100vw - 40px));
    padding: 14px 40px 14px 14px;
    background: linear-gradient(160deg, rgba(28, 12, 12, 0.96) 0%, rgba(13, 10, 10, 0.97) 100%);
    color: #f6eadb;
    border: 1px solid var(--cn-gold);
    border-top: 3px solid var(--cn-red);
    border-radius: 8px;
    box-shadow: 0 0 0 1px rgba(176, 18, 27, 0.35), 0 0 18px rgba(255, 35, 64, 0.28), 0 12px 30px rgba(0, 0, 0, 0.6);
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 0.86rem;
    line-height: 1.45;
    animation: cookie-banner-in 0.35s ease-out;
}

.cookie-banner[hidden] {
    display: none;
}

@keyframes cookie-banner-in {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}

.cookie-banner-seal {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: var(--cn-red);
    color: var(--cn-gold-light);
    border: 1px solid var(--cn-gold);
    border-radius: 4px;
    font-family: var(--cn-font-display);
    font-size: 1.15rem;
    box-shadow: 0 0 10px rgba(255, 35, 64, 0.45);
}

.cookie-banner-body {
    flex: 1 1 auto;
    min-width: 0;
}

.cookie-banner p {
    margin: 0 0 4px;
}

.cookie-banner-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    color: var(--cn-gold-light);
    font-weight: bold;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.8rem;
    text-shadow: 0 0 8px rgba(242, 193, 78, 0.55);
}

.cookie-banner-status {
    color: var(--cn-gold-light);
    font-size: 0.78rem;
}

.cookie-banner-status:empty {
    display: none;
}

.cookie-banner-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin-top: 8px;
}

.cookie-btn {
    font: inherit;
    font-size: 0.82rem;
    font-weight: bold;
    padding: 7px 14px;
    border-radius: 5px;
    border: 1px solid var(--cn-gold);
    cursor: pointer;
    transition: box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.cookie-btn-accept {
    background: var(--cn-red);
    color: #fff8e7;
}

.cookie-btn-reject {
    background: #0d0a0a;
    color: var(--cn-gold-light);
}

.cookie-btn:hover,
.cookie-btn:focus-visible {
    box-shadow: 0 0 0 1px var(--cn-gold-light), 0 0 12px rgba(242, 193, 78, 0.55);
    outline: none;
}

.cookie-btn-reject:hover,
.cookie-btn-reject:focus-visible {
    background: #1c1414;
}

.cookie-banner-link {
    color: var(--cn-gold-light);
    font-size: 0.78rem;
    font-weight: normal;
    letter-spacing: 0;
    text-transform: none;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cookie-banner-link:hover,
.cookie-banner-link:focus-visible {
    color: #ffffff;
    text-shadow: 0 0 8px rgba(255, 35, 64, 0.8);
}

.cookie-banner-close {
    position: absolute;
    top: 6px;
    right: 8px;
    display: none;
    width: 28px;
    height: 28px;
    padding: 0;
    background: none;
    border: none;
    color: var(--cn-gold-light);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}

.cookie-banner.has-choice .cookie-banner-close {
    display: block;
}

.cookie-banner-close:hover,
.cookie-banner-close:focus-visible {
    color: #ffffff;
    text-shadow: 0 0 8px rgba(255, 35, 64, 0.8);
}

/* "Cookies" link in the footers and the settings button on /privacy (buttons, so no #hash) */
.footer-cookie-link,
.privacy-cookie-settings {
    font: inherit;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.footer-cookie-link {
    color: #ffc9e4;
}

.footer-cookie-link:hover,
.footer-cookie-link:focus-visible {
    color: #ffffff;
}

.privacy-cookie-settings {
    color: #ff6cb8;
}

.privacy-cookie-settings:hover,
.privacy-cookie-settings:focus-visible {
    color: #ffffff;
    text-shadow: 0 0 8px var(--club-pink);
}

@media (max-width: 600px) {
    .cookie-banner {
        left: 8px;
        right: 8px;
        bottom: 8px;
        width: auto;
        gap: 10px;
        padding: 10px 34px 10px 10px;
        font-size: 0.8rem;
        line-height: 1.38;
    }

    .cookie-banner-seal {
        width: 28px;
        height: 28px;
        font-size: 0.95rem;
    }

    .cookie-banner-actions {
        margin-top: 6px;
        gap: 6px 8px;
    }

    .cookie-btn {
        padding: 6px 11px;
        font-size: 0.78rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cookie-banner {
        animation: none;
    }
}

/* ==========================================================================
   FRONT PAGE (index.html): badge header, hero slideshow, stripe band, brick strip
   Layout after the "coffee bar" reference: textured dark background, thin gold line
   with the round logo badge in the middle splitting the links, round photo on the right.
   ========================================================================== */
@font-face {
    font-family: 'Caveat Brush';
    src: url('fonts/caveat-brush-latin.woff2') format('woff2'); /* self-hosted, SIL OFL 1.1 (fonts/OFL.txt) */
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    --front-hand: 'Caveat Brush', 'Segoe Print', 'Bradley Hand', 'Comic Sans MS', cursive;
    --front-jade: #12a575;
    --front-pink: #ff2d95;
    --front-orange: #ffae3d;
    --front-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .85 0 0 0 0 .7 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
    /* burlap: fine cross weave + noise over warm dark brown-red */
    --front-burlap:
        repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.26) 0 1px, transparent 1px 3px),
        repeating-linear-gradient(90deg, rgba(255, 196, 150, 0.05) 0 1px, transparent 1px 3px),
        var(--front-noise);
}

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

/* ---------- Badge header ---------- */
.navbar.navbar-badge {
    --hdr-h: 150px;
    --line-y: 100px;
    --badge: 118px;
    height: var(--hdr-h);
    padding: 0;
    background: transparent;
    border-bottom: 0;
    box-shadow: none;
    transition: height 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

.navbar.navbar-badge.scrolled {
    --hdr-h: 70px;
    --line-y: 50px;
    --badge: 62px;
    background: var(--front-burlap), linear-gradient(180deg, rgba(26, 12, 10, 0.98), rgba(14, 8, 7, 0.97));
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6);
}

.navbar.navbar-badge .container {
    position: relative;
    display: block;
    max-width: none;
    width: 100%;
    height: var(--hdr-h);
    padding: 0;
    transition: height 0.3s ease;
}

/* the thin gold line across the page */
.navbar.navbar-badge .container::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: var(--line-y);
    height: 2px;
    background: linear-gradient(90deg, rgba(212, 160, 23, 0) 0%, var(--cn-gold) 5%, var(--cn-gold-light) 50%, var(--cn-gold) 95%, rgba(212, 160, 23, 0) 100%);
    box-shadow: 0 0 8px rgba(242, 193, 78, 0.45);
    transition: top 0.3s ease;
}

.navbar.navbar-badge .logo {
    position: absolute;
}

/* round logo badge sitting on the line */
.badge-logo {
    position: absolute;
    left: 50%;
    top: calc(var(--line-y) - var(--badge) / 2);
    z-index: 2;
    width: var(--badge);
    height: var(--badge);
    transform: translateX(-50%);
    border-radius: 50%;
    transition: top 0.3s ease, width 0.3s ease, height 0.3s ease, filter 0.3s ease;
}

.badge-logo-ring {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 38%, rgba(255, 60, 60, 0.28), transparent 62%),
        var(--front-burlap),
        radial-gradient(circle at 50% 50%, #2a0c0c 0%, #0d0707 75%);
    border: 3px solid var(--cn-gold);
    box-shadow: 0 0 0 3px var(--cn-red), 0 0 0 4px var(--cn-gold-light), 0 0 24px rgba(255, 35, 64, 0.55), 0 8px 22px rgba(0, 0, 0, 0.65);
}

.badge-logo-ring img {
    width: 84%;
    height: auto;
    margin-top: -10%;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.8));
}

/* red ribbon across the lower part of the badge, like the reference's "COFFEE BAR" band */
.badge-logo-ring::after {
    content: '酒吧 · MXLI';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 16%;
    padding: 2px 0 1px;
    background: linear-gradient(180deg, #d0161f, #8b0000);
    border-top: 1px solid var(--cn-gold);
    border-bottom: 1px solid var(--cn-gold);
    color: var(--cn-gold-light);
    font-family: var(--cn-font-display);
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 0.12em;
    text-align: center;
    line-height: 1.3;
    transition: opacity 0.2s ease;
}

.navbar-badge.scrolled .badge-logo-ring::after {
    opacity: 0;
}

.navbar-badge.scrolled .badge-logo-ring img {
    margin-top: 0;
}

.badge-logo:hover,
.badge-logo:focus-visible {
    filter: brightness(1.12) drop-shadow(0 0 10px rgba(242, 193, 78, 0.6));
    outline: none;
}

/* links split around the badge, sitting just above the line */
.badge-links {
    position: absolute;
    bottom: calc(var(--hdr-h) - var(--line-y) + 9px);
    display: flex;
    align-items: baseline;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    transition: bottom 0.3s ease;
}

/* Reservations · Tables | badge | Contact · Login: four equal slots, so the link centres sit
   at -2S, -S, +S, +2S from the badge centre (even and symmetric) */
.navbar.navbar-badge {
    --slot: clamp(150px, 13vw, 176px);
}

.badge-links li {
    width: var(--slot);
    text-align: center;
}

.badge-links-left {
    right: calc(50% + var(--slot) / 2);
}

.badge-links-right {
    left: calc(50% + var(--slot) / 2);
}

.badge-links a {
    color: var(--front-orange);
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 12.5px;
    font-weight: bold;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    text-shadow: 0 0 8px rgba(255, 120, 40, 0.45), 0 1px 2px rgba(0, 0, 0, 0.9);
    transition: color 0.2s ease, text-shadow 0.2s ease;
}

.badge-links a:hover,
.badge-links a:focus-visible {
    color: #fff3d6;
    text-shadow: 0 0 10px rgba(255, 45, 149, 0.9), 0 0 2px #fff;
    outline: none;
}

.badge-profile {
    display: none;
}

.is-signed-in .badge-login {
    display: none;
}

.is-signed-in .badge-profile {
    display: list-item;
}

/* On wide screens the header already has a login link; hide the duplicate left bookmark.
   Keep it in the compact navigation where the header links are hidden. */
@media (min-width: 1180px) {
    #navLoginItem {
        display: none;
    }
}

/* small round social icons above the right-hand links */
.badge-social {
    position: absolute;
    top: 22px;
    left: calc(50% + var(--slot) / 2);
    width: calc(var(--slot) * 2);
    display: flex;
    justify-content: center;
    gap: 8px;
    transition: opacity 0.25s ease;
}

.badge-social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: var(--cn-gold-light);
    background: rgba(176, 18, 27, 0.45);
    border: 1px solid rgba(242, 193, 78, 0.75);
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
    transition: background 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

.badge-social-link:hover,
.badge-social-link:focus-visible {
    background: var(--cn-red);
    color: #fff;
    box-shadow: 0 0 10px rgba(255, 35, 64, 0.7);
    outline: none;
}

.navbar-badge.scrolled .badge-social {
    opacity: 0;
    pointer-events: none;
}

/* profile icon / Sign out on the right end of the line */
.navbar.navbar-badge .nav-right {
    position: absolute;
    right: 22px;
    top: calc(var(--line-y) - 20px);
    z-index: 2;
    transition: top 0.3s ease;
}

/* "Call us" / "Location" around the badge (narrower screens, like the reference's phone view) */
.badge-quick {
    position: absolute;
    bottom: calc(var(--hdr-h) - var(--line-y) + 8px);
    display: none;
    align-items: center;
    gap: 6px;
    color: var(--front-orange);
    font-family: var(--front-hand);
    font-size: 1.2rem;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    text-shadow: 0 0 8px rgba(255, 120, 40, 0.45), 0 1px 2px rgba(0, 0, 0, 0.9);
    transition: bottom 0.3s ease;
}

.badge-quick svg {
    flex: 0 0 auto;
    color: var(--cn-gold-light);
}

.badge-quick:hover,
.badge-quick:focus-visible {
    color: #fff3d6;
    outline: none;
}

@media (max-width: 1179px) {
    .badge-links,
    .badge-social {
        display: none;
    }

    .badge-quick {
        display: inline-flex;
    }

    .badge-call {
        left: 84px; /* clear of the left-edge bookmarks */
    }

    .badge-location {
        right: 84px;
    }

    .is-signed-in .badge-location {
        right: 190px;
    }
}

/* ---------- Hero slideshow ---------- */
.front-hero {
    --slides-top: 170px;
    --slides-h: 460px;
    position: relative;
    overflow: hidden;
    padding: var(--slides-top) 0 84px;
    background:
        radial-gradient(ellipse at 68% 46%, rgba(255, 45, 149, 0.16), transparent 45%),
        radial-gradient(ellipse at 30% 50%, rgba(176, 18, 27, 0.3), transparent 55%),
        radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.55) 100%),
        var(--front-burlap),
        linear-gradient(180deg, #1d0d0a 0%, #150907 60%, #110706 100%);
    color: #fff4e3;
    touch-action: pan-y; /* horizontal swipes go to the slideshow */
}

.front-slides {
    position: relative;
    max-width: 1080px;
    height: var(--slides-h);
    margin: 0 auto;
}

.front-slide {
    position: absolute;
    inset: 0 120px;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    align-items: center;
    gap: 36px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.7s ease, visibility 0.7s ease;
}

.front-slide.is-active {
    opacity: 1;
    visibility: visible;
}

.front-slide .front-slide-text,
.front-slide .front-slide-art {
    transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.front-slide.from-right:not(.is-active) .front-slide-text,
.front-slide.leave-left .front-slide-text {
    transform: translateX(-40px);
}

.front-slide.from-left:not(.is-active) .front-slide-text,
.front-slide.leave-right .front-slide-text {
    transform: translateX(40px);
}

.front-slide.leave-left .front-slide-art,
.front-slide.leave-right .front-slide-art {
    transform: scale(0.88);
}

.front-slide.is-active.from-right .front-slide-text {
    animation: front-in-right 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.front-slide.is-active.from-left .front-slide-text {
    animation: front-in-left 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.front-slide.is-active.from-right .front-slide-art,
.front-slide.is-active.from-left .front-slide-art {
    animation: front-art-in 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}

@keyframes front-in-right {
    from { transform: translateX(60px); opacity: 0; }
    to { transform: none; opacity: 1; }
}

@keyframes front-in-left {
    from { transform: translateX(-60px); opacity: 0; }
    to { transform: none; opacity: 1; }
}

@keyframes front-art-in {
    from { transform: scale(0.82) rotate(-4deg); opacity: 0; }
    to { transform: none; opacity: 1; }
}

.front-slide-text {
    text-align: center;
}

.front-slide-title {
    margin: 0 0 14px;
    font-family: var(--front-hand);
    font-weight: 400;
    font-size: clamp(2.5rem, 4.4vw, 3.8rem);
    line-height: 1.02;
    letter-spacing: 0.01em;
    color: #fff7e8;
    text-transform: none;
    text-shadow: 0 0 14px rgba(255, 35, 64, 0.55), 0 2px 0 rgba(0, 0, 0, 0.7);
}

.front-slide-title span {
    display: block;
}

.front-slide-title .front-slide-title-alt {
    margin-top: 6px;
    font-size: 0.62em;
    color: var(--cn-gold-light);
    text-shadow: 0 0 10px rgba(242, 193, 78, 0.45), 0 2px 0 rgba(0, 0, 0, 0.7);
}

.front-slide-sub {
    margin: 0 0 22px;
    font-family: var(--front-hand);
    font-size: 1.45rem;
    line-height: 1.2;
    color: #ff5aa8;
    text-shadow: 0 0 10px rgba(255, 45, 149, 0.55);
}

.front-slide-sub span {
    display: block;
    color: #7fe0b8;
    text-shadow: 0 0 10px rgba(18, 165, 117, 0.6);
}

/* ribbon-shaped call to action: notched left end, pointed right end */
.front-ribbon {
    position: relative;
    display: inline-block;
    padding: 10px 38px 10px 30px;
    background: linear-gradient(180deg, #e0202a, #a50f18);
    color: #fff4d8;
    font-family: var(--front-hand);
    font-size: 1.35rem;
    line-height: 1.1;
    text-decoration: none;
    white-space: nowrap;
    clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%, 14px 50%);
    filter: drop-shadow(0 0 10px rgba(255, 35, 64, 0.55));
    transition: transform 0.2s ease, filter 0.2s ease;
}

.front-ribbon.ribbon-jade {
    background: linear-gradient(180deg, #19c28a, #0c8a60);
    color: #fbfff8;
    filter: drop-shadow(0 0 10px rgba(18, 165, 117, 0.6));
}

.front-ribbon.ribbon-gold {
    background: linear-gradient(180deg, #ffd66b, #d9a520);
    color: #5c0609;
    filter: drop-shadow(0 0 10px rgba(242, 193, 78, 0.6));
}

.front-ribbon.ribbon-pink {
    background: linear-gradient(180deg, #ff4fa8, #d4127a);
    color: #fff7fb;
    filter: drop-shadow(0 0 10px rgba(255, 45, 149, 0.6));
}

.front-ribbon:hover,
.front-ribbon:focus-visible {
    transform: translateX(4px) scale(1.04);
    outline: none;
}

.front-ribbon:focus-visible {
    filter: drop-shadow(0 0 0 #fff) drop-shadow(0 0 6px #fff);
}

/* round photo with something popping out of it */
.front-slide-art {
    position: relative;
    justify-self: center;
    width: min(380px, 33vw);
    aspect-ratio: 1;
}

.front-circle {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: 50%;
    border: 4px solid var(--cn-gold);
    box-shadow: 0 0 0 6px rgba(176, 18, 27, 0.9), 0 0 0 7px rgba(242, 193, 78, 0.6), 0 0 40px rgba(255, 35, 64, 0.45), 0 18px 40px rgba(0, 0, 0, 0.6);
    background: #120807;
}

.front-circle img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 45%;
}

.art-sign .front-circle img {
    transform-origin: 50% 70%;
    transform: scale(2.3);
}

.art-roof .front-circle img {
    transform-origin: 50% 30%;
    transform: scale(1.8);
}

.art-street .front-circle img {
    transform-origin: 66% 96%;
    transform: scale(2.2);
}

.front-pop {
    position: absolute;
    z-index: 1;
    pointer-events: none;
}

.pop-logo {
    left: 6%;
    top: -20%;
    width: 88%;
    height: auto;
    transform: rotate(-6deg);
    filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.85)) drop-shadow(0 0 12px rgba(255, 35, 64, 0.5));
}

.pop-lanterns i {
    position: absolute;
    top: -14%;
    width: 17%;
    aspect-ratio: 64 / 150;
    background: var(--cn-lantern) center / contain no-repeat;
    filter: drop-shadow(0 0 14px rgba(255, 90, 60, 0.75));
    transform-origin: 50% 0;
    animation: front-sway 4s ease-in-out infinite;
}

.pop-lanterns {
    inset: 0;
}

.pop-lanterns i:first-child {
    left: -4%;
}

.pop-lanterns i:last-child {
    right: -2%;
    top: -22%;
    width: 14%;
    animation-delay: -2s;
}

@keyframes front-sway {
    0%, 100% { transform: rotate(-4deg); }
    50% { transform: rotate(4deg); }
}

.pop-vip {
    top: -6%;
    right: -8%;
    padding: 6px 16px 4px;
    font-family: var(--front-hand);
    font-size: 2.6rem;
    line-height: 1;
    color: #fff6d8;
    border: 3px solid var(--cn-gold-light);
    border-radius: 12px;
    background: rgba(13, 10, 10, 0.75);
    transform: rotate(10deg);
    text-shadow: 0 0 6px #fff, 0 0 16px var(--cn-gold-light), 0 0 30px #ff8a00;
    box-shadow: 0 0 14px rgba(242, 193, 78, 0.8), inset 0 0 14px rgba(242, 193, 78, 0.45);
}

.pop-seal {
    top: -4%;
    left: -4%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26%;
    aspect-ratio: 1;
    background: linear-gradient(135deg, #e0202a, #8b0000);
    border: 3px solid var(--cn-gold);
    color: var(--cn-gold-light);
    font-family: var(--cn-font-display);
    font-size: clamp(1.6rem, 3vw, 2.6rem);
    transform: rotate(45deg);
    box-shadow: 0 0 16px rgba(255, 35, 64, 0.7), 0 6px 14px rgba(0, 0, 0, 0.6);
}

.pop-seal::first-line {
    line-height: 1;
}

/* round arrows and dots */
.front-arrow {
    position: absolute;
    top: calc(var(--slides-top) + var(--slides-h) / 2 - 27px);
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    padding: 0;
    border-radius: 50%;
    border: 2px solid rgba(242, 193, 78, 0.85);
    background: rgba(13, 8, 7, 0.55);
    color: var(--cn-gold-light);
    cursor: pointer;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.6);
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.front-prev {
    left: max(84px, calc(50% - 600px));
}

.front-next {
    right: max(30px, calc(50% - 600px));
}

.front-arrow:hover,
.front-arrow:focus-visible {
    background: var(--cn-red);
    color: #fff;
    box-shadow: 0 0 14px rgba(255, 35, 64, 0.75);
    transform: scale(1.06);
    outline: none;
}

.front-dots {
    position: absolute;
    left: 50%;
    bottom: 34px;
    display: flex;
    gap: 10px;
    transform: translateX(-50%);
}

.front-dot {
    width: 11px;
    height: 11px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(242, 193, 78, 0.8);
    background: rgba(255, 244, 227, 0.25);
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.front-dot.is-active {
    background: var(--cn-gold-light);
    transform: scale(1.25);
    box-shadow: 0 0 8px rgba(242, 193, 78, 0.8);
}

.front-dot:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* ---------- Stripe band + brick strip ---------- */
.front-stripe {
    display: flex;
    height: 12px;
    background: #0d0a0a;
}

.front-stripe span {
    flex: 1 1 0;
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.25), inset 0 -2px 0 rgba(0, 0, 0, 0.25);
}

.front-stripe span:nth-child(1) { background: #d0161f; box-shadow: 0 0 12px rgba(255, 35, 64, 0.6), inset 0 2px 0 rgba(255, 255, 255, 0.25); }
.front-stripe span:nth-child(2) { background: var(--cn-gold-light); box-shadow: 0 0 12px rgba(242, 193, 78, 0.6), inset 0 2px 0 rgba(255, 255, 255, 0.35); }
.front-stripe span:nth-child(3) { background: var(--front-pink); box-shadow: 0 0 12px rgba(255, 45, 149, 0.6), inset 0 2px 0 rgba(255, 255, 255, 0.3); }
.front-stripe span:nth-child(4) { background: var(--front-jade); box-shadow: 0 0 12px rgba(18, 165, 117, 0.6), inset 0 2px 0 rgba(255, 255, 255, 0.3); }

.front-brick {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    padding: 18px 16px 16px;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.45)),
        var(--front-noise),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='48'%3E%3Crect width='96' height='48' fill='%231c0a08'/%3E%3Crect x='1.5' y='1.5' width='93' height='21' rx='1.5' fill='%235e1d15'/%3E%3Crect x='1.5' y='25.5' width='45' height='21' rx='1.5' fill='%234f1811'/%3E%3Crect x='49.5' y='25.5' width='45' height='21' rx='1.5' fill='%23662219'/%3E%3C/svg%3E");
    background-size: auto, 180px 180px, 96px 48px;
    border-bottom: 2px solid var(--cn-gold);
}

.front-brick-label {
    margin: 0;
    font-family: var(--front-hand);
    font-size: 2.1rem;
    line-height: 1;
    color: #fff4e3;
    text-shadow: 0 0 12px rgba(255, 35, 64, 0.6), 0 2px 0 rgba(0, 0, 0, 0.8);
    text-align: center;
}

.front-brick-label-sub {
    color: var(--cn-gold-light);
    font-size: 0.7em;
}

.front-brick-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    padding: 0;
    border-radius: 50%;
    border: 2px solid rgba(242, 193, 78, 0.85);
    background: rgba(13, 8, 7, 0.6);
    color: var(--cn-gold-light);
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

.front-brick-arrow:hover,
.front-brick-arrow:focus-visible {
    background: var(--cn-red);
    color: #fff;
    box-shadow: 0 0 12px rgba(255, 35, 64, 0.75);
    outline: none;
}

/* ---------- Tablets ---------- */
@media (max-width: 1179px) {
    .front-slide {
        inset: 0 100px;
        gap: 24px;
    }
}

/* ---------- Phones (bookmarks live in the hamburger menu here) ---------- */
@media (max-width: 768px) {
    .navbar.navbar-badge,
    .navbar.navbar-badge.scrolled {
        --hdr-h: 70px;
        --line-y: 54px;
        --badge: 62px;
    }

    .navbar.navbar-badge .nav-right {
        display: contents;
    }

    .navbar.navbar-badge .hamburger {
        position: absolute;
        left: 14px;
        top: 23px;
        z-index: 2;
    }

    .navbar.navbar-badge .profile-icon {
        position: absolute;
        right: 12px;
        top: 13px;
        z-index: 2;
        width: 36px;
        height: 36px;
    }

    .navbar.navbar-badge .nav-signout {
        position: absolute;
        right: 54px;
        top: 18px;
        z-index: 2;
        padding: 4px 8px;
        font-size: 0.75rem;
    }

    .navbar.navbar-badge .nav-menu {
        z-index: 3; /* the open menu covers the part of the badge that hangs below the header */
    }

    .badge-call {
        left: 50px;
    }

    .badge-location {
        right: 58px;
    }

    .is-signed-in .badge-location {
        right: 128px;
    }

    .is-signed-in .badge-location .badge-quick-text {
        display: none;
    }

    .badge-logo-ring::after {
        font-size: 8px;
        bottom: 13%;
    }

    .front-hero {
        --slides-top: 108px;
        --slides-h: 560px;
        padding-bottom: 62px;
    }

    .front-slide {
        inset: 0 16px;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        align-content: start;
        gap: 26px;
    }

    .front-slide-art {
        order: -1;
        width: min(240px, 62vw);
        margin-top: 34px;
    }

    .front-slide-title {
        font-size: clamp(2.1rem, 9vw, 2.7rem);
    }

    .front-slide-sub {
        font-size: 1.25rem;
        margin-bottom: 18px;
    }

    .front-ribbon {
        font-size: 1.2rem;
    }

    .pop-vip {
        font-size: 1.8rem;
        right: -10%;
    }

    .front-arrow {
        top: calc(var(--slides-top) + 34px + min(120px, 31vw) - 21px);
        width: 42px;
        height: 42px;
    }

    .front-prev {
        left: 10px;
    }

    .front-next {
        right: 10px;
    }

    .front-dots {
        bottom: 26px;
    }

    .front-brick {
        gap: 14px;
    }

    .front-brick-label {
        font-size: 1.7rem;
    }
}

@media (max-width: 380px) {
    .navbar.navbar-badge,
    .navbar.navbar-badge.scrolled {
        --badge: 56px;
    }

    .badge-quick {
        font-size: 1.05rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .front-slide,
    .front-slide .front-slide-text,
    .front-slide .front-slide-art {
        transition: opacity 0.2s linear;
        animation: none !important;
        transform: none !important;
    }

    .pop-lanterns i {
        animation: none;
    }
}

/* ==========================================================================
   "Social" bookmark: opens a small flyout with the Facebook / Instagram links
   ========================================================================== */
.nav-social-flyout[hidden] {
    display: none;
}

.nav-social-flyout {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
    background: var(--front-burlap, none), linear-gradient(180deg, #2e1818 0%, #0d0a0a 100%);
    border: 2px solid var(--cn-gold);
    border-radius: 4px;
    box-shadow: inset 0 0 0 1px rgba(139, 0, 0, 0.9), 0 10px 22px rgba(0, 0, 0, 0.65), 0 0 14px rgba(242, 193, 78, 0.25);
}

.nav-social-flyout a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 16px 6px 6px;
    color: var(--cn-gold-light);
    font-family: var(--cn-font-display);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    border-radius: 3px;
    transition: background 0.2s ease, color 0.2s ease;
}

.nav-social-flyout a:hover,
.nav-social-flyout a:focus-visible {
    background: linear-gradient(180deg, #d0161f 0%, #9c0d14 100%);
    color: #ffffff;
    outline: none;
}

.nav-social-flyout a:focus-visible {
    box-shadow: 0 0 0 2px #ffffff;
}

.nav-social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: var(--cn-gold-light);
    background: rgba(176, 18, 27, 0.55);
    border: 1px solid rgba(242, 193, 78, 0.75);
}

.nav-social-flyout a:hover .nav-social-icon,
.nav-social-flyout a:focus-visible .nav-social-icon {
    color: #ffffff;
    border-color: #ffffff;
}

@media (min-width: 769px) {
    .nav-social-flyout {
        position: absolute;
        top: 18px;
        left: calc(100% + 12px);
        z-index: 3;
    }

    /* little gold pointer towards the bookmark */
    .nav-social-flyout::before {
        content: '';
        position: absolute;
        top: 20px;
        left: -10px;
        border: 8px solid transparent;
        border-left: 0;
        border-right: 10px solid var(--cn-gold);
    }

    .nav-menu li.is-open {
        transform: translateX(0);
    }
}

@media (max-width: 768px) {
    .nav-social-flyout {
        width: max-content;
        min-width: 200px;
        max-width: calc(100vw - 40px);
        margin: 10px 0 0 28px;
    }

    /* keep the character on the tab itself when the flyout makes the item taller */
    .nav-menu li.nav-tab-social::before {
        top: 23px;
    }
}

/* /cancel stays reachable: footer link (styled like Privacy Policy) and the hint on the profile page */

.profile-cancel-hint {
    margin-top: 1.6rem;
    text-align: center;
    font-size: 0.95rem;
}

.profile-section .profile-cancel-link {
    color: var(--cn-red, #d0161f);
    font-weight: bold;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Spanish labels are longer ("Reservaciones", "Iniciar sesión"): slightly smaller type on the
   vertical bookmarks so the text stays inside the frame */
@media (min-width: 769px) {
    .nav-menu > li > a,
    .nav-menu > li > a:hover,
    .nav-menu > li > a.active {
        font-size: 11.5px;
        letter-spacing: 0.05em;
    }
}

@media (min-width: 769px) and (max-height: 820px) {
    .nav-menu > li > a,
    .nav-menu > li > a:hover,
    .nav-menu > li > a.active {
        font-size: 10.5px;
        letter-spacing: 0.03em;
    }
}

/* While the cookie notice is open, the footer gets extra room so nothing stays hidden under it */
html.cookie-banner-open .footer {
    padding-bottom: calc(2rem + var(--cookie-banner-space, 180px));
}

/* ==========================================================================
   Reviews (index.html #reviews): real Google Maps reviews, static HTML.
   Red / black / gold neon cards in a scroll-snap row: arrows on desktop,
   native swipe on phones. Heading "Reviews" is the only English on the site.
   ========================================================================== */
.reviews {
    padding: 80px 0 72px;
    color: #f6eadb;
    background:
        var(--cn-lattice),
        radial-gradient(ellipse at 50% 0%, rgba(212, 160, 23, 0.16) 0%, rgba(6, 4, 7, 0) 58%),
        radial-gradient(ellipse at 0% 100%, rgba(255, 35, 64, 0.2) 0%, rgba(6, 4, 7, 0) 55%),
        #070405;
    background-size: 60px 60px, 100% 100%, 100% 100%, auto;
    border-top: 14px solid transparent;
    border-image: var(--cn-band) 14 0 0 0 / 14px 0 0 0 repeat;
    position: relative;
}

.reviews h2 {
    font-size: 2.5rem;
    margin-bottom: 1.4rem;
    color: #fff6dc;
    text-shadow: 0 0 4px rgba(255, 255, 255, 0.5), 0 0 12px rgba(242, 193, 78, 0.9), 0 0 26px rgba(255, 35, 64, 0.65), 0 0 44px rgba(255, 35, 64, 0.4);
}

.reviews-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 12px;
    margin: 0 auto 2.2rem;
    color: #e9d9c2;
    font-size: 1.05rem;
}

.reviews-score {
    font-family: var(--cn-font-display);
    font-size: 2.1rem;
    font-weight: 900;
    line-height: 1;
    color: var(--cn-gold-light);
    text-shadow: 0 0 10px rgba(242, 193, 78, 0.7), 0 0 22px rgba(255, 35, 64, 0.45);
}

/* Partial stars: gold layer clipped to --rating / 5 over a dim row */
.reviews-meter {
    position: relative;
    display: inline-block;
    font-size: 1.45rem;
    line-height: 1;
    letter-spacing: 2px;
    color: rgba(242, 193, 78, 0.22);
}

.reviews-meter::before {
    content: '★★★★★';
    position: absolute;
    top: 0;
    left: 0;
    width: calc(var(--rating, 0) / 5 * 100%);
    overflow: hidden;
    white-space: nowrap;
    color: var(--cn-gold-light);
    text-shadow: 0 0 8px rgba(242, 193, 78, 0.75);
}

.reviews-count {
    letter-spacing: 0.02em;
}

.reviews-slider {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
}

.reviews-track {
    flex: 1;
    min-width: 0;
    display: flex;
    gap: 22px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    padding: 10px 4px 18px;
    scroll-padding: 0 4px;
    scrollbar-width: thin;
    scrollbar-color: rgba(212, 160, 23, 0.6) transparent;
}

.reviews-track:focus-visible {
    outline: 2px solid var(--cn-gold-light);
    outline-offset: 4px;
    border-radius: 8px;
}

.reviews-track::-webkit-scrollbar {
    height: 6px;
}

.reviews-track::-webkit-scrollbar-thumb {
    background: rgba(212, 160, 23, 0.55);
    border-radius: 3px;
}

.review-card {
    flex: 0 0 calc((100% - 44px) / 3);
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 22px 22px 18px;
    border-radius: 8px;
    background: linear-gradient(165deg, rgba(120, 10, 20, 0.42) 0%, rgba(14, 8, 10, 0.92) 55%, rgba(8, 5, 6, 0.96) 100%);
    border: 1px solid rgba(212, 160, 23, 0.55);
    border-top: 3px solid var(--cn-gold);
    box-shadow: 0 0 0 1px rgba(255, 35, 64, 0.18), 0 0 20px rgba(255, 35, 64, 0.22), 0 14px 30px rgba(0, 0, 0, 0.55), inset 0 0 30px rgba(212, 160, 23, 0.05);
    transition: transform 0.25s, box-shadow 0.25s;
}

.review-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 0 1px rgba(242, 193, 78, 0.45), 0 0 28px rgba(255, 35, 64, 0.4), 0 14px 30px rgba(0, 0, 0, 0.55);
}

.review-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.review-avatar {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--cn-font-display);
    font-weight: 900;
    font-size: 1.15rem;
    color: #2a0406;
    background: radial-gradient(circle at 35% 30%, #ffe08a 0%, var(--cn-gold) 60%, #8a6408 100%);
    box-shadow: 0 0 0 2px #7a0a0f, 0 0 12px rgba(242, 193, 78, 0.55);
}

.review-who {
    min-width: 0;
}

.review-name {
    margin: 0;
    font-weight: 800;
    font-size: 1.05rem;
    color: #fff3dc;
    letter-spacing: 0.02em;
}

.review-source {
    margin: 2px 0 0;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    color: #cdb89c;
}

.review-g {
    flex: 0 0 auto;
    background: #ffffff;
    border-radius: 50%;
    padding: 2px;
    box-sizing: content-box;
}

.review-stars {
    display: flex;
    gap: 3px;
    font-size: 1.2rem;
    line-height: 1;
}

.review-stars .is-on {
    color: var(--cn-gold-light);
    text-shadow: 0 0 8px rgba(242, 193, 78, 0.75);
}

.review-stars .is-off {
    color: rgba(242, 193, 78, 0.22);
}

.review-text {
    margin: 0;
    flex: 1;
    color: #eee0cc;
    line-height: 1.6;
    font-size: 0.98rem;
    position: relative;
    padding-left: 14px;
    border-left: 2px solid rgba(255, 35, 64, 0.7);
}

.review-text p {
    margin: 0;
}

.review-text-empty {
    color: #b9a58b;
    font-style: italic;
    border-left-color: rgba(212, 160, 23, 0.4);
}

.review-scores {
    margin: 0;
    padding-top: 10px;
    border-top: 1px dashed rgba(212, 160, 23, 0.35);
    font-size: 0.84rem;
    color: #d9c19a;
    letter-spacing: 0.02em;
}

.reviews-arrow {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid var(--cn-gold);
    background: rgba(10, 5, 6, 0.85);
    color: var(--cn-gold-light);
    font-size: 1.9rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 0 4px;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(242, 193, 78, 0.35), inset 0 0 8px rgba(255, 35, 64, 0.25);
    transition: background 0.2s, color 0.2s, box-shadow 0.2s, opacity 0.2s;
}

.reviews-arrow:hover,
.reviews-arrow:focus-visible {
    background: var(--cn-red);
    color: #fff8e7;
    box-shadow: 0 0 12px rgba(255, 35, 64, 0.8), 0 0 26px rgba(242, 193, 78, 0.35);
    outline: none;
}

.reviews-arrow:disabled {
    opacity: 0.3;
    cursor: default;
    box-shadow: none;
    background: rgba(10, 5, 6, 0.85);
    color: var(--cn-gold-light);
}

.reviews-note {
    margin: 1.2rem auto 0;
    text-align: center;
    font-size: 0.85rem;
    color: #a8957c;
}

.reviews-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 1.6rem;
}

.reviews-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-decoration: none;
}

.reviews-actions .reviews-write {
    background: linear-gradient(135deg, #e0162f 0%, #b0121b 55%, #6d0009 100%);
    border: 2px solid var(--cn-gold);
    box-shadow: 0 0 10px rgba(255, 35, 64, 0.6), 0 0 22px rgba(242, 193, 78, 0.25), inset 0 0 10px rgba(255, 255, 255, 0.15);
}

.reviews-actions .reviews-write:hover,
.reviews-actions .reviews-write:focus-visible {
    background: linear-gradient(135deg, #ff2340 0%, #d0161f 55%, #8b0010 100%);
    border-color: var(--cn-gold-light);
}

.reviews-actions .reviews-all {
    color: var(--cn-gold-light);
    border: 2px solid var(--cn-gold);
    background: rgba(10, 5, 6, 0.7);
    box-shadow: 0 0 8px rgba(242, 193, 78, 0.4), inset 0 0 8px rgba(242, 193, 78, 0.15);
}

.reviews-actions .reviews-all:hover,
.reviews-actions .reviews-all:focus-visible {
    background: rgba(212, 160, 23, 0.18);
    color: #ffffff;
    border-color: var(--cn-gold-light);
    box-shadow: 0 0 12px rgba(242, 193, 78, 0.7), 0 0 26px rgba(255, 35, 64, 0.35);
}

.review-g-btn {
    width: 18px;
    height: 18px;
}

@media (max-width: 1024px) {
    .review-card {
        flex-basis: calc((100% - 22px) / 2);
    }
}

@media (max-width: 768px) {
    .reviews {
        padding: 56px 0 52px;
    }

    .reviews h2 {
        font-size: 1.9rem;
    }

    .reviews-slider {
        gap: 0;
    }

    /* Phones: swipe the row; the next card peeks in so it is clear there is more */
    .reviews-arrow {
        display: none;
    }

    .reviews-track {
        gap: 14px;
        margin: 0 -20px;
        padding: 8px 20px 16px;
        scroll-padding: 0 20px;
    }

    .review-card {
        flex-basis: 84%;
        padding: 18px 18px 16px;
    }

    .reviews-actions .btn {
        width: 100%;
        max-width: 360px;
        font-size: 0.98rem;
        letter-spacing: 0.02em;
        padding-left: 14px;
        padding-right: 14px;
        white-space: nowrap;
    }
}

@media (prefers-reduced-motion: reduce) {
    .reviews-track {
        scroll-behavior: auto;
    }

    .review-card,
    .review-card:hover {
        transition: none;
        transform: none;
    }
}

/* ==========================================================================
   Reviews call to action: big gold-accented Google button + QR code
   (neutral wording: any honest review is welcome; no incentives)
   ========================================================================== */
.reviews-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    max-width: 900px;
    margin: 2rem auto 0;
    padding: 30px 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(176, 18, 27, 0.32) 0%, rgba(14, 8, 10, 0.92) 60%, rgba(60, 40, 6, 0.4) 100%);
    border: 1px solid rgba(212, 160, 23, 0.6);
    box-shadow: 0 0 0 1px rgba(255, 35, 64, 0.2), 0 0 26px rgba(255, 35, 64, 0.22), inset 0 0 40px rgba(212, 160, 23, 0.06);
}

.reviews-cta-text {
    flex: 1;
    min-width: 0;
    text-align: left;
}

.reviews-cta-title {
    margin: 0 0 6px;
    font-family: var(--cn-font-display);
    font-weight: 900;
    font-size: 1.9rem;
    line-height: 1.2;
    color: var(--cn-gold-light);
    text-shadow: 0 0 10px rgba(242, 193, 78, 0.6), 0 0 24px rgba(255, 35, 64, 0.4);
}

.reviews-cta-sub {
    margin: 0;
    font-size: 1.08rem;
    line-height: 1.6;
    color: #f1e3cf;
}

.reviews-cta .reviews-actions {
    justify-content: flex-start;
    align-items: center;
    margin-top: 1.3rem;
    gap: 18px;
}

/* Bigger "Déjanos tu reseña en Google" with twinkling gold sparkles */
.reviews-actions .reviews-write-big {
    position: relative;
    overflow: visible;
    font-size: 1.25rem;
    padding: 18px 34px;
    border-width: 3px;
    border-color: var(--cn-gold-light);
    border-radius: 999px;
    box-shadow: 0 0 0 3px rgba(212, 160, 23, 0.25), 0 0 16px rgba(242, 193, 78, 0.55), 0 0 34px rgba(255, 35, 64, 0.45), inset 0 0 12px rgba(255, 255, 255, 0.16);
}

.reviews-actions .reviews-write-big .review-g-btn {
    width: 24px;
    height: 24px;
}

.reviews-actions .reviews-write-big::before,
.reviews-actions .reviews-write-big::after {
    content: '✦';
    position: absolute;
    color: var(--cn-gold-light);
    text-shadow: 0 0 8px rgba(242, 193, 78, 0.95);
    pointer-events: none;
    animation: reviews-twinkle 2.4s ease-in-out infinite;
}

.reviews-actions .reviews-write-big::before {
    top: -14px;
    left: 14px;
    font-size: 22px;
}

.reviews-actions .reviews-write-big::after {
    bottom: -12px;
    right: 18px;
    font-size: 17px;
    animation-delay: 1.2s;
}

.reviews-actions .reviews-write-big:hover,
.reviews-actions .reviews-write-big:focus-visible {
    border-color: #fff3c4;
    box-shadow: 0 0 0 3px rgba(242, 193, 78, 0.4), 0 0 22px rgba(242, 193, 78, 0.8), 0 0 44px rgba(255, 35, 64, 0.6);
}

@keyframes reviews-twinkle {
    0%, 100% { opacity: 0.35; transform: scale(0.8) rotate(0deg); }
    50% { opacity: 1; transform: scale(1.15) rotate(20deg); }
}

.reviews-qr {
    flex: 0 0 auto;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}

.reviews-qr img {
    display: block;
    width: 150px;
    height: 150px;
    padding: 8px;
    background: #ffffff;
    border-radius: 10px;
    border: 3px solid var(--cn-gold);
    box-shadow: 0 0 14px rgba(242, 193, 78, 0.45);
    image-rendering: pixelated;
}

.reviews-qr figcaption {
    font-size: 0.9rem;
    color: #e9d9c2;
    letter-spacing: 0.03em;
}

.reviews-qr-download {
    font-size: 0.85rem;
    color: var(--cn-gold-light);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.reviews-qr-download:hover,
.reviews-qr-download:focus-visible {
    color: #ffffff;
    text-shadow: 0 0 8px rgba(242, 193, 78, 0.8);
}

@media (max-width: 768px) {
    .reviews-cta {
        flex-direction: column;
        gap: 22px;
        padding: 24px 18px;
        text-align: center;
    }

    .reviews-cta-text {
        text-align: center;
    }

    .reviews-cta-title {
        font-size: 1.6rem;
    }

    .reviews-cta .reviews-actions {
        justify-content: center;
    }

    .reviews-actions .reviews-write-big {
        font-size: 1.08rem;
        padding: 16px 14px;
    }

    .reviews-qr img {
        width: 128px;
        height: 128px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .reviews-actions .reviews-write-big::before,
    .reviews-actions .reviews-write-big::after {
        animation: none;
        opacity: 0.9;
    }
}

/* ==========================================================================
   Cash savings notice (reservation form, footer on all pages, booking confirmation)
   Celebratory gold + money-green accent, still in the red/black/gold theme.
   ========================================================================== */
.cash-notice {
    --cash-green: #2fd07a;
    --cash-green-deep: #0f7a43;
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 1.1rem;
    padding: 14px 16px;
    border-radius: 10px;
    background:
        radial-gradient(ellipse at 0% 50%, rgba(47, 208, 122, 0.22) 0%, rgba(47, 208, 122, 0) 55%),
        linear-gradient(135deg, rgba(212, 160, 23, 0.2) 0%, rgba(20, 60, 36, 0.35) 55%, rgba(176, 18, 27, 0.18) 100%);
    border: 1.5px solid rgba(242, 193, 78, 0.75);
    box-shadow: 0 0 0 1px rgba(47, 208, 122, 0.25), 0 0 16px rgba(47, 208, 122, 0.22), 0 0 22px rgba(242, 193, 78, 0.18), inset 0 0 18px rgba(242, 193, 78, 0.08);
    color: #fff6e2;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.45;
    text-align: left;
}

.cash-notice-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    font-size: 1.35rem;
    line-height: 1;
    background: radial-gradient(circle at 35% 30%, #fff1b8 0%, var(--cn-gold-light) 45%, #a37a0c 100%);
    box-shadow: 0 0 0 2px var(--cash-green-deep), 0 0 12px rgba(47, 208, 122, 0.55), 0 0 18px rgba(242, 193, 78, 0.45);
}

.cash-notice-text {
    min-width: 0;
}

.cash-notice .cash-notice-pct {
    display: inline-block;
    padding: 1px 9px;
    margin: 0 2px;
    border-radius: 999px;
    background: linear-gradient(180deg, #3ee08a 0%, #149a55 100%);
    color: #ffffff;
    font-weight: 900;
    letter-spacing: 0.02em;
    white-space: nowrap;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
    box-shadow: 0 0 0 1.5px var(--cn-gold-light), 0 0 10px rgba(47, 208, 122, 0.6);
}

.footer .cash-notice-footer {
    display: inline-flex;
    max-width: 640px;
    margin: 0.9rem auto 0.4rem;
    padding: 8px 18px 8px 8px;
    border-radius: 999px;
    font-size: 0.95rem;
    opacity: 1;
}

.footer .cash-notice-footer .cash-notice-icon {
    width: 34px;
    height: 34px;
    font-size: 1.1rem;
}

@media (max-width: 600px) {
    .footer .cash-notice-footer {
        border-radius: 12px;
        padding: 10px 14px 10px 10px;
        text-align: left;
    }
}

/* ---------- Hero slide 1: pay cash and save ---------- */
.front-slide-cash .front-slide-title .cash-hero-pct {
    display: inline-block;
    padding: 0 12px;
    border-radius: 12px;
    background: linear-gradient(180deg, #3ee08a 0%, #139a54 100%);
    color: #ffffff;
    font-weight: inherit;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.45);
    box-shadow: 0 0 0 2px var(--cn-gold-light), 0 0 18px rgba(47, 208, 122, 0.7);
}

.front-slide-cash .front-slide-sub {
    color: #fff1c9;
    text-shadow: 0 0 10px rgba(242, 193, 78, 0.5);
}

.front-slide-cash .front-slide-sub span {
    color: #6ff0a8;
    text-shadow: 0 0 10px rgba(47, 208, 122, 0.65);
}

.front-ribbon.ribbon-cash {
    background: linear-gradient(180deg, #2fd07a, #0f7a43);
    color: #fffbea;
    filter: drop-shadow(0 0 10px rgba(47, 208, 122, 0.7)) drop-shadow(0 0 2px rgba(242, 193, 78, 0.9));
}

.art-cash .front-circle img {
    transform-origin: 50% 55%;
    transform: scale(1.35);
    filter: saturate(1.1);
}

.pop-cash {
    top: -8%;
    right: -12%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 46%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff1b8 0%, var(--cn-gold-light) 40%, #b8860b 100%);
    border: 4px solid #0f7a43;
    box-shadow: 0 0 0 3px var(--cn-gold-light), 0 0 26px rgba(47, 208, 122, 0.75), 0 10px 22px rgba(0, 0, 0, 0.6);
    color: #3a0a06;
    text-align: center;
    transform: rotate(10deg);
    animation: pop-cash-bob 3.2s ease-in-out infinite;
}

.pop-cash-emoji {
    font-size: clamp(1.4rem, 2.6vw, 2.2rem);
    line-height: 1;
}

.pop-cash b {
    display: block;
    font-family: var(--cn-font-display);
    font-weight: 900;
    font-size: clamp(1rem, 2vw, 1.6rem);
    line-height: 1.05;
    white-space: nowrap;
}

.pop-cash small {
    display: block;
    font-family: var(--front-hand);
    font-size: clamp(0.85rem, 1.5vw, 1.2rem);
    line-height: 1;
    color: #0f5a33;
}

@keyframes pop-cash-bob {
    0%, 100% { transform: rotate(10deg) translateY(0); }
    50% { transform: rotate(6deg) translateY(-6px); }
}

@media (max-width: 768px) {
    .pop-cash {
        right: -16%;
        width: 50%;
    }

    .pop-cash-emoji {
        font-size: 1.3rem;
    }

    .pop-cash b {
        font-size: 1rem;
    }

    .pop-cash small {
        font-size: 0.85rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pop-cash {
        animation: none;
    }
}

/* ==========================================================================
   Nightclub vibe: hero light rig (beams, lasers, dance-floor glow, equalizer),
   gallery "La Noche en Chinesca" + lightbox, neon flicker on headings,
   gentle strobe on the main calls to action, photo backdrops in sections.
   CSS only (transform / opacity animations); everything stops with reduced motion.
   Photos: Unsplash License (free use), illustrative, not photos of the bar.
   ========================================================================== */
:root {
    --nc-pink: #ff2d95;
    --nc-purple: #a13bff;
    --nc-blue: #1f5bff;
    --nc-cyan: #19d3ff;
    --nc-red: #ff2340;
    --nc-black: #050207;
}

/* ---------- Hero: deeper black stage with neon washes ---------- */
.front-hero {
    background:
        radial-gradient(ellipse 60% 45% at 70% 44%, rgba(255, 45, 149, 0.2), transparent 70%),
        radial-gradient(ellipse 55% 50% at 25% 52%, rgba(176, 18, 27, 0.34), transparent 70%),
        radial-gradient(ellipse 45% 40% at 92% 8%, rgba(31, 91, 255, 0.2), transparent 70%),
        radial-gradient(ellipse 45% 40% at 6% 10%, rgba(161, 59, 255, 0.22), transparent 70%),
        radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.65) 100%),
        var(--front-burlap),
        linear-gradient(180deg, #0b050a 0%, #07030a 60%, var(--nc-black) 100%);
}

.front-slides {
    z-index: 1;
}

.front-dots {
    z-index: 2;
}

.front-lights {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

/* moving spotlight beams from the ceiling */
.fl-beam {
    position: absolute;
    top: -4%;
    left: var(--x);
    width: clamp(150px, 19vw, 280px);
    height: 120%;
    transform-origin: 50% 0;
    transform: translateX(-50%) rotate(var(--a));
    clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%);
    background: linear-gradient(180deg, var(--c) 0%, rgba(0, 0, 0, 0) 82%);
    opacity: 0.3;
    animation: fl-sweep var(--d, 8s) ease-in-out infinite alternate;
    animation-delay: var(--dl, 0s);
    will-change: transform;
}

.fl-beam:nth-child(1) { --x: 8%;  --c: rgba(255, 45, 149, 0.9); --a: -26deg; --b: 16deg;  --d: 7.5s; }
.fl-beam:nth-child(2) { --x: 30%; --c: rgba(161, 59, 255, 0.85); --a: 20deg;  --b: -18deg; --d: 9s;   --dl: -3s; }
.fl-beam:nth-child(3) { --x: 52%; --c: rgba(255, 35, 64, 0.8);  --a: -14deg; --b: 22deg;  --d: 6.5s; --dl: -1.5s; }
.fl-beam:nth-child(4) { --x: 74%; --c: rgba(31, 91, 255, 0.85); --a: 24deg;  --b: -20deg; --d: 8.5s; --dl: -4.5s; }
.fl-beam:nth-child(5) { --x: 94%; --c: rgba(242, 193, 78, 0.7); --a: 12deg;  --b: -26deg; --d: 10s;  --dl: -2s; }

@keyframes fl-sweep {
    from { transform: translateX(-50%) rotate(var(--a)); }
    to { transform: translateX(-50%) rotate(var(--b)); }
}

/* thin laser lines that fan out, flash and fade */
.fl-laser {
    position: absolute;
    top: -2%;
    left: var(--x);
    width: 2px;
    height: 150%;
    transform-origin: 50% 0;
    transform: rotate(var(--a));
    background: linear-gradient(180deg, var(--c) 0%, rgba(0, 0, 0, 0) 80%);
    box-shadow: 0 0 6px var(--c), 0 0 14px var(--c);
    opacity: 0;
    animation: fl-laser var(--d, 5s) ease-in-out infinite;
    animation-delay: var(--dl, 0s);
    will-change: transform, opacity;
}

.fl-laser:nth-child(6) { --x: 50%; --c: #ff2d95; --a: -58deg; --b: -12deg; --d: 5.2s; }
.fl-laser:nth-child(7) { --x: 50%; --c: #19d3ff; --a: 56deg;  --b: 10deg;  --d: 6.1s; --dl: -2.4s; }
.fl-laser:nth-child(8) { --x: 22%; --c: #6dff2e; --a: -40deg; --b: 30deg;  --d: 7.3s; --dl: -4s; }
.fl-laser:nth-child(9) { --x: 80%; --c: #ff2340; --a: 44deg;  --b: -30deg; --d: 6.7s; --dl: -1s; }

@keyframes fl-laser {
    0% { opacity: 0; transform: rotate(var(--a)); }
    12% { opacity: 0.55; }
    46% { opacity: 0.55; transform: rotate(var(--b)); }
    56% { opacity: 0; transform: rotate(var(--b)); }
    100% { opacity: 0; transform: rotate(var(--a)); }
}

/* dance-floor glow that pulses at the bottom of the stage */
.fl-floor {
    position: absolute;
    left: -10%;
    right: -10%;
    bottom: -28%;
    height: 58%;
    background:
        radial-gradient(ellipse 45% 50% at 30% 50%, rgba(255, 45, 149, 0.5), transparent 70%),
        radial-gradient(ellipse 42% 50% at 72% 50%, rgba(31, 91, 255, 0.42), transparent 70%),
        radial-gradient(ellipse 30% 40% at 50% 60%, rgba(161, 59, 255, 0.4), transparent 70%);
    opacity: 0.55;
    animation: fl-floor 1.9s ease-in-out infinite alternate;
    will-change: opacity, transform;
}

@keyframes fl-floor {
    from { opacity: 0.35; transform: scaleX(0.95); }
    to { opacity: 0.85; transform: scaleX(1.05); }
}

/* equalizer along the bottom edge of the hero */
.front-eq {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: clamp(3px, 0.7vw, 8px);
    height: 58px;
    padding: 0 3%;
    opacity: 0.42;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}

.front-eq i {
    flex: 1 1 0;
    max-width: 16px;
    height: 100%;
    border-radius: 3px 3px 0 0;
    background: linear-gradient(0deg, #ff2340 0%, #ff2d95 45%, #a13bff 75%, #19d3ff 100%);
    transform-origin: 50% 100%;
    transform: scaleY(0.3);
    animation: club-eq 0.9s ease-in-out infinite alternate;
}

.front-eq i:nth-child(3n+1) { animation-duration: 0.7s; }
.front-eq i:nth-child(3n+2) { animation-duration: 0.95s; animation-delay: -0.3s; }
.front-eq i:nth-child(3n) { animation-duration: 0.6s; animation-delay: -0.5s; }
.front-eq i:nth-child(4n) { animation-duration: 1.15s; animation-delay: -0.2s; }
.front-eq i:nth-child(5n) { animation-duration: 0.82s; animation-delay: -0.65s; }
.front-eq i:nth-child(7n) { animation-duration: 0.66s; animation-delay: -0.1s; }

/* nightlife photos in the round frames (slides 3-5) */
.front-slide-art .front-circle img.front-photo {
    transform: none;
    object-position: 50% 50%;
}

.art-roof .front-circle img.front-photo {
    object-position: 50% 40%;
}

.art-street .front-circle img.front-photo {
    object-position: 38% 50%;
}

.front-circle {
    box-shadow: 0 0 0 6px rgba(176, 18, 27, 0.9), 0 0 0 7px rgba(242, 193, 78, 0.6), 0 0 34px rgba(255, 45, 149, 0.45), 0 0 70px rgba(161, 59, 255, 0.3), 0 18px 40px rgba(0, 0, 0, 0.6);
}

/* ---------- Calls to action: gentle strobe + light sweep ---------- */
.front-ribbon::before,
.front-ribbon::after {
    content: '';
    position: absolute;
    pointer-events: none;
}

.front-ribbon::before {
    inset: 0;
    background: #ffffff;
    opacity: 0;
    animation: cta-strobe 5s linear infinite;
}

.front-ribbon::after {
    top: 0;
    bottom: 0;
    left: 0;
    width: 42%;
    background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0) 100%);
    transform: translateX(-130%);
    animation: cta-shine 5s ease-in-out infinite;
}

@keyframes cta-strobe {
    0%, 85%, 88%, 91%, 100% { opacity: 0; }
    86.5% { opacity: 0.26; }
    89.5% { opacity: 0.18; }
}

@keyframes cta-shine {
    0%, 62% { transform: translateX(-130%); }
    82%, 100% { transform: translateX(340%); }
}

#reservationForm button[type="submit"] {
    animation: cta-glow-strobe 5s linear infinite;
}

#reservationForm button[type="submit"]:hover,
#reservationForm button[type="submit"]:focus-visible {
    animation: none;
}

@keyframes cta-glow-strobe {
    0%, 84%, 88%, 92%, 100% {
        box-shadow: 0 0 8px rgba(255, 45, 149, 0.6), 0 0 22px rgba(255, 35, 64, 0.3), inset 0 0 10px rgba(255, 255, 255, 0.18);
    }
    86%, 90% {
        box-shadow: 0 0 12px #ffffff, 0 0 28px rgba(255, 45, 149, 0.95), 0 0 56px rgba(255, 35, 64, 0.6), inset 0 0 16px rgba(255, 255, 255, 0.4);
    }
}

/* ---------- Neon flicker on the section headings ---------- */
.reservations h2,
.gallery h2,
.reviews h2,
.contact h2,
.cancellation h2,
.login-page-title,
.profile-section h2 {
    animation: neon-title-flicker 7s linear infinite;
}

.gallery h2 { animation-duration: 6.3s; }
.reviews h2 { animation-duration: 8.1s; animation-delay: -2s; }
.contact h2 { animation-duration: 9.4s; animation-delay: -5s; }

/* ---------- Photo backdrops (very dim) ---------- */
.reviews {
    background-color: #070405;
    background-image:
        var(--cn-lattice),
        radial-gradient(ellipse at 50% 0%, rgba(212, 160, 23, 0.16) 0%, rgba(6, 4, 7, 0) 58%),
        radial-gradient(ellipse at 0% 100%, rgba(255, 35, 64, 0.2) 0%, rgba(6, 4, 7, 0) 55%),
        radial-gradient(ellipse at 100% 60%, rgba(161, 59, 255, 0.16) 0%, rgba(6, 4, 7, 0) 50%),
        linear-gradient(180deg, rgba(7, 4, 5, 0.96) 0%, rgba(7, 4, 5, 0.84) 45%, rgba(7, 4, 5, 0.97) 100%),
        url('IMAGES/noche-escenario.webp');
    background-size: 60px 60px, 100% 100%, 100% 100%, 100% 100%, 100% 100%, cover;
    background-position: 0 0, center, center, center, center, center 40%;
    background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
}

.contact {
    background-color: var(--nc-black);
    background-image:
        var(--cn-lattice),
        radial-gradient(ellipse at 50% 0%, rgba(255, 35, 64, 0.28) 0%, rgba(6, 4, 7, 0) 60%),
        radial-gradient(ellipse at 100% 100%, rgba(161, 59, 255, 0.16) 0%, rgba(6, 4, 7, 0) 50%),
        linear-gradient(180deg, rgba(5, 2, 7, 0.95) 0%, rgba(5, 2, 7, 0.82) 50%, rgba(5, 2, 7, 0.96) 100%),
        url('IMAGES/noche-faroles.webp');
    background-size: 60px 60px, 100% 100%, 100% 100%, 100% 100%, cover;
    background-position: 0 0, center, center, center, center 35%;
    background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat;
}

/* ---------- Gallery: La Noche en Chinesca ---------- */
.gallery {
    position: relative;
    overflow: hidden;
    padding: 80px 0 64px;
    color: #f6eadb;
    background-color: var(--nc-black);
    background-image:
        radial-gradient(ellipse 60% 40% at 50% 0%, rgba(255, 45, 149, 0.22), transparent 70%),
        radial-gradient(ellipse 50% 45% at 0% 100%, rgba(161, 59, 255, 0.22), transparent 70%),
        radial-gradient(ellipse 50% 45% at 100% 85%, rgba(31, 91, 255, 0.18), transparent 70%),
        var(--cn-lattice);
    background-size: 100% 100%, 100% 100%, 100% 100%, 60px 60px;
    border-top: 14px solid transparent;
    border-image: var(--cn-band) 14 0 0 0 / 14px 0 0 0 repeat;
}

.gallery .container {
    position: relative;
    z-index: 1;
}

.gallery h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.gallery-sub {
    max-width: 640px;
    margin: 0 auto 2.2rem;
    font-family: var(--front-hand);
    font-size: 1.55rem;
    line-height: 1.2;
    text-align: center;
    color: #ff6cb8;
    text-shadow: 0 0 10px rgba(255, 45, 149, 0.6);
}

.gallery-lasers {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.gallery-lasers span {
    position: absolute;
    top: -20%;
    left: var(--x);
    width: 2px;
    height: 150%;
    transform-origin: 50% 0;
    transform: rotate(var(--a));
    background: linear-gradient(180deg, var(--c), rgba(0, 0, 0, 0) 75%);
    box-shadow: 0 0 8px var(--c);
    opacity: 0.22;
    animation: gl-laser var(--d) ease-in-out infinite alternate;
}

.gallery-lasers span:nth-child(1) { --x: 6%;  --c: #ff2d95; --a: -35deg; --b: -10deg; --d: 9s; }
.gallery-lasers span:nth-child(2) { --x: 94%; --c: #19d3ff; --a: 35deg;  --b: 8deg;   --d: 11s; }
.gallery-lasers span:nth-child(3) { --x: 50%; --c: #a13bff; --a: -20deg; --b: 20deg;  --d: 13s; }

@keyframes gl-laser {
    from { transform: rotate(var(--a)); }
    to { transform: rotate(var(--b)); }
}

/* masonry: CSS columns keep every photo uncropped */
.gallery-grid {
    max-width: 1100px;
    margin: 0 auto;
    column-count: 3;
    column-gap: 18px;
}

.gallery-item {
    position: relative;
    margin: 0 0 18px;
    break-inside: avoid;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 45, 149, 0.45);
    background: #0d0810;
    box-shadow: 0 0 0 1px rgba(161, 59, 255, 0.22), 0 10px 26px rgba(0, 0, 0, 0.6);
    transform: translateZ(0);
    transition: box-shadow 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.gallery-open {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
}

.gallery-open img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.6s ease, filter 0.3s ease;
}

.gallery-item figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 28px 14px 10px;
    font-family: var(--front-hand);
    font-size: 1.3rem;
    line-height: 1.1;
    color: #fff4e3;
    text-shadow: 0 0 8px rgba(255, 45, 149, 0.85), 0 2px 0 rgba(0, 0, 0, 0.8);
    background: linear-gradient(0deg, rgba(5, 2, 7, 0.88) 0%, rgba(5, 2, 7, 0) 100%);
    pointer-events: none;
}

.gallery-item:hover,
.gallery-item:has(.gallery-open:focus-visible) {
    border-color: #ff8cc8;
    box-shadow: 0 0 0 1px var(--nc-pink), 0 0 18px rgba(255, 45, 149, 0.75), 0 0 44px rgba(161, 59, 255, 0.45), 0 10px 26px rgba(0, 0, 0, 0.6);
    transform: translateY(-3px);
}

.gallery-item:hover img,
.gallery-item:has(.gallery-open:focus-visible) img {
    transform: scale(1.05);
    filter: saturate(1.2) brightness(1.08);
}

.gallery-open:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: -3px;
}

.gallery-note {
    margin: 0.6rem 0 0;
    font-size: 0.85rem;
    text-align: center;
    color: #a996ad;
}

/* ---------- Lightbox (native <dialog>, top layer) ---------- */
html.lightbox-open {
    overflow: hidden;
}

.lightbox {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 60px 84px;
    border: 0;
    background: transparent;
    color: #ffffff;
    overflow: hidden;
    touch-action: pan-y;
}

.lightbox[open] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox::backdrop {
    background: rgba(4, 2, 6, 0.95);
}

.lightbox-figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 100%;
    max-height: 100%;
    margin: 0;
}

.lightbox-img {
    display: block;
    width: auto;
    height: auto;
    max-width: min(1200px, 100%);
    max-height: calc(100vh - 170px);
    max-height: calc(100dvh - 170px);
    border-radius: 10px;
    border: 2px solid rgba(255, 45, 149, 0.75);
    box-shadow: 0 0 24px rgba(255, 45, 149, 0.55), 0 0 64px rgba(161, 59, 255, 0.35);
    animation: lb-in 0.35s ease;
}

.lightbox-caption {
    margin-top: 14px;
    font-family: var(--front-hand);
    font-size: 1.6rem;
    line-height: 1.1;
    text-align: center;
    color: #fff4e3;
    text-shadow: 0 0 10px rgba(255, 45, 149, 0.85);
}

.lightbox-count {
    margin-left: 8px;
    font-family: var(--cn-font-display);
    font-size: 0.95rem;
    color: var(--cn-gold-light);
    text-shadow: none;
}

.lightbox-btn {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    padding: 0;
    border-radius: 50%;
    border: 2px solid rgba(242, 193, 78, 0.85);
    background: rgba(13, 8, 7, 0.65);
    color: var(--cn-gold-light);
    cursor: pointer;
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.lightbox-btn:hover,
.lightbox-btn:focus-visible {
    background: var(--cn-red);
    color: #ffffff;
    box-shadow: 0 0 14px rgba(255, 35, 64, 0.8), 0 0 30px rgba(255, 45, 149, 0.45);
    transform: scale(1.06);
    outline: none;
}

.lightbox-btn:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

.lightbox-close {
    top: 16px;
    right: 16px;
    font-size: 2rem;
    line-height: 1;
}

.lightbox-prev,
.lightbox-next {
    top: 50%;
    margin-top: -26px;
}

.lightbox-prev { left: 18px; }
.lightbox-next { right: 18px; }

@keyframes lb-in {
    from { opacity: 0; transform: scale(0.94); }
    to { opacity: 1; transform: none; }
}

/* ---------- Phones ---------- */
@media (max-width: 768px) {
    .fl-beam:nth-child(2),
    .fl-beam:nth-child(4),
    .fl-laser:nth-child(8),
    .fl-laser:nth-child(9) {
        display: none;
    }

    .fl-beam {
        opacity: 0.26;
    }

    .front-eq {
        height: 40px;
        opacity: 0.36;
    }

    .gallery {
        padding: 60px 0 48px;
    }

    .gallery h2 {
        font-size: 1.9rem;
    }

    .gallery-sub {
        font-size: 1.3rem;
        margin-bottom: 1.6rem;
    }

    .gallery-grid {
        column-count: 2;
        column-gap: 10px;
    }

    .gallery-item {
        margin-bottom: 10px;
        border-radius: 10px;
    }

    .gallery-item figcaption {
        padding: 22px 9px 7px;
        font-size: 1.05rem;
    }

    .lightbox {
        padding: 64px 10px 96px;
    }

    .lightbox-img {
        max-height: calc(100vh - 210px);
        max-height: calc(100dvh - 210px);
    }

    .lightbox-caption {
        font-size: 1.35rem;
    }

    .lightbox-prev,
    .lightbox-next {
        top: auto;
        bottom: 22px;
        margin-top: 0;
    }

    .lightbox-prev { left: calc(50% - 70px); }
    .lightbox-next { right: calc(50% - 70px); }

    .lightbox-close {
        top: 12px;
        right: 12px;
    }
}

/* ---------- Reduced motion: everything holds still ---------- */
@media (prefers-reduced-motion: reduce) {
    .fl-beam,
    .fl-laser,
    .fl-floor,
    .front-eq i,
    .gallery-lasers span,
    .front-ribbon::before,
    .front-ribbon::after,
    #reservationForm button[type="submit"],
    .reservations h2,
    .gallery h2,
    .reviews h2,
    .contact h2,
    .cancellation h2,
    .login-page-title,
    .profile-section h2,
    .lightbox-img {
        animation: none;
    }

    .fl-laser {
        opacity: 0.3;
    }

    .front-ribbon::after {
        display: none;
    }

    .gallery-item,
    .gallery-open img {
        transition: none;
    }
}

/* portrait photos get a 3:4 frame in the grid so the columns balance (the lightbox shows the whole photo) */
.gallery-item.is-tall .gallery-open img {
    aspect-ratio: 3 / 4;
    object-fit: cover;
    object-position: 50% 45%;
}

/* ==========================================================================
   Gallery page (/galeria) + "Galería" links
   Desktop: camera icon in the badge header (wide screens) and in the Redes flyout;
   phones: its own item in the menu; every page: footer link.
   ========================================================================== */
.gallery.gallery-page {
    min-height: 100vh;
    padding: 120px 0 120px;
    border-top: 0;
}

.gallery-page .front-lights {
    z-index: 0;
}

.gallery-page .fl-beam {
    height: 70%;
    opacity: 0.24;
}

.gallery-page .fl-laser {
    height: 80%;
}

.gallery-page .fl-floor {
    bottom: -12%;
    height: 34%;
}

.gallery-cta {
    max-width: 640px;
    margin: 2.4rem auto 0;
    padding: 26px 22px 30px;
    text-align: center;
    border: 1px solid rgba(255, 45, 149, 0.55);
    border-top: 3px solid var(--nc-pink);
    border-radius: 10px;
    background: var(--club-glass);
    box-shadow: 0 0 0 1px rgba(161, 59, 255, 0.22), 0 0 26px rgba(255, 45, 149, 0.25), 0 14px 32px rgba(0, 0, 0, 0.55);
}

.gallery-cta-title {
    margin: 0 0 6px;
    font-family: var(--front-hand);
    font-size: 2rem;
    line-height: 1.1;
    color: #fff4e3;
    text-shadow: 0 0 12px rgba(255, 45, 149, 0.75);
}

.gallery-cta-sub {
    margin: 0 0 18px;
    color: var(--club-muted);
    line-height: 1.5;
}

.gallery-cta-sub strong {
    color: #7dffb6;
    text-shadow: 0 0 8px rgba(18, 165, 117, 0.6);
}

/* Galería bookmark (4th of 5: Reservaciones, Ubicación, Redes, Galería, Iniciar sesión):
   black lacquer with gold letters and a red tassel, on desktop and in the phone menu */
.nav-menu li.nav-tab-gallery {
    --bm-bg: linear-gradient(180deg, #2a1414 0%, #0b0707 100%);
    --bm-ink: var(--cn-gold-light);
    --bm-char: var(--cn-gold-light);
    --bm-tassel: var(--bm-tassel-red);
}

.nav-menu li.nav-tab-gallery::before {
    content: '画' / '';
}

/* footer link on every page */
.footer .footer-gallery {
    margin: 0.4rem 0 0.9rem;
}

.footer .footer-gallery-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    border: 1px solid rgba(255, 45, 149, 0.7);
    border-radius: 999px;
    background: rgba(255, 45, 149, 0.1);
    color: #ffd6ec;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-decoration: none;
    box-shadow: 0 0 10px rgba(255, 45, 149, 0.35), inset 0 0 8px rgba(255, 45, 149, 0.15);
    transition: background 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

.footer .footer-gallery-link:hover,
.footer .footer-gallery-link:focus-visible {
    background: rgba(255, 45, 149, 0.25);
    color: #ffffff;
    box-shadow: 0 0 14px rgba(255, 45, 149, 0.8), 0 0 30px rgba(161, 59, 255, 0.4);
    outline: none;
}

.footer .footer-gallery-link:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

@media (max-width: 768px) {
    .gallery.gallery-page {
        padding: 104px 0 96px;
    }

    .gallery-cta-title {
        font-size: 1.7rem;
    }
}

/* ==========================================================================
   Five desktop bookmarks: the size follows the screen height so all five tabs
   (and their tassels) fit below the header without overlapping, e.g. 1280x720,
   1366x768. Full size (148px) from about 955px of height; everything inside the
   tab (character, text, notch, frame, tassel) scales with --bm-h.
   ========================================================================== */
@media (min-width: 769px) {
    .navbar .nav-menu {
        --bm-h: clamp(80px, calc((100vh - 84px) / 5.87), 148px);
        top: 80px;
        gap: calc(var(--bm-h) * 0.18);
    }

    .nav-menu > li > a,
    .nav-menu > li > a:hover,
    .nav-menu > li > a.active {
        height: var(--bm-h);
        padding: calc(var(--bm-h) * 0.25) 0 calc(var(--bm-h) * 0.14) 10px;
        font-size: clamp(9.5px, calc(var(--bm-h) * 0.078), 11.5px);
        letter-spacing: 0.04em;
        clip-path: polygon(0 0, 100% 0, 100% 100%, calc(50% + 5px) calc(100% - var(--bm-h) * 0.075), 0 100%);
    }

    .nav-menu > li > a::before {
        clip-path: polygon(0 0, 100% 0, 100% 100%, calc(50% + 5px) calc(100% - var(--bm-h) * 0.075), 0 100%);
    }

    .nav-menu > li > a::after,
    .nav-menu > li > a:hover::after,
    .nav-menu > li > a.active::after {
        bottom: calc(var(--bm-h) * 0.128);
    }

    .nav-menu li::before {
        display: block;
        top: calc(var(--bm-h) * 0.085);
        font-size: clamp(12px, calc(var(--bm-h) * 0.115), 17px);
    }

    .nav-menu li::after {
        top: calc(var(--bm-h) * 0.91);
        left: calc(32px - var(--bm-h) * 0.054);
        width: calc(var(--bm-h) * 0.108);
        height: calc(var(--bm-h) * 0.237);
    }
}

/* very short screens (under 700px high): no character, the text gets the whole tab */
@media (min-width: 769px) and (max-height: 699px) {
    .nav-menu li::before {
        display: none;
    }

    .nav-menu > li > a,
    .nav-menu > li > a:hover,
    .nav-menu > li > a.active {
        padding-top: calc(var(--bm-h) * 0.1);
    }
}

/* ==========================================================================
   QR check-in: code on the profile cards and in the booking confirmation dialog
   (QR always dark on white with a quiet zone so any phone camera reads it)
   ========================================================================== */
.checkin-qr {
    width: 168px;
    max-width: 100%;
    margin: 0.4rem auto 0.2rem;
    padding: 6px;
    background: #ffffff;
    border: 2px solid var(--cn-gold, #d4a017);
    border-radius: 8px;
    box-shadow: 0 0 14px rgba(242, 193, 78, 0.35);
    line-height: 0;
}

.checkin-qr svg {
    display: block;
    width: 100%;
    height: auto;
}

.checkin-qr-large {
    width: 236px;
}

.checkin-qr-loading,
.checkin-noqr {
    margin: 0;
    padding: 14px 6px;
    line-height: 1.4;
    font-size: 0.9rem;
    color: #3a2a10;
    text-align: center;
}

.checkin-qr-none {
    width: auto;
    max-width: 300px;
    border-style: dashed;
    box-shadow: none;
}

.checkin-code {
    margin: 0.25rem 0 0;
    font-family: 'Courier New', monospace;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--cn-gold-light, #f2c14e);
}

.profile-card-when {
    font-size: 0.95rem;
    color: var(--cn-gold-light, #f2c14e);
}

.profile-card-checkin {
    margin-top: 0.8rem;
    padding-top: 0.8rem;
    border-top: 1px dashed rgba(242, 193, 78, 0.45);
}

.profile-card-checkin-title {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--cn-gold-light, #f2c14e);
}

.profile-card-checkin-hint {
    margin: 0.2rem 0 0;
    font-size: 0.85rem;
    opacity: 0.85;
}

.profile-card-checkin.is-checked-in .checkin-qr {
    opacity: 0.35;
}

.profile-card-checkin.is-checked-in .profile-card-checkin-hint {
    color: #2fd07a;
    font-weight: 700;
    opacity: 1;
}

/* booking confirmation dialog */
.checkin-dialog {
    position: fixed;
    inset: 0;
    margin: auto;
    height: fit-content;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    width: min(92vw, 380px);
    padding: 1.6rem 1.4rem 1.4rem;
    text-align: center;
    color: #fbeccb;
    background: linear-gradient(180deg, #2a1414 0%, #0d0a0a 100%);
    border: 2px solid var(--cn-gold, #d4a017);
    border-radius: 12px;
    box-shadow: 0 0 0 4px rgba(176, 18, 27, 0.6), 0 0 32px rgba(255, 45, 149, 0.4);
}

.checkin-dialog::backdrop {
    background: rgba(5, 3, 6, 0.78);
}

.checkin-dialog-title {
    margin: 0 0 0.3rem;
    font-family: var(--cn-font-display);
    font-size: 1.5rem;
    color: #fff4fa;
    text-shadow: 0 0 10px rgba(255, 45, 149, 0.7);
}

.checkin-dialog-sub,
.checkin-dialog-details,
.checkin-dialog-hint {
    margin: 0.3rem 0;
    font-size: 0.95rem;
    line-height: 1.45;
}

.checkin-dialog-details {
    color: var(--cn-gold-light, #f2c14e);
}

.checkin-dialog-hint a {
    color: var(--cn-gold-light, #f2c14e);
}

.checkin-dialog-close {
    margin-top: 0.8rem;
    min-width: 140px;
}

/* Profile: "Registros" (verified or no-show tables) */
.profile-past {
    margin-top: 2.2rem;
    padding-top: 1.4rem;
    border-top: 1px solid rgba(242, 193, 78, 0.35);
}

.profile-past-title {
    margin: 0 0 1rem;
    text-align: center;
    font-size: 1.35rem;
    letter-spacing: 0.06em;
    color: var(--cn-gold-light, #f2c14e);
}

.profile-card-past {
    opacity: 0.92;
}

.profile-card-past .profile-card-order {
    font-size: 1.25rem;
}

.profile-card-badge {
    display: inline-block;
    align-self: center;
    margin-top: 0.6rem;
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.profile-card-badge.is-verified {
    color: #0d0a0a;
    background: #2fd07a;
}

.profile-card-badge.is-unverified {
    color: #e9e2d6;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* "¡Mesa verificada!" celebration (confetti.js) */
.bar-confetti-canvas {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 10001;
}

.bar-celebrate {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0, 0, 0, 0.55);
    animation: bar-celebrate-fade 0.25s ease-out;
}

.bar-celebrate-card {
    width: min(92vw, 380px);
    padding: 1.6rem 1.4rem 1.3rem;
    text-align: center;
    color: #fbeccb;
    background: linear-gradient(180deg, #2a1414 0%, #0d0a0a 100%);
    border: 2px solid var(--cn-gold, #d4a017);
    border-radius: 12px;
    box-shadow: 0 0 0 4px rgba(47, 208, 122, 0.55), 0 0 32px rgba(255, 45, 149, 0.4);
    animation: bar-celebrate-pop 0.35s cubic-bezier(0.2, 1.4, 0.5, 1);
}

.bar-celebrate-icon {
    font-size: 2.6rem;
    line-height: 1;
}

.bar-celebrate-title {
    margin: 0.5rem 0 0.2rem;
    font-size: 1.6rem;
    font-weight: 800;
    color: #2fd07a;
}

.bar-celebrate-message {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--cn-gold-light, #f2c14e);
}

.bar-celebrate-detail {
    margin: 0.6rem 0 0;
    font-size: 0.95rem;
    opacity: 0.9;
}

.bar-celebrate-close {
    margin-top: 1.1rem;
}

@keyframes bar-celebrate-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes bar-celebrate-pop {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .bar-celebrate,
    .bar-celebrate-card {
        animation: none;
    }
}


/* ==========================================================================
   Puerta de La Chinesca: design based on the Chinatown gate in Mexicali
   (glazed-tile roof, red lacquer pillars, gold plaque «唐人街 CHINESCA»,
   gold lattice doors with the round medallion, vertical couplets).
   Everything is CSS + inline SVG (generated artwork, no extra requests);
   all ornaments are aria-hidden.
   ========================================================================== */
:root {
    --gate-medallion: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-100 -100 200 200'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fff1b8'/%3E%3Cstop offset='.35' stop-color='%23f2c14e'/%3E%3Cstop offset='.65' stop-color='%23c8921c'/%3E%3Cstop offset='1' stop-color='%23fbe08a'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='none' stroke='url(%23g)' stroke-linecap='square'%3E%3Ccircle r='95' stroke-width='4'/%3E%3Ccircle r='87' stroke-width='1.6'/%3E%3Ccircle r='72' stroke-width='3'/%3E%3Ccircle r='62' stroke-width='1.4'/%3E%3Ccircle r='34' stroke-width='3'/%3E%3Ccircle r='22' stroke-width='1.6'/%3E%3Cpath d='M72 0L87 0M66.5 27.6L80.4 33.3M50.9 50.9L61.5 61.5M27.6 66.5L33.3 80.4M0 72L0 87M-27.6 66.5L-33.3 80.4M-50.9 50.9L-61.5 61.5M-66.5 27.6L-80.4 33.3M-72 0L-87 0M-66.5 -27.6L-80.4 -33.3M-50.9 -50.9L-61.5 -61.5M-27.6 -66.5L-33.3 -80.4M-0 -72L-0 -87M27.6 -66.5L33.3 -80.4M50.9 -50.9L61.5 -61.5M66.5 -27.6L80.4 -33.3M31.4 13L57.3 23.7M13 31.4L23.7 57.3M-13 31.4L-23.7 57.3M-31.4 13L-57.3 23.7M-31.4 -13L-57.3 -23.7M-13 -31.4L-23.7 -57.3M13 -31.4L23.7 -57.3M31.4 -13L57.3 -23.7' stroke-width='2.2'/%3E%3Ccircle r='48' stroke-width='1.4'/%3E%3Cpath d='M40 0L56 0M28.3 28.3L39.6 39.6M0 40L0 56M-28.3 28.3L-39.6 39.6M-40 0L-56 0M-28.3 -28.3L-39.6 -39.6M-0 -40L-0 -56M28.3 -28.3L39.6 -39.6' stroke-width='1.4'/%3E%3Cpath d='M-22 0H22M0-22V22M-10-10H10V10H-10Z' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E");
    --gate-lattice: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fff1b8'/%3E%3Cstop offset='.35' stop-color='%23f2c14e'/%3E%3Cstop offset='.65' stop-color='%23c8921c'/%3E%3Cstop offset='1' stop-color='%23fbe08a'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='none' stroke='url(%23g)' stroke-width='2'%3E%3Cpath d='M2 2H30V30H10V10H22V22H16' transform='rotate(0 32 32)'/%3E%3Cpath d='M2 2H30V30H10V10H22V22H16' transform='rotate(90 32 32)'/%3E%3Cpath d='M2 2H30V30H10V10H22V22H16' transform='rotate(180 32 32)'/%3E%3Cpath d='M2 2H30V30H10V10H22V22H16' transform='rotate(270 32 32)'/%3E%3Cpath d='M0 0H64M0 0V64' stroke-width='1.2'/%3E%3C/g%3E%3C/svg%3E");
    --gate-band: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='18' viewBox='0 0 40 18'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fff1b8'/%3E%3Cstop offset='.35' stop-color='%23f2c14e'/%3E%3Cstop offset='.65' stop-color='%23c8921c'/%3E%3Cstop offset='1' stop-color='%23fbe08a'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='none' stroke='url(%23g)' stroke-width='1.6'%3E%3Cpath d='M0 1h40M0 17h40' stroke-width='1.2'/%3E%3Cpath d='M0 13h8V5h16v8h-8V9'/%3E%3Cpath d='M20 13h8V5h12'/%3E%3C/g%3E%3C/svg%3E");
    --gate-roof: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 168'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff1b8'/%3E%3Cstop offset='.45' stop-color='%23e8b53c'/%3E%3Cstop offset='1' stop-color='%238a5d0e'/%3E%3C/linearGradient%3E%3ClinearGradient id='gh' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%238a5d0e'/%3E%3Cstop offset='.5' stop-color='%23fff1b8'/%3E%3Cstop offset='1' stop-color='%238a5d0e'/%3E%3C/linearGradient%3E%3ClinearGradient id='t' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%234f8a60'/%3E%3Cstop offset='1' stop-color='%23123824'/%3E%3C/linearGradient%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.28'/%3E%3Cstop offset='.4' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23000' stop-opacity='.35'/%3E%3C/linearGradient%3E%3Cpattern id='p' width='16' height='168' y='0' patternUnits='userSpaceOnUse'%3E%3Crect width='16' height='168' fill='%230d2a1b'/%3E%3Crect x='3.0' width='10' height='168' fill='url(%23t)'/%3E%3Crect x='5.0' width='2.2' height='168' fill='%23b6e3c2' opacity='.45'/%3E%3Crect x='12.0' width='1' height='168' fill='%2304130b' opacity='.8'/%3E%3C/pattern%3E%3Cpattern id='q' width='13' height='168' y='0' patternUnits='userSpaceOnUse'%3E%3Crect width='13' height='168' fill='%230d2a1b'/%3E%3Crect x='2.5' width='8' height='168' fill='url(%23t)'/%3E%3Crect x='4.5' width='1.8' height='168' fill='%23b6e3c2' opacity='.45'/%3E%3Crect x='9.5' width='1' height='168' fill='%2304130b' opacity='.8'/%3E%3C/pattern%3E%3ClinearGradient id='rw' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23c81d25'/%3E%3Cstop offset='1' stop-color='%236d070d'/%3E%3C/linearGradient%3E%3CclipPath id='kl'%3E%3Cpath d='M170 96H830Q930 108 993 60L1000 62Q966 150 850 160H150Q34 150 0 62L7 60Q70 108 170 96Z'/%3E%3C/clipPath%3E%3CclipPath id='ku'%3E%3Cpath d='M392 24H608Q702 32 743 5L750 7Q718 62 640 70H360Q282 62 250 7L257 5Q298 32 392 24Z'/%3E%3C/clipPath%3E%3Cpattern id='c' width='36' height='20' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='9.0' cy='152' r='3.8' fill='%23123824' stroke='%23f2c14e' stroke-width='1'/%3E%3Ccircle cx='9.0' cy='152' r='1.3' fill='%23f2c14e'/%3E%3Cpath d='M20 148.2 H34 L27.0 156.8Z' fill='%23123824' stroke='%23c8921c' stroke-width='.8' stroke-linejoin='round'/%3E%3C/pattern%3E%3Cpattern id='cu' width='30' height='20' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='7.5' cy='63' r='3' fill='%23123824' stroke='%23f2c14e' stroke-width='1'/%3E%3Ccircle cx='7.5' cy='63' r='1.0' fill='%23f2c14e'/%3E%3Cpath d='M17 60 H28 L22.5 67Z' fill='%23123824' stroke='%23c8921c' stroke-width='.8' stroke-linejoin='round'/%3E%3C/pattern%3E%3C/defs%3E%3Crect x='300' y='64' width='400' height='36' fill='url(%23rw)'/%3E%3Crect x='300' y='64' width='400' height='3' fill='url(%23g)'/%3E%3Crect x='300' y='94' width='400' height='2.5' fill='url(%23g)'/%3E%3Cpath d='M321 78h18v-4h-5v-4h-8v4h-5z' fill='url(%23g)'/%3E%3Crect x='327' y='78' width='6' height='10' fill='url(%23g)'/%3E%3Cpath d='M355 78h18v-4h-5v-4h-8v4h-5z' fill='url(%23g)'/%3E%3Crect x='361' y='78' width='6' height='10' fill='url(%23g)'/%3E%3Cpath d='M389 78h18v-4h-5v-4h-8v4h-5z' fill='url(%23g)'/%3E%3Crect x='395' y='78' width='6' height='10' fill='url(%23g)'/%3E%3Cpath d='M423 78h18v-4h-5v-4h-8v4h-5z' fill='url(%23g)'/%3E%3Crect x='429' y='78' width='6' height='10' fill='url(%23g)'/%3E%3Cpath d='M457 78h18v-4h-5v-4h-8v4h-5z' fill='url(%23g)'/%3E%3Crect x='463' y='78' width='6' height='10' fill='url(%23g)'/%3E%3Cpath d='M491 78h18v-4h-5v-4h-8v4h-5z' fill='url(%23g)'/%3E%3Crect x='497' y='78' width='6' height='10' fill='url(%23g)'/%3E%3Cpath d='M525 78h18v-4h-5v-4h-8v4h-5z' fill='url(%23g)'/%3E%3Crect x='531' y='78' width='6' height='10' fill='url(%23g)'/%3E%3Cpath d='M559 78h18v-4h-5v-4h-8v4h-5z' fill='url(%23g)'/%3E%3Crect x='565' y='78' width='6' height='10' fill='url(%23g)'/%3E%3Cpath d='M593 78h18v-4h-5v-4h-8v4h-5z' fill='url(%23g)'/%3E%3Crect x='599' y='78' width='6' height='10' fill='url(%23g)'/%3E%3Cpath d='M627 78h18v-4h-5v-4h-8v4h-5z' fill='url(%23g)'/%3E%3Crect x='633' y='78' width='6' height='10' fill='url(%23g)'/%3E%3Cpath d='M661 78h18v-4h-5v-4h-8v4h-5z' fill='url(%23g)'/%3E%3Crect x='667' y='78' width='6' height='10' fill='url(%23g)'/%3E%3Crect x='318' y='70' width='10' height='26' fill='%23b3121c'/%3E%3Crect x='672' y='70' width='10' height='26' fill='%23b3121c'/%3E%3Crect x='486' y='80' width='28' height='14' fill='%238a0b12' stroke='url(%23g)' stroke-width='1.4'/%3E%3Cg clip-path='url(%23kl)'%3E%3Crect width='1000' height='168' fill='url(%23p)'/%3E%3Cpath d='M0 112H1000' stroke='%2304130b' stroke-width='1' opacity='.45'/%3E%3Cpath d='M0 126H1000' stroke='%2304130b' stroke-width='1' opacity='.45'/%3E%3Cpath d='M0 140H1000' stroke='%2304130b' stroke-width='1' opacity='.45'/%3E%3Crect width='1000' height='168' fill='url(%23s)'/%3E%3Crect y='146' width='1000' height='12' fill='%230d2a1b'/%3E%3Crect y='146' width='1000' height='12' fill='url(%23c)'/%3E%3C/g%3E%3Cpath d='M170 96H830' stroke='%2306140c' stroke-width='6'/%3E%3Cpath d='M168 93.4H832' stroke='url(%23g)' stroke-width='2.4'/%3E%3Cpath d='M0 62Q34 150 150 160H850Q966 150 1000 62' fill='none' stroke='%232a1d06' stroke-width='7' opacity='.55'/%3E%3Cpath d='M0 62Q34 150 150 160H850Q966 150 1000 62' fill='none' stroke='url(%23g)' stroke-width='4.5'/%3E%3Cpath d='M1.2 61Q35 148 150 158.2H850Q965 148 998.8 61' fill='none' stroke='%23fff1b8' stroke-width='.9' opacity='.8'/%3E%3Cpath d='M7 60Q70 108 170 96M993 60Q930 108 830 96' fill='none' stroke='url(%23g)' stroke-width='2.2'/%3E%3Cg transform='translate(3 61) scale(2.4 2.4)'%3E%3Cpath d='M0 0C-4 -2 -7 -6 -5 -10C-3.6 -12.6 0 -12 0 -9.6C0 -8 -2 -7.6 -2.8 -8.6' fill='none' stroke='url(%23g)' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='-5.4' cy='-4.6' r='1.4' fill='%23f2c14e'/%3E%3C/g%3E%3Cg transform='translate(997 61) scale(-2.4 2.4)'%3E%3Cpath d='M0 0C-4 -2 -7 -6 -5 -10C-3.6 -12.6 0 -12 0 -9.6C0 -8 -2 -7.6 -2.8 -8.6' fill='none' stroke='url(%23g)' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='-5.4' cy='-4.6' r='1.4' fill='%23f2c14e'/%3E%3C/g%3E%3Cg transform='translate(12 70) scale(2.2)'%3E%3Cpath d='M0 0v3' stroke='%23c8921c' stroke-width='.8'/%3E%3Cpath d='M-2.6 7.4C-2.6 4 -1.6 3 0 3S2.6 4 2.6 7.4Z' fill='url(%23g)'/%3E%3C/g%3E%3Cg transform='translate(988 70) scale(2.2)'%3E%3Cpath d='M0 0v3' stroke='%23c8921c' stroke-width='.8'/%3E%3Cpath d='M-2.6 7.4C-2.6 4 -1.6 3 0 3S2.6 4 2.6 7.4Z' fill='url(%23g)'/%3E%3C/g%3E%3Cg transform='translate(176 93) scale(1 1)'%3E%3Cpath d='M0 0C-2 -8 4 -14 12 -12C8 -10 6 -6 8 -2Z' fill='url(%23g)' stroke='%238a5d0e' stroke-width='.8'/%3E%3Ccircle cx='9' cy='-11' r='1.6' fill='%23fff1b8'/%3E%3C/g%3E%3Cg transform='translate(824 93) scale(-1 1)'%3E%3Cpath d='M0 0C-2 -8 4 -14 12 -12C8 -10 6 -6 8 -2Z' fill='url(%23g)' stroke='%238a5d0e' stroke-width='.8'/%3E%3Ccircle cx='9' cy='-11' r='1.6' fill='%23fff1b8'/%3E%3C/g%3E%3Cg clip-path='url(%23ku)'%3E%3Crect width='1000' height='168' fill='url(%23q)'/%3E%3Cpath d='M0 38H1000' stroke='%2304130b' stroke-width='1' opacity='.45'/%3E%3Cpath d='M0 50H1000' stroke='%2304130b' stroke-width='1' opacity='.45'/%3E%3Crect width='1000' height='168' fill='url(%23s)'/%3E%3Crect y='58' width='1000' height='9' fill='%230d2a1b'/%3E%3Crect y='58' width='1000' height='9' fill='url(%23cu)'/%3E%3C/g%3E%3Cpath d='M392 24H608' stroke='%2306140c' stroke-width='5'/%3E%3Cpath d='M390 21.6H610' stroke='url(%23g)' stroke-width='2.2'/%3E%3Cpath d='M250 7Q282 62 360 70H640Q718 62 750 7' fill='none' stroke='url(%23g)' stroke-width='3.6'/%3E%3Cpath d='M257 5Q298 32 392 24M743 5Q702 32 608 24' fill='none' stroke='url(%23g)' stroke-width='2'/%3E%3Cg transform='translate(251 6) scale(1.8 1.8)'%3E%3Cpath d='M0 0C-4 -2 -7 -6 -5 -10C-3.6 -12.6 0 -12 0 -9.6C0 -8 -2 -7.6 -2.8 -8.6' fill='none' stroke='url(%23g)' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='-5.4' cy='-4.6' r='1.4' fill='%23f2c14e'/%3E%3C/g%3E%3Cg transform='translate(749 6) scale(-1.8 1.8)'%3E%3Cpath d='M0 0C-4 -2 -7 -6 -5 -10C-3.6 -12.6 0 -12 0 -9.6C0 -8 -2 -7.6 -2.8 -8.6' fill='none' stroke='url(%23g)' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='-5.4' cy='-4.6' r='1.4' fill='%23f2c14e'/%3E%3C/g%3E%3Cg transform='translate(258 14) scale(1.7)'%3E%3Cpath d='M0 0v3' stroke='%23c8921c' stroke-width='.8'/%3E%3Cpath d='M-2.6 7.4C-2.6 4 -1.6 3 0 3S2.6 4 2.6 7.4Z' fill='url(%23g)'/%3E%3C/g%3E%3Cg transform='translate(742 14) scale(1.7)'%3E%3Cpath d='M0 0v3' stroke='%23c8921c' stroke-width='.8'/%3E%3Cpath d='M-2.6 7.4C-2.6 4 -1.6 3 0 3S2.6 4 2.6 7.4Z' fill='url(%23g)'/%3E%3C/g%3E%3Cg transform='translate(394 22) scale(1 1)'%3E%3Cpath d='M0 0C-6 -6 -4 -16 4 -20C12 -23 18 -18 16 -12C14 -16 8 -16 6 -12C4 -8 8 -4 10 0Z' fill='url(%23g)' stroke='%238a5d0e' stroke-width='.8'/%3E%3Ccircle cx='5' cy='-15' r='1.4' fill='%233a0205'/%3E%3C/g%3E%3Cg transform='translate(606 22) scale(-1 1)'%3E%3Cpath d='M0 0C-6 -6 -4 -16 4 -20C12 -23 18 -18 16 -12C14 -16 8 -16 6 -12C4 -8 8 -4 10 0Z' fill='url(%23g)' stroke='%238a5d0e' stroke-width='.8'/%3E%3Ccircle cx='5' cy='-15' r='1.4' fill='%233a0205'/%3E%3C/g%3E%3Cpath d='M500 21.5V4' stroke='url(%23gh)' stroke-width='2'/%3E%3Cellipse cx='500' cy='17' rx='9' ry='5' fill='url(%23g)'/%3E%3Ccircle cx='500' cy='10' r='5.4' fill='url(%23g)'/%3E%3Ccircle cx='500' cy='3.6' r='3.2' fill='url(%23g)'/%3E%3Cpath d='M478 20C486 18 490 14 492 10M522 20C514 18 510 14 508 10' fill='none' stroke='url(%23g)' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
    --gate-eave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='28' viewBox='0 0 40 28'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fff1b8'/%3E%3Cstop offset='.5' stop-color='%23e2b33c'/%3E%3Cstop offset='1' stop-color='%239a6b12'/%3E%3C/linearGradient%3E%3ClinearGradient id='t' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23344a40'/%3E%3Cstop offset='1' stop-color='%230c1411'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='40' height='12' fill='url(%23t)'/%3E%3Cpath d='M10 0v12M30 0v12' stroke='%235d8173' stroke-width='3' opacity='.7'/%3E%3Cpath d='M21 11.5H39L30 25Z' fill='%2316221d' stroke='url(%23g)' stroke-width='1.2' stroke-linejoin='round'/%3E%3Ccircle cx='10' cy='16' r='7.5' fill='%2316221d' stroke='url(%23g)' stroke-width='1.6'/%3E%3Ccircle cx='10' cy='16' r='3.6' fill='none' stroke='url(%23g)' stroke-width='1'/%3E%3Ccircle cx='10' cy='16' r='1.2' fill='%23f2c14e'/%3E%3Cpath d='M0 .8H40' stroke='url(%23g)' stroke-width='1.6'/%3E%3C/svg%3E");
}

:root {
    --gate-gold-text: linear-gradient(180deg, #fff4c4 0%, #f2c14e 42%, #b8860b 68%, #ffe08a 100%);
    --gate-gold-metal: linear-gradient(90deg, #6d4a0c 0%, #c8921c 22%, #fff1b8 48%, #e2b33c 62%, #7a5410 100%);
    --gate-lacquer: linear-gradient(90deg, #4e0409 0%, #9c0f18 22%, #d42a33 42%, #e8474e 50%, #b3141d 64%, #6a060c 100%);
}

/* ---------- The gate frame (reservations heading, gallery title) ---------- */
.gate {
    position: relative;
    display: grid;
    grid-template-columns: 48px 24px minmax(0, 1fr) 24px 48px;
    grid-template-areas:
        "roof roof   roof   roof   roof"
        ".    lintel lintel lintel ."
        "cl   pl     open   pr     cr"
        ".    base   base   base   .";
    max-width: min(920px, calc(100vw - 120px));
    margin: 0 auto 2.75rem;
}

.gate-roof {
    grid-area: roof;
    position: relative;
    z-index: 2;
    height: 68px;
    margin: 0 -14px -6px;
    background: var(--gate-roof) center / 100% 100% no-repeat;
}

.gate-lintel {
    grid-area: lintel;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 13px 16px;
    background:
        var(--gate-band) 0 4px / 30px 13.5px repeat-x,
        var(--gate-band) 0 calc(100% - 4px) / 30px 13.5px repeat-x,
        linear-gradient(180deg, #d0232b 0%, #a50f18 48%, #6d070d 100%);
    border-top: 2px solid #e2b33c;
    border-bottom: 2px solid #b8860b;
    box-shadow: inset 0 1px 0 rgba(255, 241, 184, 0.45), 0 6px 14px rgba(0, 0, 0, 0.5);
}

.gate-plaque {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 8px 28px 7px;
    background: radial-gradient(ellipse at 50% 30%, #d8262f 0%, #9a0d16 70%, #6e070d 100%);
    border: 2px solid #e2b33c;
    box-shadow:
        0 0 0 4px #7f0a11,
        0 0 0 5px #e2b33c,
        0 8px 18px rgba(0, 0, 0, 0.55),
        inset 0 0 0 3px #7f0a11,
        inset 0 0 0 4px rgba(242, 193, 78, 0.55);
}

.gate-plaque-zh,
.gate-plaque-latin,
.gate-couplet span {
    background: var(--gate-gold-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.gate-plaque-zh {
    font-family: var(--cn-font-display);
    font-weight: 900;
    font-size: 1.55rem;
    line-height: 1.1;
    letter-spacing: 0.5em;
    margin-right: -0.5em;
}

.gate-plaque-latin {
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1.1;
    letter-spacing: 0.42em;
    margin-right: -0.42em;
}

/* slow gold sheen across the plaque */
.gate-plaque::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 35%, rgba(255, 245, 200, 0.38) 50%, transparent 65%);
    transform: translateX(-120%);
    animation: gate-sheen 7s ease-in-out infinite;
    pointer-events: none;
}

@keyframes gate-sheen {
    0%, 72% { transform: translateX(-120%); }
    100% { transform: translateX(120%); }
}

.gate-pillar {
    position: relative;
    background: var(--gate-lacquer);
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.45);
}

.gate-pillar-left { grid-area: pl; }
.gate-pillar-right { grid-area: pr; }

.gate-pillar::before,
.gate-pillar::after {
    content: '';
    position: absolute;
    left: -3px;
    right: -3px;
    background: var(--gate-gold-metal);
    border-radius: 2px;
}

.gate-pillar::before { top: 0; height: 9px; }
.gate-pillar::after { bottom: 0; height: 14px; }

.gate-couplet {
    align-self: center;
    display: flex;
    justify-content: center;
    padding: 12px 0;
    background: linear-gradient(180deg, #b3141d 0%, #8a0b12 100%);
    border: 1px solid #d4a017;
    box-shadow: inset 0 0 0 3px #8a0b12, inset 0 0 0 4px rgba(242, 193, 78, 0.5), 0 4px 12px rgba(0, 0, 0, 0.5);
}

.gate-couplet-left { grid-area: cl; margin-right: 8px; }
.gate-couplet-right { grid-area: cr; margin-left: 8px; }

.gate-couplet span {
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-family: var(--cn-font-display);
    font-weight: 700;
    font-size: 0.92rem;
    line-height: 1;
    letter-spacing: 0.3em;
    background-image: linear-gradient(90deg, #b8860b 0%, #fff1b8 45%, #f2c14e 60%, #b8860b 100%);
}

.gate-opening {
    grid-area: open;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-width: 0;
    padding: 2.4rem clamp(1rem, 4vw, 3rem) 1.9rem;
    text-align: center;
    background: radial-gradient(ellipse at 50% 40%, rgba(96, 8, 22, 0.55) 0%, rgba(10, 3, 6, 0.88) 72%);
    box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.7);
}

/* the double lattice doors: gold fretwork fading out behind the text, centre seam */
.gate-doors {
    position: absolute;
    inset: 8px 8px 0;
    z-index: -1;
    border: 1px solid rgba(212, 160, 23, 0.5);
    border-bottom: 0;
    background:
        linear-gradient(90deg, transparent calc(50% - 1px), rgba(242, 193, 78, 0.7) calc(50% - 1px), rgba(242, 193, 78, 0.7) calc(50% + 1px), transparent calc(50% + 1px)),
        var(--gate-lattice) center top / 44px 44px;
    opacity: 0.24;
    -webkit-mask-image: radial-gradient(ellipse 58% 66% at 50% 55%, transparent 25%, #000 80%);
    mask-image: radial-gradient(ellipse 58% 66% at 50% 55%, transparent 25%, #000 80%);
}

/* the big round medallion of the doors, very faint behind the heading */
.gate-opening::before {
    content: '';
    position: absolute;
    z-index: -1;
    left: 50%;
    top: 50%;
    width: min(290px, 78%);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    background: var(--gate-medallion) center / contain no-repeat;
    opacity: 0.17;
    pointer-events: none;
}

.gate-opening h2 {
    margin-top: 0;
}

.gate-opening .section-subtitle,
.gate-opening .gallery-sub {
    margin-bottom: 0;
}

/* stone step with a gold edge */
.gate::after {
    content: '';
    grid-area: base;
    height: 12px;
    margin: 0 -10px;
    background: linear-gradient(180deg, #e2b33c 0, #e2b33c 2px, #3b2c22 2px, #1c140f 100%);
    border-radius: 0 0 3px 3px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
}

.gate-gallery {
    position: relative;
    z-index: 1;
}

/* ---------- Section headings: round gold medallion around the 福 ---------- */
.reservations h2::before,
.contact h2::before,
.reviews h2::before,
.gallery h2::before,
.cancellation h2::before,
.login-page-title::before,
.profile-section h2::before {
    width: 32px;
    height: 32px;
    margin-left: -16px;
    bottom: -1px;
    border: 0;
    border-radius: 50%;
    transform: none;
    background:
        radial-gradient(circle closest-side, #b0121b 0, #b0121b 62%, #f2c14e 62%, #f2c14e 69%, transparent 69%),
        radial-gradient(circle closest-side, transparent 0, transparent 81%, #d4a017 81%, #fff1b8 90%, #b8860b 98%, transparent 98%),
        repeating-conic-gradient(rgba(242, 193, 78, 0.95) 0deg 4deg, transparent 4deg 22.5deg),
        #4a070c;
    box-shadow: 0 0 12px rgba(242, 193, 78, 0.35);
}

/* ---------- Dividers between sections: fret band + medallion ---------- */
.gate-divider {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    overflow: hidden;
    background: #050306;
    border-top: 1px solid rgba(212, 160, 23, 0.35);
    border-bottom: 1px solid rgba(212, 160, 23, 0.35);
}

.gate-divider::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 18px;
    margin-top: -9px;
    background: var(--gate-band) center / 40px 18px repeat-x;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 20%, #000 80%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 20%, #000 80%, transparent 100%);
    opacity: 0.85;
}

.gate-divider span {
    position: relative;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--gate-medallion) center / 100% 100% no-repeat, radial-gradient(circle, #7a0a10 0%, #3a0508 100%);
    box-shadow: 0 0 0 5px #050306, 0 0 18px rgba(242, 193, 78, 0.45);
}

.gate-divider + .reviews,
.gate-divider + .contact {
    border-top: 0;
    border-image: none;
}

/* ---------- Footer: tiled eave with gold end caps ---------- */
.footer {
    position: relative;
    padding-top: calc(2rem + 24px);
    border-top: 1px solid rgba(212, 160, 23, 0.4);
    border-image: none;
}

.footer::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 28px;
    background: var(--gate-eave) 0 0 / 40px 28px repeat-x;
    pointer-events: none;
}

/* ---------- Phones: no couplets, slimmer pillars and roof ---------- */
@media (max-width: 768px) {
    .gate {
        max-width: none;
        grid-template-columns: 12px minmax(0, 1fr) 12px;
        grid-template-areas:
            "roof   roof   roof"
            "lintel lintel lintel"
            "pl     open   pr"
            "base   base   base";
        margin-bottom: 2.25rem;
    }

    .gate-couplet {
        display: none;
    }

    .gate-roof {
        height: 44px;
        margin: 0 -6px -4px;
    }

    .gate-lintel {
        margin: 0 4px;
        padding: 10px 8px;
        background-size: 24px 11px, 24px 11px, 100% 100%;
    }

    .gate-plaque {
        padding: 6px 18px 5px;
    }

    .gate-plaque-zh {
        font-size: 1.2rem;
    }

    .gate-plaque-latin {
        font-size: 0.78rem;
        letter-spacing: 0.34em;
        margin-right: -0.34em;
    }

    .gate-pillar::before,
    .gate-pillar::after {
        left: -2px;
        right: -2px;
    }

    .gate-opening {
        padding: 1.9rem 0.8rem 1.5rem;
    }

    .gate-doors {
        background-size: auto, 36px 36px;
    }

    .gate::after {
        margin: 0 -4px;
    }

    .gate-divider {
        height: 52px;
    }

    .gate-divider span {
        width: 38px;
        height: 38px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gate-plaque::after {
        animation: none;
        display: none;
    }
}


/* ==========================================================================
   Roof of the website: a two-tier pagoda roof with gold trim and upturned
   gold-tipped eaves across the very top of every page, built into the fixed
   header (.navbar::after, layered SVG backgrounds). The header
   grows by --roof-h and the page is pushed down by the same amount, so the
   links, logo badge, profile icon, hamburger and bookmarks keep their places.
   ========================================================================== */
:root {
    --roof-h: 40px;
    --roof-s: 1px;
    --roof-lower: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8000 25' preserveAspectRatio='xMidYMax slice'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff1b8'/%3E%3Cstop offset='.45' stop-color='%23e8b53c'/%3E%3Cstop offset='1' stop-color='%238a5d0e'/%3E%3C/linearGradient%3E%3ClinearGradient id='gh' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%238a5d0e'/%3E%3Cstop offset='.5' stop-color='%23fff1b8'/%3E%3Cstop offset='1' stop-color='%238a5d0e'/%3E%3C/linearGradient%3E%3ClinearGradient id='t' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%234f8a60'/%3E%3Cstop offset='1' stop-color='%23123824'/%3E%3C/linearGradient%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.28'/%3E%3Cstop offset='.4' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23000' stop-opacity='.35'/%3E%3C/linearGradient%3E%3Cpattern id='p' width='16' height='13' y='3.5' patternUnits='userSpaceOnUse'%3E%3Crect width='16' height='13' fill='%230d2a1b'/%3E%3Crect x='3.0' width='10' height='13' fill='url(%23t)'/%3E%3Crect x='5.0' width='2.2' height='13' fill='%23b6e3c2' opacity='.45'/%3E%3Crect x='12.0' width='1' height='13' fill='%2304130b' opacity='.8'/%3E%3C/pattern%3E%3Cpattern id='c' width='32' height='20' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='8.0' cy='19' r='3.2' fill='%23123824' stroke='%23f2c14e' stroke-width='1'/%3E%3Ccircle cx='8.0' cy='19' r='1.1' fill='%23f2c14e'/%3E%3Cpath d='M18 15.8 H30 L24.0 23.2Z' fill='%23123824' stroke='%23c8921c' stroke-width='.8' stroke-linejoin='round'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='8000' height='3.5' fill='%2306140c'/%3E%3Crect y='2.4' width='8000' height='1.2' fill='%23e2b33c'/%3E%3Crect y='3.5' width='8000' height='13' fill='url(%23p)'/%3E%3Crect y='9.6' width='8000' height='.8' fill='%2304130b' opacity='.55'/%3E%3Crect y='16.4' width='8000' height='6' fill='%230d2a1b'/%3E%3Crect y='16' width='8000' height='6' fill='url(%23c)'/%3E%3Crect y='3.5' width='8000' height='19' fill='url(%23s)'/%3E%3Crect y='22' width='8000' height='2.4' fill='url(%23g)'/%3E%3Crect y='24.4' width='8000' height='.6' fill='%232a1d06'/%3E%3C/svg%3E");
    --roof-lower-tip-l: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff1b8'/%3E%3Cstop offset='.45' stop-color='%23e8b53c'/%3E%3Cstop offset='1' stop-color='%238a5d0e'/%3E%3C/linearGradient%3E%3ClinearGradient id='gh' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%238a5d0e'/%3E%3Cstop offset='.5' stop-color='%23fff1b8'/%3E%3Cstop offset='1' stop-color='%238a5d0e'/%3E%3C/linearGradient%3E%3ClinearGradient id='t' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%234f8a60'/%3E%3Cstop offset='1' stop-color='%23123824'/%3E%3C/linearGradient%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.28'/%3E%3Cstop offset='.4' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23000' stop-opacity='.35'/%3E%3C/linearGradient%3E%3Cpattern id='p' width='16' height='40' y='0' patternUnits='userSpaceOnUse'%3E%3Crect width='16' height='40' fill='%230d2a1b'/%3E%3Crect x='3.0' width='10' height='40' fill='url(%23t)'/%3E%3Crect x='5.0' width='2.2' height='40' fill='%23b6e3c2' opacity='.45'/%3E%3Crect x='12.0' width='1' height='40' fill='%2304130b' opacity='.8'/%3E%3C/pattern%3E%3CclipPath id='k'%3E%3Cpath d='M100 15H52Q24 13 6 2L2 1.6Q18 18 42 30Q64 38.4 100 38.4Z'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg clip-path='url(%23k)'%3E%3Crect width='100' height='40' fill='url(%23p)'/%3E%3Crect width='100' height='40' fill='url(%23s)'/%3E%3Cpath d='M100 15H52Q24 13 6 2' fill='none' stroke='%2306140c' stroke-width='3.4'/%3E%3Cpath d='M100 17.5H52Q25 15.5 7 4.4' fill='none' stroke='%23e2b33c' stroke-width='1.2'/%3E%3C/g%3E%3Cpath d='M2 1.6Q18 18 42 30Q64 38.4 100 38.4' fill='none' stroke='%232a1d06' stroke-width='3.6' opacity='.6'/%3E%3Cpath d='M2 1.6Q18 18 42 30Q64 38.4 100 38.4' fill='none' stroke='url(%23g)' stroke-width='2.4'/%3E%3Cg transform='translate(4 3) scale(1.1 1.1)'%3E%3Cpath d='M0 0C-4 -2 -7 -6 -5 -10C-3.6 -12.6 0 -12 0 -9.6C0 -8 -2 -7.6 -2.8 -8.6' fill='none' stroke='url(%23g)' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='-5.4' cy='-4.6' r='1.4' fill='%23f2c14e'/%3E%3C/g%3E%3Cg transform='translate(9 6) scale(1)'%3E%3Cpath d='M0 0v3' stroke='%23c8921c' stroke-width='.8'/%3E%3Cpath d='M-2.6 7.4C-2.6 4 -1.6 3 0 3S2.6 4 2.6 7.4Z' fill='url(%23g)'/%3E%3C/g%3E%3C/svg%3E");
    --roof-lower-tip-r: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff1b8'/%3E%3Cstop offset='.45' stop-color='%23e8b53c'/%3E%3Cstop offset='1' stop-color='%238a5d0e'/%3E%3C/linearGradient%3E%3ClinearGradient id='gh' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%238a5d0e'/%3E%3Cstop offset='.5' stop-color='%23fff1b8'/%3E%3Cstop offset='1' stop-color='%238a5d0e'/%3E%3C/linearGradient%3E%3ClinearGradient id='t' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%234f8a60'/%3E%3Cstop offset='1' stop-color='%23123824'/%3E%3C/linearGradient%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.28'/%3E%3Cstop offset='.4' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23000' stop-opacity='.35'/%3E%3C/linearGradient%3E%3Cpattern id='p' width='16' height='40' y='0' patternUnits='userSpaceOnUse'%3E%3Crect width='16' height='40' fill='%230d2a1b'/%3E%3Crect x='3.0' width='10' height='40' fill='url(%23t)'/%3E%3Crect x='5.0' width='2.2' height='40' fill='%23b6e3c2' opacity='.45'/%3E%3Crect x='12.0' width='1' height='40' fill='%2304130b' opacity='.8'/%3E%3C/pattern%3E%3CclipPath id='k'%3E%3Cpath d='M100 15H52Q24 13 6 2L2 1.6Q18 18 42 30Q64 38.4 100 38.4Z'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg transform='translate(100 0) scale(-1 1)'%3E%3Cg clip-path='url(%23k)'%3E%3Crect width='100' height='40' fill='url(%23p)'/%3E%3Crect width='100' height='40' fill='url(%23s)'/%3E%3Cpath d='M100 15H52Q24 13 6 2' fill='none' stroke='%2306140c' stroke-width='3.4'/%3E%3Cpath d='M100 17.5H52Q25 15.5 7 4.4' fill='none' stroke='%23e2b33c' stroke-width='1.2'/%3E%3C/g%3E%3Cpath d='M2 1.6Q18 18 42 30Q64 38.4 100 38.4' fill='none' stroke='%232a1d06' stroke-width='3.6' opacity='.6'/%3E%3Cpath d='M2 1.6Q18 18 42 30Q64 38.4 100 38.4' fill='none' stroke='url(%23g)' stroke-width='2.4'/%3E%3Cg transform='translate(4 3) scale(1.1 1.1)'%3E%3Cpath d='M0 0C-4 -2 -7 -6 -5 -10C-3.6 -12.6 0 -12 0 -9.6C0 -8 -2 -7.6 -2.8 -8.6' fill='none' stroke='url(%23g)' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='-5.4' cy='-4.6' r='1.4' fill='%23f2c14e'/%3E%3C/g%3E%3Cg transform='translate(9 6) scale(1)'%3E%3Cpath d='M0 0v3' stroke='%23c8921c' stroke-width='.8'/%3E%3Cpath d='M-2.6 7.4C-2.6 4 -1.6 3 0 3S2.6 4 2.6 7.4Z' fill='url(%23g)'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    --roof-upper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8000 15' preserveAspectRatio='xMidYMax slice'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff1b8'/%3E%3Cstop offset='.45' stop-color='%23e8b53c'/%3E%3Cstop offset='1' stop-color='%238a5d0e'/%3E%3C/linearGradient%3E%3ClinearGradient id='gh' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%238a5d0e'/%3E%3Cstop offset='.5' stop-color='%23fff1b8'/%3E%3Cstop offset='1' stop-color='%238a5d0e'/%3E%3C/linearGradient%3E%3ClinearGradient id='t' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%234f8a60'/%3E%3Cstop offset='1' stop-color='%23123824'/%3E%3C/linearGradient%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.28'/%3E%3Cstop offset='.4' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23000' stop-opacity='.35'/%3E%3C/linearGradient%3E%3Cpattern id='p' width='12' height='9' y='3' patternUnits='userSpaceOnUse'%3E%3Crect width='12' height='9' fill='%230d2a1b'/%3E%3Crect x='2.25' width='7.5' height='9' fill='url(%23t)'/%3E%3Crect x='4.25' width='1.6' height='9' fill='%23b6e3c2' opacity='.45'/%3E%3Crect x='8.75' width='1' height='9' fill='%2304130b' opacity='.8'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='8000' height='3' fill='%2306140c'/%3E%3Crect y='1.9' width='8000' height='1.1' fill='%23e2b33c'/%3E%3Crect y='3' width='8000' height='9' fill='url(%23p)'/%3E%3Crect y='3' width='8000' height='9' fill='url(%23s)'/%3E%3Crect y='11.6' width='8000' height='2.2' fill='url(%23g)'/%3E%3Crect y='13.8' width='8000' height='1.2' fill='%232a1d06' opacity='.8'/%3E%3C/svg%3E");
    --roof-upper-tip-l: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 19'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff1b8'/%3E%3Cstop offset='.45' stop-color='%23e8b53c'/%3E%3Cstop offset='1' stop-color='%238a5d0e'/%3E%3C/linearGradient%3E%3ClinearGradient id='gh' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%238a5d0e'/%3E%3Cstop offset='.5' stop-color='%23fff1b8'/%3E%3Cstop offset='1' stop-color='%238a5d0e'/%3E%3C/linearGradient%3E%3ClinearGradient id='t' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%234f8a60'/%3E%3Cstop offset='1' stop-color='%23123824'/%3E%3C/linearGradient%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.28'/%3E%3Cstop offset='.4' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23000' stop-opacity='.35'/%3E%3C/linearGradient%3E%3Cpattern id='p' width='12' height='19' y='0' patternUnits='userSpaceOnUse'%3E%3Crect width='12' height='19' fill='%230d2a1b'/%3E%3Crect x='2.25' width='7.5' height='19' fill='url(%23t)'/%3E%3Crect x='4.25' width='1.6' height='19' fill='%23b6e3c2' opacity='.45'/%3E%3Crect x='8.75' width='1' height='19' fill='%2304130b' opacity='.8'/%3E%3C/pattern%3E%3CclipPath id='k'%3E%3Cpath d='M56 4H30Q14 3 4 .8L1.6 1Q12 10 26 15Q40 18.2 56 18.2Z'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg clip-path='url(%23k)'%3E%3Crect width='56' height='19' fill='url(%23p)'/%3E%3Crect width='56' height='19' fill='url(%23s)'/%3E%3Cpath d='M56 4H30Q14 3 4 .8' fill='none' stroke='%2306140c' stroke-width='3'/%3E%3Cpath d='M56 6H30Q15 5 5 2.6' fill='none' stroke='%23e2b33c' stroke-width='1'/%3E%3C/g%3E%3Cpath d='M1.6 1Q12 10 26 15Q40 18.2 56 18.2' fill='none' stroke='url(%23g)' stroke-width='2'/%3E%3Cg transform='translate(3 2) scale(0.8 0.8)'%3E%3Cpath d='M0 0C-4 -2 -7 -6 -5 -10C-3.6 -12.6 0 -12 0 -9.6C0 -8 -2 -7.6 -2.8 -8.6' fill='none' stroke='url(%23g)' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='-5.4' cy='-4.6' r='1.4' fill='%23f2c14e'/%3E%3C/g%3E%3Cpath d='M50 4.4C48 1.6 45 .4 42.4 1.2C44 2 45 3 44.6 4.4Z' fill='url(%23g)' stroke='%238a5d0e' stroke-width='.4'/%3E%3Ccircle cx='49.4' cy='1.6' r='1' fill='url(%23g)'/%3E%3C/svg%3E");
    --roof-upper-tip-r: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 19'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff1b8'/%3E%3Cstop offset='.45' stop-color='%23e8b53c'/%3E%3Cstop offset='1' stop-color='%238a5d0e'/%3E%3C/linearGradient%3E%3ClinearGradient id='gh' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%238a5d0e'/%3E%3Cstop offset='.5' stop-color='%23fff1b8'/%3E%3Cstop offset='1' stop-color='%238a5d0e'/%3E%3C/linearGradient%3E%3ClinearGradient id='t' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%234f8a60'/%3E%3Cstop offset='1' stop-color='%23123824'/%3E%3C/linearGradient%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.28'/%3E%3Cstop offset='.4' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23000' stop-opacity='.35'/%3E%3C/linearGradient%3E%3Cpattern id='p' width='12' height='19' y='0' patternUnits='userSpaceOnUse'%3E%3Crect width='12' height='19' fill='%230d2a1b'/%3E%3Crect x='2.25' width='7.5' height='19' fill='url(%23t)'/%3E%3Crect x='4.25' width='1.6' height='19' fill='%23b6e3c2' opacity='.45'/%3E%3Crect x='8.75' width='1' height='19' fill='%2304130b' opacity='.8'/%3E%3C/pattern%3E%3CclipPath id='k'%3E%3Cpath d='M56 4H30Q14 3 4 .8L1.6 1Q12 10 26 15Q40 18.2 56 18.2Z'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg transform='translate(56 0) scale(-1 1)'%3E%3Cg clip-path='url(%23k)'%3E%3Crect width='56' height='19' fill='url(%23p)'/%3E%3Crect width='56' height='19' fill='url(%23s)'/%3E%3Cpath d='M56 4H30Q14 3 4 .8' fill='none' stroke='%2306140c' stroke-width='3'/%3E%3Cpath d='M56 6H30Q15 5 5 2.6' fill='none' stroke='%23e2b33c' stroke-width='1'/%3E%3C/g%3E%3Cpath d='M1.6 1Q12 10 26 15Q40 18.2 56 18.2' fill='none' stroke='url(%23g)' stroke-width='2'/%3E%3Cg transform='translate(3 2) scale(0.8 0.8)'%3E%3Cpath d='M0 0C-4 -2 -7 -6 -5 -10C-3.6 -12.6 0 -12 0 -9.6C0 -8 -2 -7.6 -2.8 -8.6' fill='none' stroke='url(%23g)' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='-5.4' cy='-4.6' r='1.4' fill='%23f2c14e'/%3E%3C/g%3E%3Cpath d='M50 4.4C48 1.6 45 .4 42.4 1.2C44 2 45 3 44.6 4.4Z' fill='url(%23g)' stroke='%238a5d0e' stroke-width='.4'/%3E%3Ccircle cx='49.4' cy='1.6' r='1' fill='url(%23g)'/%3E%3C/g%3E%3C/svg%3E");
    --roof-ornament: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 19'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff1b8'/%3E%3Cstop offset='.45' stop-color='%23e8b53c'/%3E%3Cstop offset='1' stop-color='%238a5d0e'/%3E%3C/linearGradient%3E%3ClinearGradient id='gh' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%238a5d0e'/%3E%3Cstop offset='.5' stop-color='%23fff1b8'/%3E%3Cstop offset='1' stop-color='%238a5d0e'/%3E%3C/linearGradient%3E%3CradialGradient id='pe' cx='.4' cy='.35' r='.7'%3E%3Cstop offset='0' stop-color='%23fff'/%3E%3Cstop offset='.35' stop-color='%23fff1b8'/%3E%3Cstop offset='1' stop-color='%23e2a23c'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M8 5.5C14 5.5 18 1 24 3M56 5.5C50 5.5 46 1 40 3' fill='none' stroke='url(%23g)' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpath d='M22 6H42' stroke='url(%23g)' stroke-width='1.4'/%3E%3Cpath d='M32 6.5L23.5 5.1L23.5 7.9Z' fill='%23e0301e'/%3E%3Cpath d='M32 6.5L25.3 1.0L23.9 3.5Z' fill='%23e0301e'/%3E%3Cpath d='M32 6.5L29.0 -1.6L26.5 -0.2Z' fill='%23e0301e'/%3E%3Cpath d='M32 6.5L33.4 -2.0L30.6 -2.0Z' fill='%23e0301e'/%3E%3Cpath d='M32 6.5L37.5 -0.2L35.0 -1.6Z' fill='%23e0301e'/%3E%3Cpath d='M32 6.5L40.1 3.5L38.7 1.0Z' fill='%23e0301e'/%3E%3Cpath d='M32 6.5L40.5 7.9L40.5 5.1Z' fill='%23e0301e'/%3E%3Ccircle cx='32' cy='6.5' r='5.4' fill='url(%23pe)' stroke='%238a5d0e' stroke-width='.6'/%3E%3C/svg%3E");
    --gate-bracket: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 26'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff1b8'/%3E%3Cstop offset='.45' stop-color='%23e8b53c'/%3E%3Cstop offset='1' stop-color='%238a5d0e'/%3E%3C/linearGradient%3E%3ClinearGradient id='gh' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%238a5d0e'/%3E%3Cstop offset='.5' stop-color='%23fff1b8'/%3E%3Cstop offset='1' stop-color='%238a5d0e'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='1' y='0' width='58' height='5' rx='1' fill='%23b3121c' stroke='url(%23g)' stroke-width='1.2'/%3E%3Cpath d='M6 5h10v6H6zM25 5h10v6H25zM44 5h10v6H44z' fill='url(%23g)' stroke='%238a5d0e' stroke-width='.5'/%3E%3Cpath d='M3 11H57Q57 16 51 16H9Q3 16 3 11Z' fill='url(%23g)' stroke='%238a5d0e' stroke-width='.5'/%3E%3Cpath d='M20 16h20v4H20z' fill='%23b3121c' stroke='url(%23g)' stroke-width='.8'/%3E%3Cpath d='M22 20h16l-2 6H24z' fill='url(%23g)' stroke='%238a5d0e' stroke-width='.5'/%3E%3C/svg%3E");
}

body {
    padding-top: var(--roof-h);
}

.navbar {
    padding-top: calc(1rem + var(--roof-h));
}

.navbar.navbar-badge {
    padding-top: var(--roof-h);
    height: calc(var(--hdr-h) + var(--roof-h));
}

/* the old single-tier pieces are no longer used */
.navbar::before {
    content: none;
}

/* two-tier pagoda roof: a lower tier of green glazed tiles with gold trim and
   dramatically upturned gold eave tips (with little bells), and a shorter
   upper tier with gold ridge beasts and a flaming pearl in the middle */
.navbar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--roof-h);
    pointer-events: none;
    z-index: 6;
    background-image:
        var(--roof-ornament),
        var(--roof-upper-tip-l),
        var(--roof-upper-tip-r),
        var(--roof-upper),
        var(--roof-lower-tip-l),
        var(--roof-lower-tip-r),
        var(--roof-lower);
    background-size:
        calc(64 * var(--roof-s)) calc(19 * var(--roof-s)),
        calc(56 * var(--roof-s)) calc(19 * var(--roof-s)),
        calc(56 * var(--roof-s)) calc(19 * var(--roof-s)),
        calc(64% - 112 * var(--roof-s)) calc(15 * var(--roof-s)),
        calc(100 * var(--roof-s)) calc(40 * var(--roof-s)),
        calc(100 * var(--roof-s)) calc(40 * var(--roof-s)),
        calc(100% - 200 * var(--roof-s)) calc(25 * var(--roof-s));
    background-position:
        center top,
        left calc(18% + 10.08 * var(--roof-s)) top 0,
        right calc(18% + 10.08 * var(--roof-s)) top 0,
        center top calc(4 * var(--roof-s)),
        left bottom,
        right bottom,
        center bottom;
    background-repeat: no-repeat;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45));
}

/* desktop bookmarks and the phone menu move down with the header */
.navbar .nav-menu {
    margin-top: var(--roof-h);
}

@media (min-width: 769px) {
    .navbar .nav-menu {
        --bm-h: clamp(80px, calc((100vh - 84px - var(--roof-h)) / 5.87), 148px);
    }
}

@media (max-width: 768px) {
    :root {
        --roof-h: 24px;
        --roof-s: 0.6px;
    }
}

/* ==========================================================================
   Wider gate + waving flags on both sides (red banners with a gold border,
   福 / 酒 in gold). Big screens: tall gold poles beside the gate, clear of the
   left bookmarks. Smaller screens: little flags on the roof corners.
   ========================================================================== */
.gate {
    max-width: min(1000px, calc(100vw - 120px));
}

@media (max-width: 768px) {
    .gate {
        max-width: none;
    }
}

.gate-flag {
    position: absolute;
    z-index: 1;
    top: -46px;
    width: 5px;
    height: 64px;
    border-radius: 3px;
    background: linear-gradient(90deg, #6d4a0c 0%, #fff1b8 45%, #c8921c 70%, #6d4a0c 100%);
    pointer-events: none;
}

.gate-flag-left { left: 14px; }
.gate-flag-right { right: 14px; }

/* gold finial */
.gate-flag::before {
    content: '';
    position: absolute;
    left: 50%;
    top: -9px;
    width: 11px;
    height: 11px;
    margin-left: -5.5px;
    border-radius: 50% 50% 45% 45%;
    background: radial-gradient(circle at 35% 30%, #fff6d0 0%, #f2c14e 40%, #9a6b12 100%);
    box-shadow: 0 0 6px rgba(242, 193, 78, 0.6);
}

.gate-flag-cloth {
    --tail: polygon(0 0, 100% 0, 78% 50%, 100% 100%, 0 100%);
    position: absolute;
    top: 3px;
    width: 44px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #fff1b8 0%, #e2b33c 45%, #9a6b12 100%);
    clip-path: var(--tail);
    animation: gate-flag-wave 3.2s ease-in-out infinite;
    overflow: hidden;
}

/* the red field inside the gold border */
.gate-flag-cloth::before {
    content: '';
    position: absolute;
    inset: 2px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 40%, rgba(0, 0, 0, 0.25) 100%),
        linear-gradient(90deg, #8e0c14 0%, #d4252e 50%, #a50f18 100%);
    clip-path: var(--tail);
}

/* moving light = the ripple of the cloth */
.gate-flag-cloth::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 60%;
    background: linear-gradient(90deg, rgba(255, 245, 210, 0) 0%, rgba(255, 245, 210, 0.3) 50%, rgba(255, 245, 210, 0) 100%);
    animation: gate-flag-ripple 2.4s linear infinite;
}

.gate-flag-char {
    position: relative;
    z-index: 1;
    font-family: var(--cn-font-display);
    font-weight: 900;
    font-size: 15px;
    line-height: 1;
    background: var(--gate-gold-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

/* small screens: flags point inwards over the roof corners */
.gate-flag-left .gate-flag-cloth {
    left: 100%;
    --tail: polygon(0 0, 100% 0, 78% 50%, 100% 100%, 0 100%);
    padding-right: 8px;
    transform-origin: left center;
}

.gate-flag-right .gate-flag-cloth {
    right: 100%;
    --tail: polygon(0 0, 100% 0, 100% 100%, 0 100%, 22% 50%);
    padding-left: 8px;
    transform-origin: right center;
    animation-delay: -1.4s;
}

.gate-flag-right .gate-flag-cloth::after {
    animation-direction: reverse;
    animation-delay: -1.1s;
}

.gate:has(.gate-flag) {
    margin-top: 48px;
}

@keyframes gate-flag-wave {
    0%, 100% { transform: perspective(220px) rotateY(0deg) skewY(0deg) scaleX(1); }
    25% { transform: perspective(220px) rotateY(-16deg) skewY(-4deg) scaleX(0.96); }
    50% { transform: perspective(220px) rotateY(6deg) skewY(2.5deg) scaleX(0.92); }
    75% { transform: perspective(220px) rotateY(-9deg) skewY(-2deg) scaleX(0.97); }
}

@keyframes gate-flag-ripple {
    0% { transform: translateX(-110%); }
    100% { transform: translateX(190%); }
}

/* big screens: wider gate, tall poles standing beside it, flags waving outwards */
@media (min-width: 1240px) {
    .gate {
        max-width: min(1100px, calc(100vw - 300px));
    }

    .gate:has(.gate-flag) {
        margin-top: 0;
    }

    .gate-flag {
        top: -26px;
        bottom: -12px;
        height: auto;
        width: 7px;
    }

    .gate-flag::before {
        top: -13px;
        width: 15px;
        height: 15px;
        margin-left: -7.5px;
    }

    /* stone foot of the pole */
    .gate-flag::after {
        content: '';
        position: absolute;
        left: 50%;
        bottom: 0;
        width: 24px;
        height: 10px;
        margin-left: -12px;
        border-radius: 2px 2px 0 0;
        background: linear-gradient(180deg, #e2b33c 0, #e2b33c 2px, #3b2c22 2px, #1c140f 100%);
    }

    .gate-flag-left { left: auto; right: calc(100% + 22px); }
    .gate-flag-right { right: auto; left: calc(100% + 22px); }

    .gate-flag-cloth {
        top: 10px;
        width: 76px;
        height: 104px;
    }

    .gate-flag-char {
        font-size: 30px;
    }

    .gate-flag-left .gate-flag-cloth {
        left: auto;
        right: 100%;
        --tail: polygon(0 0, 100% 0, 100% 100%, 0 100%, 24% 50%);
        padding: 0 0 0 16px;
        transform-origin: right center;
    }

    .gate-flag-right .gate-flag-cloth {
        right: auto;
        left: 100%;
        --tail: polygon(0 0, 100% 0, 76% 50%, 100% 100%, 0 100%);
        padding: 0 16px 0 0;
        transform-origin: left center;
    }

    .gate-flag-cloth::before {
        inset: 3px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gate-flag-cloth,
    .gate-flag-cloth::after {
        animation: none;
    }

    .gate-flag-cloth::after {
        display: none;
    }
}

/* privacy anchors land below the header + roof */
.privacy-card h3[id] {
    scroll-margin-top: calc(96px + var(--roof-h));
}

/* ==========================================================================
   Pagoda gate roof: two tiers of green glazed tiles with gold trim, sweeping
   upturned eaves with gold tips and bells, gold ridge beasts and a gold gourd
   on top, and a red middle storey with gold brackets. Keeps its proportions
   at every width. Red columns get gold dougong brackets under the lintel.
   ========================================================================== */
.gate-roof {
    height: auto;
    aspect-ratio: 1000 / 168;
    margin: 0 -18px -4px;
    background: var(--gate-roof) center / 100% 100% no-repeat;
    filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.45));
}

.gate-pillar::before {
    top: -4px;
    left: -18px;
    right: auto;
    width: 60px;
    height: 26px;
    z-index: 2;
    background: var(--gate-bracket) center / 100% 100% no-repeat;
    border-radius: 0;
}

/* under 1240px the flag poles stand on the lower roof tier: they reach down
   behind the tiles (the roof is drawn above them), whatever the width */
@media (max-width: 1239px) {
    .gate-flag {
        height: calc(46px + min(98px, 9.5vw - 8px));
    }
}

@media (max-width: 768px) {
    .gate-flag {
        height: calc(46px + 11vw - 2.6px);
    }
}

@media (max-width: 768px) {
    .gate-roof {
        height: auto;
        margin: 0 -8px -3px;
    }

    .gate-pillar::before {
        top: -3px;
        left: -10px;
        right: auto;
        width: 32px;
        height: 14px;
    }
}

/* ==========================================================================
   Dragón volador: an original gold-scaled Chinese dragon (red spines, green /
   teal mane) that flies across the screen left → right, pauses, then flies
   back right → left facing its direction. Pure CSS/SVG, transform-only
   animation (GPU), fixed + clipped to the viewport, never takes clicks,
   hidden with reduced motion. Body = a chain of scaled segments with a
   travelling sine wave (each segment lags the next by 1/12 of the period).
   ========================================================================== */
:root {
    --sd-head: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 132 104'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff1b0'/%3E%3Cstop offset='.45' stop-color='%23f0b83a'/%3E%3Cstop offset='1' stop-color='%23a8680e'/%3E%3C/linearGradient%3E%3ClinearGradient id='m1' x1='1' y1='1' x2='0' y2='0'%3E%3Cstop offset='0' stop-color='%230c7a5e'/%3E%3Cstop offset='.6' stop-color='%231fbf8f'/%3E%3Cstop offset='1' stop-color='%239cf0c8'/%3E%3C/linearGradient%3E%3ClinearGradient id='m2' x1='1' y1='1' x2='0' y2='0'%3E%3Cstop offset='0' stop-color='%230b5f8a'/%3E%3Cstop offset='1' stop-color='%2334c6d8'/%3E%3C/linearGradient%3E%3ClinearGradient id='r' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ff5a3c'/%3E%3Cstop offset='1' stop-color='%23b3121c'/%3E%3C/linearGradient%3E%3CradialGradient id='f' cx='.6' cy='.35' r='.7'%3E%3Cstop offset='0' stop-color='%23fff0a8'/%3E%3Cstop offset='.5' stop-color='%23f2b534'/%3E%3Cstop offset='1' stop-color='%23b8741a'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M46.3 54Q26.7 31.9 18 2Q33.5 27 57.7 46Z' fill='url(%23m1)' opacity='1'/%3E%3Cpath d='M47.8 55.6Q22.5 39.4 4 14Q27.5 32.6 56.2 44.4Z' fill='url(%23m2)' opacity='1'/%3E%3Cpath d='M49.9 56.7Q23.6 49.8 0 34Q26.1 41.8 54.1 43.3Z' fill='url(%23m1)' opacity='1'/%3E%3Cpath d='M52.7 56Q27 52.6 2 56Q26.1 45.5 51.3 44Z' fill='url(%23m2)' opacity='1'/%3E%3Cpath d='M55.4 55Q28.6 63 8 80Q24.6 57.1 48.6 45Z' fill='url(%23m1)' opacity='1'/%3E%3Cpath d='M46.5 52.4Q34 28.1 30 0Q40.6 25.2 57.5 47.6Z' fill='url(%23m2)' opacity='1'/%3E%3Cpath d='M47.1 50.9Q42.1 28 44 4Q48 27 56.9 49.1Z' fill='url(%23m1)' opacity='1'/%3E%3Cpath d='M47.9 50.1Q26.2 33.8 12 10Q28.7 31.3 52.1 45.9Z' fill='%23f5c518' opacity='1'/%3E%3Cpath d='M48.9 50.8Q24.3 43.5 2 30Q25.6 40.1 51.1 45.2Z' fill='%23e0301e' opacity='1'/%3E%3Cpath d='M50.2 50.6Q26.9 48.6 4 52Q26.6 45.5 49.8 45.4Z' fill='%23f5c518' opacity='1'/%3E%3Cpath d='M47.7 49.2Q33.1 28.7 26 4Q35.9 27.2 52.3 46.8Z' fill='%23e0301e' opacity='1'/%3E%3Cpath d='M60 30C52 18 44 10 30 4M44 12C44 6 40 2 36 0M52 20C58 12 56 6 58 2' fill='none' stroke='%233b2614' stroke-width='3.6' stroke-linecap='round'/%3E%3Cpath d='M60 30C52 18 44 10 30 4M44 12C44 6 40 2 36 0M52 20C58 12 56 6 58 2' fill='none' stroke='%23d9a441' stroke-width='1.2' stroke-linecap='round'/%3E%3Cpath d='M4 38C18 34 30 30 40 28C52 22 66 22 80 28L112 34C120 36 126 40 126 46C126 52 120 55 114 54L84 56L110 62C116 63 118 68 114 72C106 80 92 82 78 80C66 80 54 82 42 80C28 80 16 80 4 78Z' fill='url(%23f)' stroke='%238a5410' stroke-width='1.2'/%3E%3Cpath d='M47.6 49.5Q21.5 40.9 0 22Q24.4 34.3 52.4 38.5Z' fill='url(%23m1)' opacity='1'/%3E%3Cpath d='M49.8 50Q23.8 48.6 -2 42Q24.1 41.4 50.2 38Z' fill='url(%23m2)' opacity='1'/%3E%3Cpath d='M52 49.6Q25.2 53.6 0 62Q22.8 46.8 48 38.4Z' fill='url(%23m1)' opacity='1'/%3E%3Cpath d='M53.4 47.6Q27.9 60.8 10 82Q23.8 56.5 46.6 40.4Z' fill='url(%23m2)' opacity='1'/%3E%3Cpath d='M46.5 47.5Q25.6 32.4 14 8Q29.9 28.1 53.5 40.5Z' fill='url(%23m2)' opacity='1'/%3E%3Cpath d='M47.2 48.3Q24.1 43.1 4 30Q25.1 40.4 48.8 43.7Z' fill='%23f5c518' opacity='1'/%3E%3Cpath d='M48.3 48.2Q24.9 48.3 2 52Q24.6 45.7 47.7 43.8Z' fill='%23e0301e' opacity='1'/%3E%3Cpath d='M49.2 47.8Q26 55.9 8 72Q24.6 53.7 46.8 44.2Z' fill='%23f5c518' opacity='1'/%3E%3Cpath d='M40 30C44 40 46 52 44 64C48 54 50 42 46 30Z' fill='%23e0301e' opacity='.9'/%3E%3Cpath d='M114 54L84 56L110 62Z' fill='%235a0508'/%3E%3Cpath d='M86 58C98 60 110 58 122 56C128 55 130 60 126 62C122 64 118 60 114 61' fill='none' stroke='%23e0301e' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M92 55.4l2 4 2-4.2M100 55l2 4 2-4.3M108 54.5l2 3.8 2-4M94 60.2l2-3.6 2 3.8M102 61l2-3.4 2 3.6' fill='%23fff' stroke='%23fff' stroke-width='.6' stroke-linejoin='round'/%3E%3Cpath d='M66 26C80 26 96 30 112 34C118 35 122 38 123 42C112 38 96 36 82 36C74 36 68 32 66 26Z' fill='url(%23r)'/%3E%3Ccircle cx='117' cy='43' r='6.5' fill='url(%23r)' stroke='%237a0a0f' stroke-width='1'/%3E%3Cellipse cx='120' cy='44' rx='2' ry='1.4' fill='%233a0205'/%3E%3Cpath d='M62 36C68 28 80 28 86 34C80 32 70 32 62 36Z' fill='%23e0301e'/%3E%3Cellipse cx='74' cy='40' rx='7' ry='5' fill='%23fffbe8' stroke='%236a3c08' stroke-width='1'/%3E%3Ccircle cx='75.5' cy='40' r='3.4' fill='%23d9261c'/%3E%3Ccircle cx='76' cy='40' r='1.7' fill='%23111'/%3E%3Ccircle cx='74.6' cy='38.7' r='.8' fill='%23fff'/%3E%3Cpath d='M67.9 32.1Q59.6 26.4 56 16Q62.2 23.8 72.1 27.9Z' fill='%231fbf8f' opacity='1'/%3E%3Cpath d='M44 60q4-4 8 0q4-4 8 0q4-4 8 0M40 68q4-4 8 0q4-4 8 0q4-4 8 0q4-4 8 0' fill='none' stroke='%23a8680e' stroke-width='1.2'/%3E%3Cpath d='M80.2 80.8Q67.2 89.4 60 102Q62.2 86.1 71.8 75.2Z' fill='url(%23m1)' opacity='1'/%3E%3Cpath d='M78.8 82.1Q58.9 87.4 44 100Q55.5 82.4 73.2 73.9Z' fill='url(%23m2)' opacity='1'/%3E%3Cpath d='M77.8 82.7Q50.9 84.2 28 96Q48.8 78.6 74.2 73.3Z' fill='url(%23m1)' opacity='1'/%3E%3Cpath d='M79.9 77.2Q77.4 88.1 80 98Q72.7 89.1 72.1 78.8Z' fill='url(%23m2)' opacity='1'/%3E%3Cpath d='M118 48C130 40 130 22 116 18M104 56C118 70 110 86 96 88' fill='none' stroke='url(%23g)' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
    --sd-tail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 70'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff1b0'/%3E%3Cstop offset='.45' stop-color='%23f0b83a'/%3E%3Cstop offset='1' stop-color='%23a8680e'/%3E%3C/linearGradient%3E%3ClinearGradient id='m1' x1='1' y1='1' x2='0' y2='0'%3E%3Cstop offset='0' stop-color='%230c7a5e'/%3E%3Cstop offset='.6' stop-color='%231fbf8f'/%3E%3Cstop offset='1' stop-color='%239cf0c8'/%3E%3C/linearGradient%3E%3ClinearGradient id='m2' x1='1' y1='1' x2='0' y2='0'%3E%3Cstop offset='0' stop-color='%230b5f8a'/%3E%3Cstop offset='1' stop-color='%2334c6d8'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M36.4 40.8Q14.2 28.7 0 6Q18.6 22.9 43.6 31.2Z' fill='url(%23m1)' opacity='1'/%3E%3Cpath d='M39.1 41.9Q19.2 38.5 0 30Q20.2 31.4 40.9 30.1Z' fill='url(%23m2)' opacity='1'/%3E%3Cpath d='M42.8 41.3Q20.3 44.8 2 56Q17 38.4 37.2 30.7Z' fill='url(%23m1)' opacity='1'/%3E%3Cpath d='M35.8 38.8Q22.2 21.9 16 0Q27.2 18.6 44.2 33.2Z' fill='url(%23m2)' opacity='1'/%3E%3Cpath d='M44 39Q26.4 50.8 16 68Q21.6 47.2 36 33Z' fill='url(%23m2)' opacity='1'/%3E%3Cpath d='M39 38.2Q21.1 32 6 20Q22.3 29.4 41 33.8Z' fill='%23f5c518' opacity='1'/%3E%3Cpath d='M40.7 38.3Q22.6 39.5 6 46Q21.7 36.7 39.3 33.7Z' fill='%23e0301e' opacity='1'/%3E%3Cpath d='M100 17C80 18 60 26 38 34C60 42 80 52 100 53Z' fill='url(%23g)' stroke='%238a5410' stroke-width='1.2'/%3E%3Cpath d='M92 24q-4 5 0 10q-4 5 0 10M80 27q-4 4 0 8q-4 4 0 8M68 30q-3 3 0 6' fill='none' stroke='%23a8680e' stroke-width='1.2'/%3E%3Cpath d='M98 17L92 6L88 19L80 8L76 21L66 12L64 25L56 18L54 28' fill='%23d9261c' stroke='%237a0a0f' stroke-width='.8' stroke-linejoin='round'/%3E%3C/svg%3E");
    --sd-leg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 60'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff1b0'/%3E%3Cstop offset='.45' stop-color='%23f0b83a'/%3E%3Cstop offset='1' stop-color='%23a8680e'/%3E%3C/linearGradient%3E%3ClinearGradient id='m1' x1='1' y1='1' x2='0' y2='0'%3E%3Cstop offset='0' stop-color='%230c7a5e'/%3E%3Cstop offset='.6' stop-color='%231fbf8f'/%3E%3Cstop offset='1' stop-color='%239cf0c8'/%3E%3C/linearGradient%3E%3ClinearGradient id='m2' x1='1' y1='1' x2='0' y2='0'%3E%3Cstop offset='0' stop-color='%230b5f8a'/%3E%3Cstop offset='1' stop-color='%2334c6d8'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M12 25.5Q4.3 22.7 0 14Q6.7 18.5 16 18.5Z' fill='%23e0301e' opacity='1'/%3E%3Cpath d='M15.6 27.2Q7.6 26.2 2 30Q5.7 22.4 12.4 20.8Z' fill='%23f28a1c' opacity='1'/%3E%3Cpath d='M18.7 28.3Q8.6 31.8 4 40Q5.3 29 13.3 23.7Z' fill='url(%23m1)' opacity='1'/%3E%3Cpath d='M12 0H30C30 12 28 22 26 30C30 36 32 42 30 48H20C20 40 18 34 16 30C14 22 12 12 12 0Z' fill='url(%23g)' stroke='%238a5410' stroke-width='1.1'/%3E%3Cpath d='M16 6q3 3 6 0q3 3 6 0M16 14q3 3 6 0q3 3 6 0' fill='none' stroke='%23a8680e' stroke-width='1'/%3E%3Cpath d='M20 48C16 52 16 56 18 58M24 48C22 54 23 57 26 59M28 48C28 53 30 56 33 57M30 46C34 48 36 51 36 54' fill='none' stroke='%23fffbe8' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
    --sd-spines: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 26'%3E%3Cdefs%3E%3ClinearGradient id='r' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ff6a4a'/%3E%3Cstop offset='1' stop-color='%23a50f18'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M2 26Q5 12 0 1Q10 12 15 26ZM15 26Q18 12 13 1Q23 12 28 26ZM28 26Q31 12 26 1Q36 12 41 26Z' fill='url(%23r)' stroke='%236d070d' stroke-width='.9' stroke-linejoin='round'/%3E%3C/svg%3E");
    --sd-scales: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'%3E%3Crect width='12' height='10' fill='%23dc9e26'/%3E%3Cg fill='none' stroke='%238a5410' stroke-width='.8' opacity='.8'%3E%3Cpath d='M0 5A6 5 0 0 0 12 5M-6 10A6 5 0 0 0 6 10M6 10A6 5 0 0 0 18 10M-6 0A6 5 0 0 0 6 0M6 0A6 5 0 0 0 18 0'/%3E%3C/g%3E%3Cg fill='none' stroke='%23fff1b0' stroke-width='.7' opacity='.7'%3E%3Cpath d='M2 6.2A4.6 3.6 0 0 0 10 6.2M-4 1.2A4.6 3.6 0 0 0 4 1.2M8 1.2A4.6 3.6 0 0 0 16 1.2'/%3E%3C/g%3E%3C/svg%3E");
}

.sky-dragon {
    position: fixed;
    inset: 0;
    z-index: 900; /* under the header (1000) and dialogs */
    overflow: hidden;
    pointer-events: none;
    contain: strict;
}

.sky-dragon * {
    pointer-events: none;
}

.sky-dragon-flight {
    --sd-scale: 1;
    position: absolute;
    top: 24vh;
    left: 0;
    width: calc(608px * var(--sd-scale));
    height: calc(170px * var(--sd-scale));
    will-change: transform;
    animation: sd-fly 44s linear infinite;
}

.sky-dragon-body {
    position: absolute;
    left: calc(90px * var(--sd-scale));
    top: calc(62px * var(--sd-scale));
    width: 378px;
    height: 44px;
    transform: scale(var(--sd-scale));
    transform-origin: 0 0;
}

.sky-dragon-bob {
    position: absolute;
    inset: 0;
    animation: sd-bob 6.5s ease-in-out infinite alternate;
}

/* body segments */
.sd-seg {
    --s: 1;
    position: absolute;
    top: 0;
    left: calc(var(--i) * 21px);
    width: 60px;
    height: 44px;
    margin-left: -30px;
    border-radius: 50%;
    scale: var(--s);
    background:
        radial-gradient(ellipse 70% 45% at 50% 22%, rgba(255, 248, 210, 0.6) 0%, rgba(255, 248, 210, 0) 100%),
        repeating-linear-gradient(90deg, rgba(150, 90, 20, 0.35) 0 1px, rgba(0, 0, 0, 0) 1px 7px) left bottom / 100% 34% no-repeat,
        linear-gradient(180deg, rgba(0, 0, 0, 0) 64%, #f6e1a0 64%, #e6bf62 100%),
        var(--sd-scales) 0 0 / 12px 10px,
        #dc9e26;
    box-shadow: inset 0 -5px 7px rgba(110, 55, 0, 0.45), inset 0 2px 3px rgba(255, 255, 255, 0.25);
    animation: sd-wave 2.2s linear infinite;
    animation-delay: calc(var(--i) * -0.2s);
}

/* red dorsal spikes */
.sd-seg::before {
    content: '';
    position: absolute;
    left: 8px;
    top: -19px;
    width: 44px;
    height: 23px;
    background: var(--sd-spines) center / 100% 100% no-repeat;
}

.sd-leg {
    position: absolute;
    top: 28px;
    left: 14px;
    width: 40px;
    height: 56px;
    background: var(--sd-leg) center / 100% 100% no-repeat;
    transform-origin: 50% 4px;
    animation: sd-paddle 1.8s ease-in-out infinite alternate;
}

.sd-leg-front {
    animation-delay: -0.9s;
}

.sd-leg-far {
    filter: brightness(0.72) saturate(0.9);
    animation-delay: -0.45s;
}

.sd-leg-front.sd-leg-far {
    animation-delay: -1.35s;
}

.sd-leg-back {
    --leg-tilt: 22deg;
}

.sd-tail {
    position: absolute;
    top: -14px;
    left: -86px;
    width: 78px;
    height: 55px;
    background: var(--sd-tail) center / 100% 100% no-repeat;
    transform-origin: 100% 50%;
    animation: sd-wave 2.2s linear infinite;
    animation-delay: 0.2s;
}

.sd-head {
    position: absolute;
    top: -38px;
    left: calc(18 * 21px - 40px);
    width: 132px;
    height: 104px;
    background: var(--sd-head) center / 100% 100% no-repeat;
    transform-origin: 8% 56%;
    animation: sd-wave 2.2s linear infinite;
    animation-delay: calc(18 * -0.2s);
}

/* flaming pearl the dragon chases */
.sd-pearl {
    position: absolute;
    top: -6px;
    left: calc(18 * 21px + 118px);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 34%, #ffffff 0%, #fff3c4 25%, #f2c14e 55%, #e0301e 100%);
    box-shadow: 0 0 12px 4px rgba(255, 170, 60, 0.75), 0 0 28px 8px rgba(224, 48, 30, 0.45);
    animation: sd-pearl 1.2s ease-in-out infinite alternate;
}

@keyframes sd-wave {
    0% { transform: translateY(0.0px) rotate(30.9deg); }
    6.25% { transform: translateY(8.4px) rotate(28.9deg); }
    12.5% { transform: translateY(15.6px) rotate(22.9deg); }
    18.75% { transform: translateY(20.3px) rotate(12.9deg); }
    25% { transform: translateY(22.0px) rotate(0.0deg); }
    31.25% { transform: translateY(20.3px) rotate(-12.9deg); }
    37.5% { transform: translateY(15.6px) rotate(-22.9deg); }
    43.75% { transform: translateY(8.4px) rotate(-28.9deg); }
    50% { transform: translateY(0.0px) rotate(-30.9deg); }
    56.25% { transform: translateY(-8.4px) rotate(-28.9deg); }
    62.5% { transform: translateY(-15.6px) rotate(-22.9deg); }
    68.75% { transform: translateY(-20.3px) rotate(-12.9deg); }
    75% { transform: translateY(-22.0px) rotate(-0.0deg); }
    81.25% { transform: translateY(-20.3px) rotate(12.9deg); }
    87.5% { transform: translateY(-15.6px) rotate(22.9deg); }
    93.75% { transform: translateY(-8.4px) rotate(28.9deg); }
    100% { transform: translateY(-0.0px) rotate(30.9deg); }
}

@keyframes sd-paddle {
    0% { transform: rotate(calc(var(--leg-tilt, 0deg) - 26deg)); }
    100% { transform: rotate(calc(var(--leg-tilt, 0deg) + 18deg)); }
}

@keyframes sd-pearl {
    0% { transform: translateY(-5px) scale(0.92); }
    100% { transform: translateY(5px) scale(1.06); }
}

@keyframes sd-bob {
    0% { transform: translateY(-4vh); }
    100% { transform: translateY(5vh); }
}

/* left → right (16 s), pause off-screen, turn around, right → left (16 s), pause */
@keyframes sd-fly {
    0% { transform: translate(-105%, 0) scaleX(1); }
    38% { transform: translate(100vw, 8vh) scaleX(1); }
    50% { transform: translate(100vw, 8vh) scaleX(1); }
    50.01% { transform: translate(100vw, 14vh) scaleX(-1); }
    88% { transform: translate(-105%, 4vh) scaleX(-1); }
    100% { transform: translate(-105%, 0) scaleX(-1); }
}

@media (max-width: 768px) {
    .sky-dragon-flight {
        --sd-scale: 0.55;
        top: 30vh;
        animation-duration: 36s;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sky-dragon {
        display: none;
    }
}

/* ==========================================================================
   Clean footer: lots of dark empty space, round logo + wordmark on the left,
   a small tidy column on the right (social links in small bold capitals,
   phone, address, Galería) and a quiet bottom row (copyright + legal links).
   The thin roof-tile strip on top stays as the only Chinese touch.
   ========================================================================== */
.footer.footer-clean {
    padding: calc(28px + 4.5rem) max(72px, 7vw) 2.25rem;
    background: #070507;
    color: rgba(233, 220, 203, 0.78);
    text-align: left;
    font-size: 0.8rem;
    line-height: 1.6;
}

.footer-clean .footer-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "brand  info"
        "bottom bottom";
    column-gap: 4rem;
    row-gap: 5.5rem;
    max-width: 1440px;
    margin: 0 auto;
}

.footer-clean p,
.footer-clean ul {
    margin: 0;
    padding: 0;
}

.footer-clean ul {
    list-style: none;
}

.footer-clean a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-clean a:hover,
.footer-clean a:focus-visible {
    color: var(--cn-gold-light);
}

.footer-clean a:focus-visible,
.footer-clean button:focus-visible {
    outline: 2px solid var(--cn-gold-light);
    outline-offset: 3px;
}

/* ---- left: logo + wordmark + slim cash line ---- */
.footer-clean .footer-brand-block {
    grid-area: brand;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.6rem;
}

.footer-clean .footer-brand {
    display: inline-flex;
    align-items: center;
    gap: 16px;
}

.footer-clean .footer-emblem {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    overflow: hidden;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 40%, #3a0e10 0%, #12080a 72%);
    border: 1.5px solid rgba(242, 193, 78, 0.8);
    box-shadow: 0 0 0 3px #070507, 0 0 0 4px rgba(208, 22, 31, 0.7);
}

.footer-clean .footer-emblem img {
    width: 86%;
    height: auto;
}

.footer-clean .footer-wordmark {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
}

.footer-clean .footer-wordmark-name {
    font-family: var(--cn-font-display);
    font-size: 1.55rem;
    font-weight: 700;
    color: #f4e6cf;
    letter-spacing: 0.02em;
}

.footer-clean .footer-wordmark-sub {
    margin-top: 6px;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--cn-gold-light);
}

.footer-clean .footer-brand:hover .footer-wordmark-name,
.footer-clean .footer-brand:focus-visible .footer-wordmark-name {
    color: #ffffff;
}

.footer.footer-clean .cash-notice-footer {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    max-width: 420px;
    margin: 0;
    padding: 6px 14px 6px 6px;
    border-radius: 999px;
    border: 1px solid rgba(242, 193, 78, 0.45);
    background: rgba(47, 208, 122, 0.06);
    box-shadow: none;
    color: rgba(255, 246, 226, 0.88);
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1.4;
}

.footer.footer-clean .cash-notice-footer .cash-notice-icon {
    width: 24px;
    height: 24px;
    font-size: 0.8rem;
    box-shadow: 0 0 0 1px var(--cash-green-deep);
}

.footer.footer-clean .cash-notice-footer .cash-notice-pct {
    padding: 0 7px;
    box-shadow: none;
}

/* ---- right: small tidy column ---- */
.footer-clean .footer-info {
    grid-area: info;
    display: flex;
    flex-direction: column;
    gap: 1.9rem;
    min-width: 230px;
    max-width: 300px;
}

.footer-clean .footer-social {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.7rem;
    margin: 0;
}

.footer-clean .footer-social .social-link {
    width: auto;
    height: auto;
    gap: 10px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: #f4e6cf;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.footer-clean .footer-social .social-link svg {
    width: 15px;
    height: 15px;
    color: var(--cn-gold-light);
}

.footer-clean .footer-social .social-link:hover,
.footer-clean .footer-social .social-link:focus-visible {
    transform: none;
    border: 0;
    box-shadow: none;
    color: var(--cn-gold-light);
}

.footer-clean .footer-contact {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.footer-clean .footer-contact a {
    color: #f4e6cf;
}

.footer-clean .footer-contact a:hover,
.footer-clean .footer-contact a:focus-visible {
    color: var(--cn-gold-light);
}

.footer.footer-clean .footer-gallery {
    margin: 0.35rem 0 0;
}

.footer.footer-clean .footer-gallery-link {
    gap: 8px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: #ffc9e4;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.footer.footer-clean .footer-gallery-link:hover,
.footer.footer-clean .footer-gallery-link:focus-visible {
    background: none;
    box-shadow: none;
    color: #ffffff;
}

/* ---- bottom row: copyright + legal, small and quiet ---- */
.footer-clean .footer-bottom {
    grid-area: bottom;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: flex-end;
    column-gap: 3rem;
    row-gap: 0.6rem;
    padding-top: 1.4rem;
    border-top: 1px solid rgba(242, 193, 78, 0.14);
    font-size: 0.72rem;
    color: rgba(233, 220, 203, 0.55);
}

.footer.footer-clean .footer-legal {
    display: flex;
    flex-wrap: wrap;
    column-gap: 1.6rem;
    row-gap: 0.4rem;
    margin: 0;
    font-size: inherit;
}

.footer.footer-clean .footer-legal a,
.footer.footer-clean .footer-cookie-link,
.footer.footer-clean .footer-cancel-link {
    color: rgba(244, 230, 207, 0.85);
    font: inherit;
    text-decoration: underline;
    text-decoration-color: rgba(244, 230, 207, 0.3);
    text-underline-offset: 3px;
}

.footer.footer-clean .footer-legal a:hover,
.footer.footer-clean .footer-legal a:focus-visible,
.footer.footer-clean .footer-cookie-link:hover,
.footer.footer-clean .footer-cookie-link:focus-visible {
    color: var(--cn-gold-light);
    text-decoration-color: currentColor;
}

/* tablets: a little less air */
@media (max-width: 1024px) {
    .footer.footer-clean {
        padding-left: 72px;
        padding-right: 40px;
    }

    .footer-clean .footer-inner {
        column-gap: 2.5rem;
        row-gap: 4rem;
    }
}

/* phones: one neat column, left-aligned, generous gaps */
@media (max-width: 768px) {
    .footer.footer-clean {
        padding: calc(28px + 3rem) 24px 2rem;
    }

    .footer-clean .footer-inner {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "brand"
            "info"
            "bottom";
        row-gap: 2.75rem;
    }

    .footer-clean .footer-info {
        min-width: 0;
        max-width: none;
        gap: 1.6rem;
    }

    .footer-clean .footer-social {
        flex-direction: row;
        flex-wrap: wrap;
        column-gap: 1.6rem;
    }

    .footer.footer-clean .cash-notice-footer {
        max-width: 100%;
        border-radius: 14px;
    }

    .footer-clean .footer-bottom {
        flex-direction: column-reverse;
        align-items: flex-start;
        justify-content: flex-start;
        row-gap: 1rem;
    }
}

/* ==========================================================================
   Per-account table limits (script.js applyReservationLimit): when the account
   can't book the selected date, the send button turns grey and disabled and the
   table signs in the chart switch off (dim, no glow, can't be picked).
   ========================================================================== */
#reservationForm button[type="submit"].is-limit-blocked,
#reservationForm button[type="submit"].is-limit-blocked:hover,
#reservationForm button[type="submit"].is-limit-blocked:focus-visible {
    background: #4a4646;
    color: #bdb6b6;
    border-color: #676161;
    text-shadow: none;
    box-shadow: none;
    transform: none;
    filter: none;
    animation: none;
    cursor: not-allowed;
}

#reservationForm button[type="submit"].is-limit-blocked::before,
#reservationForm button[type="submit"].is-limit-blocked::after {
    display: none;
}

#reservationForm select:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.seating-chart-container.tables-off .vip-seat,
.seating-chart-container.tables-off .seat-circle,
.seating-chart-container.tables-off .seat-square,
.seating-chart-container.tables-off .vip-container .vip-seat {
    background: #1c1919;
    color: #6f6767;
    border: 1.5px solid #3b3434;
    text-shadow: none;
    filter: grayscale(1);
    opacity: 0.55;
    outline: none;
    transform: none;
    animation: none;
    box-shadow: inset 0 0 0 2px #1c1919, inset 0 0 0 3px rgba(255, 255, 255, 0.08);
    cursor: not-allowed;
    pointer-events: none;
    transition: opacity 0.3s, filter 0.3s, background 0.3s;
}

.seating-chart-container.tables-off .vip-label {
    color: #7d7470;
    text-shadow: none;
}

/* =====================================================================================
   iOS-style alert (barAlert in script.js), Chinesca lacquer + gold, neon edge
   ===================================================================================== */
.bar-alert-open,
.bar-alert-open body {
    overflow: hidden;
}

.bar-alert-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(5, 3, 6, 0.62);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    animation: bar-alert-fade 0.18s ease-out;
}

.bar-alert-backdrop.is-closing {
    opacity: 0;
    transition: opacity 0.15s ease-in;
}

.bar-alert {
    width: 280px;
    max-width: 100%;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: 14px;
    text-align: center;
    color: #fbeccb;
    background:
        var(--cn-lattice),
        linear-gradient(180deg, rgba(58, 20, 24, 0.97) 0%, rgba(22, 12, 14, 0.98) 100%);
    background-size: 60px 60px, 100% 100%;
    border: 1px solid rgba(212, 160, 23, 0.75);
    box-shadow: 0 0 0 3px rgba(176, 18, 27, 0.55), 0 0 26px rgba(255, 45, 149, 0.35), 0 18px 40px rgba(0, 0, 0, 0.6);
    animation: bar-alert-pop 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

.bar-alert:focus {
    outline: none;
}

.bar-alert-body {
    padding: 20px 16px 16px;
}

.bar-alert-title {
    margin: 0;
    font-family: var(--cn-font-display);
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.01em;
    text-transform: none;
    color: #fff4fa;
    text-shadow: 0 0 10px rgba(255, 45, 149, 0.55);
    overflow-wrap: anywhere;
}

.bar-alert-message {
    margin: 6px 0 0;
    font-size: 0.86rem;
    line-height: 1.4;
    color: #e9dccf;
    overflow-wrap: anywhere;
}

.bar-alert-details {
    margin: 12px 0 0;
    padding: 10px 10px 8px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.28);
    border: 1px dashed rgba(242, 193, 78, 0.45);
}

.bar-alert-detail {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.4;
    color: var(--cn-gold-light, #f2c14e);
    overflow-wrap: anywhere;
}

.bar-alert-detail.is-main {
    font-size: 1.12rem;
    font-weight: 700;
    color: #fff4fa;
}

.bar-alert-detail.is-small {
    margin-top: 4px;
    font-size: 0.78rem;
    color: #c9bacd;
}

.bar-alert-options {
    display: flex;
    flex-direction: column;
    border-top: 1px solid rgba(242, 193, 78, 0.3);
}

.bar-alert-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    width: 100%;
    min-height: 54px;
    padding: 9px 14px;
    margin: 0;
    border: 0;
    border-bottom: 1px solid rgba(242, 193, 78, 0.22);
    background: transparent;
    color: #fff4fa;
    font-family: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.bar-alert-option:last-child {
    border-bottom: 0;
}

.bar-alert-option-main {
    font-size: 1rem;
    font-weight: 700;
    color: #ff8fca;
}

.bar-alert-option-sub {
    font-size: 0.82rem;
    color: var(--cn-gold-light, #f2c14e);
}

.bar-alert-buttons {
    display: flex;
    flex-direction: column;
    border-top: 1px solid rgba(242, 193, 78, 0.3);
}

.bar-alert-buttons.is-row {
    flex-direction: row;
}

.bar-alert-btn {
    flex: 1 1 0;
    min-width: 0;
    min-height: 46px;
    margin: 0;
    padding: 10px 8px;
    border: 0;
    background: transparent;
    color: var(--cn-gold-light, #f2c14e);
    font-family: inherit;
    font-size: 1.02rem;
    line-height: 1.2;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.bar-alert-buttons:not(.is-row) .bar-alert-btn + .bar-alert-btn {
    border-top: 1px solid rgba(242, 193, 78, 0.3);
}

.bar-alert-buttons.is-row .bar-alert-btn + .bar-alert-btn {
    border-left: 1px solid rgba(242, 193, 78, 0.3);
}

.bar-alert-btn.is-cancel {
    font-weight: 700;
}

.bar-alert-btn.is-destructive {
    color: #ff5a64;
    font-weight: 700;
}

.bar-alert-btn:hover,
.bar-alert-option:hover,
.bar-alert-btn:active,
.bar-alert-option:active {
    background: rgba(255, 255, 255, 0.08);
}

.bar-alert-btn:focus-visible,
.bar-alert-option:focus-visible {
    outline: 2px solid var(--cn-gold-light, #f2c14e);
    outline-offset: -3px;
}

@keyframes bar-alert-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes bar-alert-pop {
    from { opacity: 0; transform: scale(1.12); }
    to { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .bar-alert-backdrop,
    .bar-alert {
        animation: none;
    }
}

/* =====================================================================================
   Avatar menu: tap your picture -> "Mi perfil" / "Salir"
   ===================================================================================== */
.profile-icon[aria-haspopup] {
    cursor: pointer;
}

.profile-icon[aria-expanded="true"] {
    background: var(--cn-red);
    box-shadow: 0 0 0 2px var(--cn-gold-light, #f2c14e), 0 0 14px rgba(255, 45, 149, 0.55);
}

.profile-user-photo[role="button"] {
    cursor: pointer;
    border: 2px solid rgba(212, 160, 23, 0.8);
    box-shadow: 0 0 12px rgba(255, 45, 149, 0.35);
    transition: transform 0.15s;
}

.profile-user-photo[role="button"]:hover,
.profile-user-photo[aria-expanded="true"] {
    transform: scale(1.05);
}

.avatar-menu {
    position: fixed;
    z-index: 10040;
    box-sizing: border-box;
    padding: 6px 0;
    border-radius: 12px;
    color: #fbeccb;
    background: linear-gradient(180deg, rgba(58, 20, 24, 0.98) 0%, rgba(18, 10, 12, 0.98) 100%);
    border: 1px solid rgba(212, 160, 23, 0.75);
    box-shadow: 0 0 0 2px rgba(176, 18, 27, 0.5), 0 0 22px rgba(255, 45, 149, 0.3), 0 14px 30px rgba(0, 0, 0, 0.6);
    animation: avatar-menu-in 0.16s ease-out;
    transform-origin: var(--tip-x, 90%) 0;
}

.avatar-menu[hidden] {
    display: none;
}

.avatar-menu::before {
    content: '';
    position: absolute;
    top: -7px;
    left: calc(var(--tip-x, 200px) - 6px);
    width: 12px;
    height: 12px;
    background: rgba(58, 20, 24, 0.98);
    border-left: 1px solid rgba(212, 160, 23, 0.75);
    border-top: 1px solid rgba(212, 160, 23, 0.75);
    transform: rotate(45deg);
}

.avatar-menu-head {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 6px 14px 9px;
    border-bottom: 1px solid rgba(242, 193, 78, 0.28);
}

.avatar-menu-name {
    font-weight: 700;
    font-size: 0.95rem;
    color: #fff4fa;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.avatar-menu-email {
    font-size: 0.78rem;
    color: #c9bacd;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.avatar-menu-item {
    display: block;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 11px 14px;
    border: 0;
    background: transparent;
    text-align: left;
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.2;
    color: var(--cn-gold-light, #f2c14e);
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.avatar-menu-item + .avatar-menu-item {
    border-top: 1px solid rgba(242, 193, 78, 0.18);
}

.avatar-menu-item.is-danger {
    color: #ff6f78;
    font-weight: 700;
}

.avatar-menu-item:hover,
.avatar-menu-item:focus-visible {
    background: rgba(255, 255, 255, 0.08);
    outline: none;
    color: #fff4fa;
}

.avatar-menu-item:disabled {
    opacity: 0.6;
    cursor: default;
}

@keyframes avatar-menu-in {
    from { opacity: 0; transform: translateY(-4px) scale(0.96); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .avatar-menu {
        animation: none;
    }
}

/* =====================================================================================
   Profile: tabs "Mis reservaciones | Registros" and compact Registros grouped by date
   ===================================================================================== */
.profile-tabs {
    display: flex;
    gap: 4px;
    width: fit-content;
    max-width: 100%;
    margin: 1.6rem auto 0;
    padding: 4px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(212, 160, 23, 0.55);
    box-shadow: 0 0 14px rgba(255, 45, 149, 0.15);
}

.profile-tab {
    flex: 0 1 auto;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 16px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #e9dccf;
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.2s, color 0.2s;
}

.profile-tab:hover {
    color: #fff4fa;
}

.profile-tab.is-active {
    color: #fff4fa;
    background: linear-gradient(180deg, var(--cn-red, #b0121b) 0%, var(--cn-red-dark, #8b0000) 100%);
    box-shadow: inset 0 0 0 1px rgba(242, 193, 78, 0.7), 0 0 10px rgba(255, 45, 149, 0.35);
}

.profile-tab:focus-visible {
    outline: 2px solid var(--cn-gold-light, #f2c14e);
    outline-offset: 2px;
}

.profile-tab-count {
    display: inline-block;
    min-width: 1.35em;
    padding: 0 5px;
    border-radius: 999px;
    font-size: 0.72rem;
    line-height: 1.35em;
    font-weight: 700;
    color: #0d0a0a;
    background: var(--cn-gold-light, #f2c14e);
}

.profile-tab-count[hidden] {
    display: none;
}

.profile-panel[hidden] {
    display: none;
}

#panelActive .reservations-list {
    margin-top: 1.2rem;
}

/* Registros is a tab now: no separator line, smaller everything */
.profile-past {
    margin-top: 1.2rem;
    padding-top: 0;
    border-top: 0;
}

.profile-past-title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.profile-past-empty {
    margin: 1.4rem auto;
    max-width: 30rem;
    text-align: center;
    font-size: 0.92rem;
    color: #c9bacd;
}

.profile-past-empty[hidden] {
    display: none;
}

#pastTablesList {
    max-width: 640px;
    margin: 0 auto;
}

.profile-past-day + .profile-past-day {
    margin-top: 1.1rem;
}

.profile-past-date {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 0.5rem;
    font-family: var(--cn-font-display);
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--cn-gold-light, #f2c14e);
    text-transform: none;
}

.profile-past-date::after {
    content: '';
    flex: 1 1 auto;
    min-width: 12px;
    height: 1px;
    background: linear-gradient(90deg, rgba(242, 193, 78, 0.5), rgba(242, 193, 78, 0));
}

.profile-past-cards {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.reservation-card.profile-card-past {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem 0.75rem;
    padding: 0.65rem 0.85rem;
    text-align: left;
    border-top-width: 1px;
    opacity: 0.95;
}

.profile-past-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 1px;
}

.profile-card-past .profile-card-table {
    font-size: 1rem;
    font-weight: 700;
    color: #fff4fa;
}

.profile-past-line {
    font-size: 1rem;
    line-height: 1.3;
}

.profile-past-time {
    font-weight: 700;
    color: var(--cn-gold-light, #f2c14e);
}

.profile-past-meta {
    font-size: 0.8rem;
    line-height: 1.3;
    color: var(--club-muted, #c9bacd);
}

.profile-card-past .profile-card-order {
    font-size: inherit;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: #ff8fca;
}

.profile-card-past .profile-card-badge {
    margin-top: 0;
    align-self: center;
    padding: 0.2rem 0.6rem;
    font-size: 0.78rem;
    white-space: nowrap;
}

/* =====================================================================================
   /cancel: automatic list of the guest's active reservations
   ===================================================================================== */
.cancellation-form.cancel-auto {
    max-width: 460px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.cancel-state[hidden] {
    display: none;
}

.cancellation-form.cancel-auto .cancel-state h3 {
    margin: 0.3rem 0 0.5rem;
    font-size: 1.05rem;
    line-height: 1.3;
    letter-spacing: 0.04em;
}

.cancel-state-icon {
    display: block;
    font-size: 2rem;
    line-height: 1;
    margin-bottom: 0.4rem;
}

.cancel-state-text {
    margin: 0 0 1.1rem;
    font-size: 0.95rem;
    line-height: 1.45;
    color: var(--club-muted, #c9bacd);
}

.cancel-state .btn {
    display: inline-block;
    max-width: 100%;
}

.cancel-spinner {
    display: inline-block;
    width: 28px;
    height: 28px;
    margin-bottom: 0.5rem;
    border-radius: 50%;
    border: 3px solid rgba(242, 193, 78, 0.25);
    border-top-color: var(--cn-gold-light, #f2c14e);
    animation: cancel-spin 0.9s linear infinite;
}

@keyframes cancel-spin {
    to { transform: rotate(360deg); }
}

.cancel-done-note {
    margin: 0 0 0.8rem;
    padding: 0.45rem 0.7rem;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 700;
    color: #0d0a0a;
    background: #2fd07a;
}

.cancel-done-note[hidden] {
    display: none;
}

.cancel-items {
    list-style: none;
    margin: 0.6rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    text-align: left;
}

.cancel-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.7rem 0.8rem;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(212, 160, 23, 0.5);
}

.cancel-item.is-busy {
    opacity: 0.5;
}

.cancel-item-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 1px;
}

.cancel-item-table {
    font-weight: 700;
    font-size: 1.02rem;
    color: #fff4fa;
}

.cancel-item-date {
    font-size: 0.86rem;
    color: var(--cn-gold-light, #f2c14e);
    overflow-wrap: anywhere;
}

.cancel-item-time {
    font-size: 0.86rem;
    color: var(--club-muted, #c9bacd);
}

.cancel-item-btn {
    flex: 0 0 auto;
    padding: 0.45rem 0.8rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 90, 100, 0.8);
    background: rgba(176, 18, 27, 0.35);
    color: #ffd9dc;
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
}

.cancel-item-btn:hover {
    background: var(--cn-red, #b0121b);
    color: #fff;
}

@media (max-width: 480px) {
    .cancellation-form.cancel-auto {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

@media (max-width: 360px) {
    .profile-tab {
        padding: 6px 11px;
        font-size: 0.85rem;
    }

    .cancel-item {
        padding: 0.6rem 0.65rem;
    }

    .cancel-item-btn {
        padding: 0.4rem 0.65rem;
    }
}