/* ===========================================
   WEDDING INVITE THEME - CHARTREUSE & CONFETTI
   =========================================== */

/* Custom Font Faces */
@font-face {
    font-family: 'Lavonia';
    src: url('../fonts/ED-Lavonia-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Radio';
    src: url('../fonts/Radio.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* CSS Custom Properties - Color System */
:root {
    --cream: #B8B43C;
    --espresso: #3A3818;
    --terracotta: #E07BA0;
    --rust: #D06890;
    --mustard: #E8C050;
    --olive: #5A6E30;
    --blush: #F0EAD8;
    --slate: #8B90C8;
    --cobalt: #7080C0;
    --sand: #9A9840;
    --rose: #DC4858;

    /* Typography */
    --font-heading: 'Lavonia', 'Lilita One', sans-serif;
    --font-body: Georgia, 'Times New Roman', serif;

    /* Spacing */
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2rem;
    --space-xl: 3rem;

    /* Border radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
}

/* Confetti background */
body {
    background-color: var(--cream);
    background-image: url("data:image/svg+xml,%3Csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='20' cy='30' r='2' fill='%23E07BA0' opacity='0.5'/%3E%3Ccircle cx='80' cy='15' r='1.5' fill='%238B90C8' opacity='0.4'/%3E%3Ccircle cx='150' cy='50' r='2' fill='%23E8C050' opacity='0.5'/%3E%3Ccircle cx='40' cy='90' r='1.5' fill='%237080C0' opacity='0.4'/%3E%3Ccircle cx='120' cy='120' r='2' fill='%23E07BA0' opacity='0.5'/%3E%3Ccircle cx='170' cy='160' r='1.5' fill='%23E8C050' opacity='0.4'/%3E%3Ccircle cx='60' cy='170' r='2' fill='%238B90C8' opacity='0.5'/%3E%3Ccircle cx='100' cy='80' r='1.5' fill='%23E07BA0' opacity='0.3'/%3E%3C/svg%3E");
    background-blend-mode: normal;
    color: var(--espresso);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    margin: 0;
    padding: var(--space-md);
    min-height: 100vh;
}

/* Main container - centered content column */
.main-container {
    max-width: 900px;
    margin: 0 auto;
    background-color: rgba(255, 255, 255, 0.75);
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 24px rgba(58, 56, 24, 0.12);
    overflow: hidden;
}

/* Header section */
.header {
    background-color: var(--cream);
    padding: var(--space-xl) var(--space-md);
    text-align: center;
    position: relative;
}

/* Decorative confetti accent strip at top */
.header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg,
        var(--terracotta) 0%,
        var(--terracotta) 25%,
        var(--mustard) 25%,
        var(--mustard) 50%,
        var(--slate) 50%,
        var(--slate) 75%,
        var(--cobalt) 75%,
        var(--cobalt) 100%
    );
}

.header h1 {
    font-family: var(--font-heading);
    color: #ffffff;
    font-size: 3rem;
    font-weight: 400;
    margin: 0 0 var(--space-xs) 0;
    letter-spacing: 0.02em;
    text-shadow: 2px 2px 4px rgba(58, 56, 24, 0.3);
}

.header .subtitle,
.header p {
    font-family: var(--font-body);
    color: #ffffff;
    font-size: 1.1rem;
    margin: 0;
    font-weight: 500;
    text-shadow: 1px 1px 2px rgba(58, 56, 24, 0.2);
}

/* Navigation bar */
.navbar {
    background-color: var(--cream);
    padding: var(--space-sm) var(--space-md);
    text-align: center;
    border-top: none;
    border-bottom: none;
}

.navbar a {
    color: #ffffff;
    text-decoration: none;
    padding: var(--space-xs) var(--space-sm);
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: inline-block;
    transition: color 0.2s ease, opacity 0.2s ease;
    position: relative;
}

.navbar a:hover {
    color: var(--mustard);
}

.navbar a:visited {
    color: #ffffff;
}

.navbar a.active {
    color: var(--mustard);
}

.navbar a.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: var(--space-xs);
    right: var(--space-xs);
    height: 2px;
    background-color: var(--mustard);
    border-radius: 2px;
}

/* Nav separator */
.navbar .nav-separator {
    color: rgba(255, 255, 255, 0.5);
    margin: 0 var(--space-xs);
}

/* Content area */
.content {
    background-color: rgba(255, 255, 255, 0.85);
    padding: var(--space-xl) var(--space-lg);
    color: var(--espresso);
}

.content h2 {
    font-family: var(--font-heading);
    color: var(--olive);
    font-size: 2rem;
    font-weight: 400;
    margin: 0 0 var(--space-md) 0;
    padding-bottom: var(--space-sm);
    border-bottom: 2px solid var(--terracotta);
}

.content h3 {
    font-family: var(--font-heading);
    color: var(--terracotta);
    font-size: 1.5rem;
    font-weight: 400;
    margin: var(--space-lg) 0 var(--space-sm) 0;
}

.content p {
    line-height: 1.7;
    margin-bottom: var(--space-md);
}

/* Links */
.content a {
    color: var(--cobalt);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.2s ease;
}

.content a:hover {
    color: var(--terracotta);
}

/* Announcement banner */
.announcement {
    background-color: var(--terracotta);
    color: #ffffff;
    padding: var(--space-sm) var(--space-md);
    text-align: center;
    font-weight: 600;
    border-radius: var(--radius-sm);
    margin: var(--space-md);
}

/* Hide marquee by default (Madeline's theme) */
.marquee-container {
    display: none;
}

/* Visitor counter */
.visitor-counter {
    background-color: var(--olive);
    color: #ffffff;
    font-family: var(--font-body);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    display: inline-block;
    font-size: 0.85rem;
    margin-top: var(--space-sm);
}

/* Buttons */
.btn {
    background-color: var(--terracotta);
    border: none;
    border-radius: var(--radius-md);
    padding: var(--space-sm) var(--space-lg);
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    color: #ffffff;
    text-decoration: none;
    display: inline-block;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(224, 123, 160, 0.3);
}

.btn:hover {
    background-color: var(--rust);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(224, 123, 160, 0.4);
}

.btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(224, 123, 160, 0.25);
}

.btn-primary,
a.btn-primary,
.content a.btn-primary {
    background-color: var(--terracotta);
    color: #ffffff !important;
    text-decoration: none;
}

.btn-primary:hover,
a.btn-primary:hover,
.content a.btn-primary:hover {
    background-color: var(--rust);
    color: #ffffff !important;
}

.btn-secondary,
a.btn-secondary,
.content a.btn-secondary {
    background-color: var(--olive);
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(90, 110, 48, 0.3);
    text-decoration: none;
}

.btn-secondary:hover,
a.btn-secondary:hover,
.content a.btn-secondary:hover {
    background-color: #4A5E22;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(90, 110, 48, 0.4);
}

.btn-tertiary,
a.btn-tertiary,
.content a.btn-tertiary {
    background-color: var(--mustard);
    color: var(--espresso) !important;
    box-shadow: 0 2px 8px rgba(232, 192, 80, 0.3);
    text-decoration: none;
}

.btn-tertiary:hover,
a.btn-tertiary:hover,
.content a.btn-tertiary:hover {
    background-color: #D4AE40;
    color: var(--espresso) !important;
    box-shadow: 0 4px 12px rgba(232, 192, 80, 0.4);
}

.btn-cobalt,
a.btn-cobalt,
.content a.btn-cobalt {
    background-color: var(--cobalt);
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(112, 128, 192, 0.3);
    text-decoration: none;
}

.btn-cobalt:hover,
a.btn-cobalt:hover,
.content a.btn-cobalt:hover {
    background-color: #5E70B0;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(112, 128, 192, 0.4);
}

/* Airbnb brand button */
.btn-airbnb,
a.btn-airbnb,
.content a.btn-airbnb {
    background-color: #FF5A5F;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(255, 90, 95, 0.3);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-airbnb:hover,
a.btn-airbnb:hover,
.content a.btn-airbnb:hover {
    background-color: #e04e52;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(255, 90, 95, 0.4);
}

.btn-airbnb svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

/* VRBO brand button */
.btn-vrbo,
a.btn-vrbo,
.content a.btn-vrbo {
    background-color: #0065e3;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(0, 101, 227, 0.3);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-vrbo:hover,
a.btn-vrbo:hover,
.content a.btn-vrbo:hover {
    background-color: #0052b8;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(0, 101, 227, 0.4);
}

.btn-vrbo svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

/* Form styling */
.retro-form {
    background-color: rgba(240, 234, 216, 0.5);
    border: 1px solid rgba(90, 110, 48, 0.15);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    margin: var(--space-md) 0;
}

.form-group {
    margin-bottom: var(--space-md);
}

.form-group label {
    display: block;
    font-weight: 600;
    color: var(--espresso);
    margin-bottom: var(--space-xs);
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="number"],
.form-group input[type="tel"],
.form-group textarea,
.form-group select {
    width: 100%;
    padding: var(--space-sm);
    border: 1px solid var(--sand);
    border-radius: var(--radius-sm);
    background-color: rgba(255, 255, 255, 0.8);
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--espresso);
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--terracotta);
    box-shadow: 0 0 0 3px rgba(224, 123, 160, 0.2);
}

.form-group textarea {
    min-height: 100px;
    resize: vertical;
}

.form-group small {
    color: var(--slate);
    font-size: 0.85rem;
    display: block;
    margin-top: var(--space-xs);
}

/* Contact required note */
.contact-required-note {
    text-align: center;
    margin-bottom: var(--space-md);
    padding: var(--space-xs) var(--space-sm);
    background-color: rgba(232, 192, 80, 0.15);
    border-radius: var(--radius-sm);
}

.contact-required-note small {
    color: var(--olive);
    font-weight: 500;
}

.theme-retro .contact-required-note {
    background-color: #ffffcc;
    border: 1px solid #808080;
    border-radius: 0;
}

.theme-retro .contact-required-note small {
    color: #000080;
}

/* Checkbox styling */
.form-group input[type="checkbox"] {
    width: auto;
    margin-right: var(--space-xs);
    accent-color: var(--terracotta);
}

/* Radio buttons */
.radio-group {
    margin: var(--space-sm) 0;
}

.radio-group label {
    display: inline-flex;
    align-items: center;
    margin-right: var(--space-md);
    font-weight: 400;
    cursor: pointer;
}

.radio-group input[type="radio"] {
    margin-right: var(--space-xs);
    accent-color: var(--terracotta);
}

/* Flash messages */
.flash-error {
    background-color: rgba(220, 72, 88, 0.15);
    color: var(--rose);
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--rose);
    border-radius: var(--radius-sm);
    margin: var(--space-sm) var(--space-md);
    font-weight: 500;
}

.flash-success {
    background-color: rgba(65, 79, 52, 0.15);
    color: var(--olive);
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--olive);
    border-radius: var(--radius-sm);
    margin: var(--space-sm) var(--space-md);
    font-weight: 500;
}

/* Validation errors */
.validation-errors {
    background-color: rgba(220, 72, 88, 0.15);
    color: var(--rose);
    padding: var(--space-sm) var(--space-md);
    border: 2px solid var(--rose);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-md);
    font-weight: 500;
}

.validation-errors ul {
    margin: var(--space-xs) 0 0 0;
    padding-left: var(--space-md);
}

.validation-errors li {
    margin-bottom: var(--space-xs);
}

.field-error {
    outline: 2px solid var(--rose) !important;
    outline-offset: 2px;
}

.field-error .rsvp-options {
    outline: 2px solid var(--rose);
    outline-offset: 4px;
    border-radius: var(--radius-sm);
}

/* Footer */
.footer {
    background-color: var(--cream);
    color: #ffffff;
    text-align: center;
    padding: var(--space-lg) var(--space-md);
    font-size: 0.9rem;
    border-top: none;
}

.footer p {
    margin: var(--space-xs) 0;
    color: #ffffff;
}

.footer a {
    color: var(--mustard);
    text-decoration: underline;
    transition: color 0.2s ease;
}

.footer a:hover {
    color: #ffffff;
}

/* Section divider - confetti style */
hr.fancy,
.section-divider {
    border: none;
    height: 3px;
    background: linear-gradient(90deg,
        var(--terracotta) 0%,
        var(--mustard) 33%,
        var(--slate) 66%,
        var(--cobalt) 100%
    );
    margin: var(--space-lg) 0;
    opacity: 0.7;
    border-radius: 2px;
}

/* Alternative thin line divider */
hr {
    border: none;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--terracotta) 30%,
        var(--terracotta) 70%,
        transparent 100%
    );
    margin: var(--space-lg) 0;
    opacity: 0.4;
}

/* Sparkle divider */
.sparkle-divider {
    text-align: center;
    font-size: 1.2rem;
    margin: var(--space-lg) 0;
    color: var(--terracotta);
    letter-spacing: 0.5em;
}

/* RSVP specific styling */
.rsvp-options {
    display: flex;
    gap: var(--space-md);
    margin: var(--space-md) 0;
    flex-wrap: wrap;
}

.rsvp-option {
    flex: 1;
    min-width: 150px;
    text-align: center;
    padding: var(--space-md);
    border: 2px solid var(--sand);
    border-radius: var(--radius-md);
    background-color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: all 0.2s ease;
}

.rsvp-option:hover {
    border-color: var(--terracotta);
    background-color: rgba(224, 123, 160, 0.1);
}

.rsvp-option.selected {
    border-color: var(--terracotta);
    background-color: rgba(224, 123, 160, 0.15);
    box-shadow: 0 2px 8px rgba(224, 123, 160, 0.2);
}

.rsvp-option input[type="radio"] {
    display: none;
}

.rsvp-option-title {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--espresso);
    margin-bottom: var(--space-xs);
}

.rsvp-option-subtitle {
    font-size: 0.9rem;
}

.rsvp-option-subtitle.accept {
    color: var(--olive);
}

.rsvp-option-subtitle.decline {
    color: var(--rose);
}

.rsvp-option-subtitle.maybe {
    color: var(--mustard);
}

/* Checkbox group styling */
.checkbox-group {
    text-align: left;
    max-width: 400px;
    margin: var(--space-sm) auto;
}

.checkbox-label {
    display: block;
    margin: var(--space-sm) 0;
    cursor: pointer;
    font-weight: 400;
}

/* Guest checkboxes */
.guest-checkboxes {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin-top: var(--space-sm);
}

.guest-checkbox {
    display: flex;
    align-items: center;
    padding: var(--space-sm);
    background-color: rgba(255, 255, 255, 0.5);
    border: 1px solid var(--sand);
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
}

.guest-checkbox:hover {
    background-color: rgba(224, 123, 160, 0.1);
    border-color: var(--terracotta);
}

.guest-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-right: var(--space-sm);
}

.guest-checkbox input[type="checkbox"]:checked + span,
.guest-checkbox input[type="checkbox"]:checked ~ * {
    font-weight: 500;
}

/* Retro theme guest checkboxes */
.theme-retro .guest-checkbox {
    background-color: #e0e0e0;
    border: 2px inset #808080;
    border-radius: 0;
}

.theme-retro .guest-checkbox:hover {
    background-color: #d0d0d0;
}

/* Guest names container for plus-ones and kids */
.guest-names-container {
    margin-top: var(--space-sm);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.name-input-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm);
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: var(--radius-sm);
}

.name-input-row label {
    min-width: 120px;
    margin-bottom: 0;
    font-weight: 500;
}

.guest-name-input {
    flex: 1;
    min-width: 200px;
}

/* Retro theme name inputs */
.theme-retro .name-input-row {
    background-color: #e0e0e0;
    border: 1px solid #808080;
    border-radius: 0;
}

.theme-retro .name-input-row label {
    color: #000080;
}

/* Dietary restriction rows */
.dietary-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
    padding: var(--space-sm);
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: var(--radius-sm);
}

.dietary-row label {
    min-width: 120px;
    margin-bottom: 0;
    font-weight: 500;
}

.dietary-row select {
    flex: 1;
    min-width: 150px;
}

.dietary-row .other-input {
    flex-basis: 100%;
    margin-top: var(--space-xs);
}

#adult-dietary-container,
#kid-dietary-container {
    margin-top: var(--space-sm);
}

#kid-dietary-container:not(:empty)::before {
    content: "Children:";
    display: block;
    font-weight: 600;
    margin-top: var(--space-md);
    margin-bottom: var(--space-sm);
    color: var(--olive);
}

/* Event attendance section */
#events-section {
    margin-top: var(--space-md);
}

.event-header {
    margin-top: var(--space-sm);
    margin-bottom: var(--space-xs);
}

.event-header-row,
.event-row {
    display: grid;
    grid-template-columns: 1fr repeat(3, 80px);
    gap: var(--space-sm);
    align-items: center;
    padding: var(--space-sm);
}

.event-header-row {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--olive);
    background-color: rgba(90, 110, 48, 0.12);
    border-radius: var(--radius-sm);
}

.event-row {
    background-color: rgba(255, 255, 255, 0.5);
    border: 1px solid var(--sand);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-xs);
}

.event-row:hover {
    background-color: rgba(224, 123, 160, 0.1);
    border-color: var(--terracotta);
}

.event-name-col {
    font-weight: 500;
    text-align: left;
}

.event-col {
    text-align: center;
}

.event-col small {
    display: block;
    font-size: 0.7rem;
    color: var(--slate);
    margin-top: 2px;
}

.event-checkbox {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: var(--terracotta);
}

.sync-events-row {
    margin-top: var(--space-sm);
    padding: var(--space-sm);
    background-color: rgba(232, 192, 80, 0.12);
    border-radius: var(--radius-sm);
}

.sync-events-row label {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    cursor: pointer;
    font-weight: 400;
    margin: 0;
}

.sync-events-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
}

/* Responsive adjustments for event grid */
@media (max-width: 500px) {
    .event-header-row,
    .event-row {
        grid-template-columns: 1fr repeat(3, 60px);
        gap: var(--space-xs);
        padding: var(--space-xs);
    }

    .event-col small {
        font-size: 0.6rem;
    }

    .event-header-row {
        font-size: 0.75rem;
    }
}

/* Retro theme dietary rows */
.theme-retro .dietary-row {
    background-color: #e0e0e0;
    border: 1px solid #808080;
    border-radius: 0;
}

.theme-retro .dietary-row label {
    color: #000080;
}

.theme-retro #kid-dietary-container:not(:empty)::before {
    color: #008080;
}

/* Retro theme event attendance */
.theme-retro .event-header-row {
    background-color: #000080;
    color: #ffff00;
    border-radius: 0;
}

.theme-retro .event-row {
    background-color: #e0e0e0;
    border: 1px solid #808080;
    border-radius: 0;
}

.theme-retro .event-row:hover {
    background-color: #d0d0d0;
}

.theme-retro .event-col small {
    color: #808080;
}

.theme-retro .sync-events-row {
    background-color: #ffffcc;
    border: 1px solid #808080;
    border-radius: 0;
}

/* Cabin accommodation section */
.cabin-header-row,
.cabin-row {
    grid-template-columns: 1fr repeat(3, 60px) 100px;
}

.cabin-bedding-col {
    text-align: center;
    font-size: 0.85rem;
}

.cabin-bedding-select {
    width: 100%;
    padding: 4px;
    font-size: 0.75rem;
    border: 1px solid var(--sand);
    border-radius: var(--radius-sm);
    background-color: white;
}

.cabin-info-note {
    background-color: rgba(232, 192, 80, 0.15);
    border-left: 3px solid var(--mustard);
    padding: var(--space-sm);
    margin: var(--space-sm) 0;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.cabin-info-note small {
    color: var(--espresso);
    line-height: 1.4;
}

.cabin-preferences-section {
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px dashed var(--sand);
}

/* Responsive adjustments for cabin grid */
@media (max-width: 500px) {
    .cabin-header-row,
    .cabin-row {
        grid-template-columns: 1fr repeat(3, 45px) 80px;
        gap: var(--space-xs);
    }

    .cabin-bedding-select {
        font-size: 0.65rem;
        padding: 2px;
    }
}

/* Retro theme cabin styles */
.theme-retro .cabin-info-note {
    background-color: #ffffcc;
    border-left: 3px solid #ff8000;
    border-radius: 0;
}

.theme-retro .cabin-bedding-select {
    border-radius: 0;
    border: 1px solid #808080;
}

/* Cabin cost summary */
.cabin-cost-summary {
    background-color: rgba(90, 110, 48, 0.12);
    border: 1px solid var(--olive);
    border-radius: var(--radius-sm);
    padding: var(--space-sm);
    margin-top: var(--space-sm);
    text-align: center;
}

.cabin-cost-summary strong {
    color: var(--olive);
}

.cabin-cost-summary #cabin-cost-amount {
    font-size: 1.2em;
    font-weight: 700;
    color: var(--terracotta);
}

.cabin-cost-summary small {
    display: block;
    margin-top: 4px;
    color: var(--slate);
}

.theme-retro .cabin-cost-summary {
    background-color: #ccffcc;
    border: 2px solid #008000;
    border-radius: 0;
}

.theme-retro .cabin-cost-summary #cabin-cost-amount {
    color: #008000;
}

/* Admin table */
.admin-table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--space-md) 0;
    font-size: 0.9rem;
}

.admin-table th,
.admin-table td {
    border: 1px solid var(--sand);
    padding: var(--space-sm);
    text-align: left;
}

.admin-table th {
    background-color: var(--olive);
    color: var(--cream);
    font-weight: 600;
}

.admin-table tr:nth-child(even) {
    background-color: rgba(240, 234, 216, 0.5);
}

.admin-table tr:hover {
    background-color: rgba(224, 123, 160, 0.1);
}

/* Stats boxes */
.stats-container {
    display: flex;
    gap: var(--space-md);
    margin: var(--space-lg) 0;
    flex-wrap: wrap;
}

.stat-box {
    flex: 1;
    min-width: 120px;
    background-color: var(--cream);
    color: #ffffff;
    padding: var(--space-md);
    text-align: center;
    border-radius: var(--radius-md);
    box-shadow: 0 2px 8px rgba(58, 56, 24, 0.15);
}

.stat-box .number {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    font-weight: 400;
    color: #ffffff;
}

.stat-box .label {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.85);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Login page specific */
.login-container {
    max-width: 400px;
    margin: var(--space-xl) auto;
}

.login-box {
    background-color: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(90, 110, 48, 0.15);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    box-shadow: 0 4px 16px rgba(58, 56, 24, 0.1);
}

.login-box h2 {
    text-align: center;
    color: var(--olive);
    margin-bottom: var(--space-lg);
    font-family: var(--font-heading);
}

/* Card/Panel component */
.card {
    background-color: rgba(240, 234, 216, 0.5);
    border: 1px solid rgba(90, 110, 48, 0.12);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    margin: var(--space-md) 0;
    box-shadow: 0 2px 8px rgba(58, 56, 24, 0.06);
}

.card-highlight {
    background-color: rgba(232, 192, 80, 0.15);
    border-color: var(--mustard);
}

/* Best viewed badge - updated for warmth */
.best-viewed {
    text-align: center;
    padding: var(--space-md);
    font-size: 0.85rem;
    color: var(--slate);
}

/* Construction placeholder - updated */
.construction {
    text-align: center;
    padding: var(--space-lg);
    color: var(--slate);
}

/* Center helper */
.center {
    text-align: center;
}

/* Utility: no blinking text */
.blink {
    animation: none;
    color: var(--terracotta);
    font-weight: 600;
}

/* Image styling - soft, warm */
img {
    border-radius: var(--radius-sm);
    max-width: 100%;
    height: auto;
}

img.no-border {
    border: none;
}

/* Email link styling */
a[href^="mailto:"] {
    color: var(--cobalt);
    font-weight: 500;
}

/* Quick links section */
.quick-links {
    display: flex;
    justify-content: center;
    gap: var(--space-md);
    flex-wrap: wrap;
    margin: var(--space-lg) 0;
}

.quick-links a {
    color: var(--cobalt);
    text-decoration: none;
    padding: var(--space-xs) var(--space-sm);
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease;
}

.quick-links a:hover {
    color: var(--terracotta);
    border-bottom-color: var(--mustard);
}

/* Decorative color blocks (inspired by painted grid) */
.color-accent {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    margin-right: var(--space-xs);
}

.color-accent--terracotta { background-color: var(--terracotta); }
.color-accent--mustard { background-color: var(--mustard); }
.color-accent--olive { background-color: var(--olive); }
.color-accent--cobalt { background-color: var(--cobalt); }

/* Info box - for notes, warnings */
.info-box {
    background-color: rgba(232, 192, 80, 0.12);
    border: 1px solid var(--mustard);
    border-radius: var(--radius-sm);
    padding: var(--space-md);
    margin: var(--space-md) auto;
    max-width: 500px;
}

.info-box p {
    margin: 0;
    text-align: center;
}

/* Invitation display box */
.invitation-box {
    border: 2px solid var(--terracotta);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    background-color: rgba(255, 255, 255, 0.7);
    max-width: 500px;
    margin: 0 auto var(--space-md) auto;
}

.invitation-box h3 {
    color: var(--espresso);
    margin-top: 0;
    font-family: var(--font-heading);
}

/* Plus ones info */
.plus-ones-info {
    color: var(--olive);
    font-size: 0.95rem;
}

/* Webring replacement - simple footer decoration */
.webring {
    display: none;
}

/* Guest list item styling */
.guest-list {
    font-size: 1.2rem;
    color: var(--espresso);
    font-weight: 500;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    body {
        padding: var(--space-sm);
    }

    .header h1 {
        font-size: 2.2rem;
    }

    .navbar a {
        padding: var(--space-xs);
        font-size: 0.8rem;
    }

    .content {
        padding: var(--space-md);
    }

    .rsvp-options {
        flex-direction: column;
    }

    .stats-container {
        flex-direction: column;
    }
}

/* Details table */
.details-table {
    margin: 0 auto;
    text-align: left;
}

.details-table td {
    padding: var(--space-xs) var(--space-sm);
}

.details-table td:first-child {
    color: var(--slate);
}

/* Schedule table */
.schedule-table {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    border-collapse: collapse;
}

.schedule-table th,
.schedule-table td {
    padding: var(--space-sm);
    text-align: left;
    border-bottom: 1px solid var(--sand);
}

.schedule-table th {
    color: var(--olive);
    font-weight: 600;
}

/* Map container */
.map-container {
    max-width: 600px;
    margin: var(--space-md) auto;
}

.map-container iframe {
    border-radius: var(--radius-sm);
    border: 1px solid var(--sand);
}

.map-caption {
    font-size: 0.85rem;
    color: var(--slate);
    text-align: center;
    margin-top: var(--space-xs);
}

/* Info list */
.info-list {
    text-align: left;
    max-width: 600px;
    margin: var(--space-sm) auto;
    padding-left: var(--space-lg);
}

.info-list li {
    margin-bottom: var(--space-sm);
    line-height: 1.6;
}

/* Featured accommodation */
.featured-accommodation {
    text-align: center;
}

.featured-accommodation h4 {
    color: var(--olive);
    margin-top: 0;
}

/* Accommodations list */
.accommodations-list {
    max-width: 700px;
    margin: 0 auto;
}

.accommodation-card {
    margin: var(--space-md) 0;
}

.accommodation-card h4 {
    color: var(--espresso);
    margin-top: 0;
}

/* Registry options */
.registry-options {
    max-width: 600px;
    margin: 0 auto;
}

.registry-card {
    text-align: center;
    margin: var(--space-md) 0;
}

.registry-card h3 {
    color: var(--espresso);
    margin-top: 0;
}

.registry-detail {
    font-size: 1.1rem;
}

/* Stat box variants */
.stat-box--secondary {
    background-color: var(--cobalt);
}

.stat-box--secondary .number {
    color: var(--cream);
}

.stat-box--secondary .label {
    color: rgba(255, 255, 255, 0.85);
}

.stat-box--success {
    background-color: var(--olive);
}

.stat-box--success .number {
    color: var(--cream);
}

.stat-box--success .label {
    color: rgba(255, 255, 255, 0.85);
}

.stat-box--warning {
    background-color: var(--mustard);
}

.stat-box--warning .number {
    color: var(--cream);
}

.stat-box--warning .label {
    color: rgba(255, 255, 255, 0.85);
}

.stat-box--danger {
    background-color: var(--rose);
}

.stat-box--danger .number {
    color: var(--cream);
}

.stat-box--danger .label {
    color: rgba(255, 255, 255, 0.85);
}

/* Table responsive wrapper */
.table-responsive {
    overflow-x: auto;
    margin: var(--space-md) 0;
}

/* Status indicators */
.status-done {
    color: var(--olive);
    font-weight: 600;
}

.status-pending {
    color: var(--mustard);
    font-weight: 600;
}

.status-yes {
    color: var(--olive);
    font-weight: 700;
}

.status-no {
    color: var(--rose);
    font-weight: 700;
}

.status-maybe {
    color: var(--mustard);
    font-weight: 700;
}

/* Guest attendance indicators in admin table */
.guest-attending {
    color: var(--olive);
    font-weight: 500;
}

.guest-not-attending {
    color: var(--slate);
    text-decoration: line-through;
    opacity: 0.7;
}

.theme-retro .guest-attending {
    color: #008000;
}

.theme-retro .guest-not-attending {
    color: #808080;
}

/* Pending row highlight */
.row-pending {
    background-color: rgba(232, 192, 80, 0.12);
}

/* Empty state */
.empty-state {
    color: var(--slate);
    font-style: italic;
    padding: var(--space-lg);
}

/* h4 styling */
h4 {
    font-family: var(--font-heading);
    color: var(--olive);
    font-size: 1.25rem;
    font-weight: 500;
    margin: var(--space-md) 0 var(--space-sm) 0;
}

/* ===========================================
   THEME SWITCHER
   =========================================== */

.theme-switcher {
    position: absolute;
    top: var(--space-sm);
    right: var(--space-sm);
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: 0.8rem;
}

.theme-switcher label {
    color: #ffffff;
    font-weight: 500;
}

.theme-switcher select {
    padding: 0.25rem 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-sm);
    background-color: rgba(255, 255, 255, 0.2);
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: #ffffff;
    cursor: pointer;
}

.theme-switcher select:focus {
    outline: none;
    border-color: var(--mustard);
}

/* ===========================================
   RYAN'S THEME (RETRO 90s)
   =========================================== */

.theme-retro {
    --cream: #000080;
    --espresso: #ffff00;
    --terracotta: #0000ff;
    --rust: #0000cc;
    --mustard: #ff00ff;
    --olive: #00ffff;
    --blush: #c0c0c0;
    --slate: #ffffff;
    --cobalt: #00ffff;
    --sand: #808080;
    --rose: #ff0000;

    --font-heading: "Times New Roman", serif;
    --font-body: "Comic Sans MS", "Comic Sans", "Chalkboard SE", "Marker Felt", sans-serif;

    --radius-sm: 0;
    --radius-md: 0;
    --radius-lg: 0;
}

/* Retro body background - starfield */
.theme-retro {
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100' height='100' fill='%23000080'/%3E%3Ccircle cx='10' cy='10' r='1' fill='white'/%3E%3Ccircle cx='50' cy='20' r='1.5' fill='%23ffff00'/%3E%3Ccircle cx='80' cy='15' r='1' fill='white'/%3E%3Ccircle cx='30' cy='45' r='1' fill='white'/%3E%3Ccircle cx='70' cy='50' r='1.5' fill='%23ffff00'/%3E%3Ccircle cx='15' cy='70' r='1' fill='white'/%3E%3Ccircle cx='90' cy='75' r='1' fill='white'/%3E%3Ccircle cx='45' cy='85' r='1.5' fill='%23ffff00'/%3E%3Ccircle cx='60' cy='90' r='1' fill='white'/%3E%3C/svg%3E");
    background-blend-mode: normal;
}

/* Retro main container */
.theme-retro .main-container {
    background-color: #c0c0c0;
    border: 3px outset #ffffff;
    border-radius: 0;
    box-shadow: none;
}

/* Retro header - rainbow gradient */
.theme-retro .header {
    background: linear-gradient(to right, #ff00ff, #00ffff, #ff00ff);
    border-bottom: 3px groove #808080;
}

.theme-retro .header::before {
    display: none;
}

.theme-retro .header h1 {
    color: #000000;
    text-shadow: 2px 2px #ffffff;
}

.theme-retro .header p,
.theme-retro .header .subtitle {
    color: #000080;
}

/* Retro marquee - show and style */
.theme-retro .marquee-container {
    display: block;
    background-color: #ffff00;
    color: #ff0000;
    padding: 5px;
    font-weight: bold;
    border: 2px inset #808080;
    margin: 10px;
    border-radius: 0;
}

/* Retro navbar */
.theme-retro .navbar {
    background-color: #000080;
    border-top: none;
    border-bottom: 2px solid #ffffff;
}

.theme-retro .navbar a {
    color: #00ffff;
    text-transform: uppercase;
}

.theme-retro .navbar a:hover {
    color: #ff00ff;
    text-decoration: underline;
}

.theme-retro .navbar a:visited {
    color: #00ffff;
}

.theme-retro .navbar .nav-separator {
    color: #00ffff;
}

/* Retro content */
.theme-retro .content {
    background-color: #ffffff;
    border: 2px inset #808080;
    margin: 10px;
    color: #000000;
}

.theme-retro .content h2 {
    color: #800080;
    border-bottom: 2px solid #ff00ff;
}

.theme-retro .content h3 {
    color: #ff00ff;
}

.theme-retro .content a {
    color: #0000ff;
}

.theme-retro .content a:hover {
    color: #ff00ff;
}

/* Retro buttons - beveled */
.theme-retro .btn {
    background-color: #c0c0c0;
    border: 3px outset #ffffff;
    border-radius: 0;
    color: #000000;
    box-shadow: none;
    font-family: "Comic Sans MS", "Chalkboard SE", "Marker Felt", sans-serif;
}

.theme-retro .btn:hover {
    background-color: #a0a0a0;
    transform: none;
    box-shadow: none;
}

.theme-retro .btn:active {
    border: 3px inset #808080;
}

.theme-retro .btn-primary {
    background-color: #0000ff;
    color: #ffffff;
}

.theme-retro .btn-primary:hover {
    background-color: #0000cc;
}

.theme-retro .btn-secondary {
    background-color: #008080;
    color: #ffffff;
}

/* Retro forms */
.theme-retro .retro-form {
    background-color: #e0e0e0;
    border: 2px inset #808080;
    border-radius: 0;
}

.theme-retro .form-group label {
    color: #000080;
}

.theme-retro .form-group input,
.theme-retro .form-group textarea,
.theme-retro .form-group select {
    border: 2px inset #808080;
    border-radius: 0;
    background-color: #ffffff;
    color: #ff00ff;
    font-family: "Comic Sans MS", "Chalkboard SE", "Marker Felt", sans-serif;
}

.theme-retro .form-group input:focus,
.theme-retro .form-group textarea:focus,
.theme-retro .form-group select:focus {
    box-shadow: none;
    border-color: #808080;
}

.theme-retro .form-group small {
    color: #808080;
}

/* Retro cards */
.theme-retro .card {
    background-color: #e0e0e0;
    border: 2px inset #808080;
    border-radius: 0;
    box-shadow: none;
}

.theme-retro .card-highlight {
    background-color: #ffffcc;
    border: 3px solid #ff6600;
}

/* Retro info box */
.theme-retro .info-box {
    background-color: #ffffcc;
    border: 2px solid #ff6600;
    border-radius: 0;
}

/* Retro invitation box */
.theme-retro .invitation-box {
    border: 3px solid #000080;
    background-color: #f0f0f0;
    border-radius: 0;
}

.theme-retro .invitation-box h3 {
    color: #000080;
}

/* Retro h4 headings */
.theme-retro h4 {
    color: #008080;
    font-family: "Times New Roman", serif;
}

/* Retro accommodation cards */
.theme-retro .accommodation-card h4,
.theme-retro .registry-card h3 {
    color: #000080;
}

.theme-retro .featured-accommodation h4 {
    color: #ff00ff;
}

/* Retro RSVP options */
.theme-retro .rsvp-option {
    border: 2px outset #c0c0c0;
    background-color: #e0e0e0;
    border-radius: 0;
}

.theme-retro .rsvp-option:hover {
    background-color: #d0d0d0;
    border-color: #c0c0c0;
}

.theme-retro .rsvp-option.selected {
    border: 2px inset #808080;
    background-color: #a0a0ff;
    box-shadow: none;
}

.theme-retro .rsvp-option-title {
    font-family: "Times New Roman", serif;
}

.theme-retro .rsvp-option-subtitle.accept {
    color: #008000;
}

.theme-retro .rsvp-option-subtitle.decline {
    color: #ff0000;
}

.theme-retro .rsvp-option-subtitle.maybe {
    color: #ff8c00;
}

/* Retro dividers - rainbow */
.theme-retro hr.fancy,
.theme-retro .section-divider {
    height: 10px;
    background: linear-gradient(to right, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #8b00ff);
    opacity: 1;
}

.theme-retro hr {
    height: 2px;
    background: linear-gradient(to right, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #8b00ff);
    opacity: 1;
}

/* Retro blink animation */
.theme-retro .blink {
    animation: blink-animation 1s steps(2, start) infinite;
    color: #ff0000;
}

@keyframes blink-animation {
    to {
        visibility: hidden;
    }
}

/* Retro flash messages */
.theme-retro .flash-error {
    background-color: #ff0000;
    color: #ffffff;
    border: 2px outset #ff6666;
    border-radius: 0;
}

.theme-retro .flash-success {
    background-color: #00ff00;
    color: #000000;
    border: 2px outset #66ff66;
    border-radius: 0;
}

/* Retro footer */
.theme-retro .footer {
    background-color: #000080;
    color: #ffffff;
    border-top: 2px solid #ffffff;
}

.theme-retro .footer a {
    color: #00ffff;
}

.theme-retro .footer a:hover {
    color: #ff00ff;
}

.theme-retro .footer p {
    color: #ffffff;
}

/* Retro visitor counter */
.theme-retro .visitor-counter {
    background-color: #000000;
    color: #00ff00;
    font-family: "Courier New", monospace;
    border: 2px inset #808080;
    border-radius: 0;
}

/* Retro admin table */
.theme-retro .admin-table th {
    background-color: #000080;
    color: #00ffff;
}

.theme-retro .admin-table tr:hover {
    background-color: #ffff00;
}

/* Retro schedule table */
.theme-retro .schedule-table th {
    background-color: #ff00ff;
    color: #ffff00;
    font-weight: bold;
    text-shadow: 1px 1px #000000;
}

.theme-retro .schedule-table td {
    border-bottom-color: #ff00ff;
}

/* Retro details table */
.theme-retro .details-table td:first-child {
    color: #ff00ff;
    font-weight: bold;
}

.theme-retro .details-table td {
    color: #000080;
}

/* Retro stat boxes */
.theme-retro .stat-box {
    background-color: #000080;
    color: #00ff00;
    border: 3px outset #0000ff;
    border-radius: 0;
    box-shadow: none;
}

.theme-retro .stat-box .number {
    color: #00ff00;
    font-family: "Courier New", monospace;
}

.theme-retro .stat-box .label {
    color: #ffffff;
}

.theme-retro .stat-box--secondary {
    background-color: #4b0082;
}

.theme-retro .stat-box--success {
    background-color: #006400;
}

.theme-retro .stat-box--warning {
    background-color: #8b4500;
}

.theme-retro .stat-box--danger {
    background-color: #8b0000;
}

/* Retro login box */
.theme-retro .login-box {
    background-color: #c0c0c0;
    border: 3px outset #ffffff;
    border-radius: 0;
    box-shadow: none;
}

.theme-retro .login-box h2 {
    color: #000080;
}

.theme-retro .login-box a {
    color: #0000ff;
}

.theme-retro .login-box a:hover {
    color: #ff00ff;
}

.theme-retro .login-box small {
    color: #808080;
}

.theme-retro .login-box .blink {
    color: #ff0000;
}

/* Retro map container */
.theme-retro .map-container iframe {
    border: 2px inset #808080;
    border-radius: 0;
}

/* Retro theme switcher */
.theme-retro .theme-switcher label {
    color: #000000;
    text-shadow: 1px 1px #ffffff;
}

.theme-retro .theme-switcher select {
    background-color: #c0c0c0;
    border: 2px inset #808080;
    border-radius: 0;
    color: #000000;
    font-family: "Comic Sans MS", "Chalkboard SE", "Marker Felt", sans-serif;
}

/* Retro form labels and text */
.theme-retro .checkbox-label,
.theme-retro .checkbox-group label {
    color: #000000;
}

/* Retro plus-ones info */
.theme-retro .plus-ones-info {
    color: #008080;
}

/* Retro guest list */
.theme-retro .guest-list {
    color: #000080;
}

/* Retro quick links */
.theme-retro .quick-links a {
    color: #0000ff;
    border-bottom-color: transparent;
}

.theme-retro .quick-links a:hover {
    color: #ff00ff;
    border-bottom-color: #ff00ff;
}

/* Retro small/muted text */
.theme-retro small {
    color: #808080;
}

/* Retro links in cards and info boxes */
.theme-retro .card a,
.theme-retro .info-box a,
.theme-retro .invitation-box a {
    color: #0000ff;
}

.theme-retro .card a:hover,
.theme-retro .info-box a:hover,
.theme-retro .invitation-box a:hover {
    color: #ff00ff;
}

/* Retro button text fixes - ensure visibility */
.theme-retro .btn {
    color: #000000 !important;
}

.theme-retro .btn-primary,
.theme-retro a.btn-primary,
.theme-retro .content a.btn-primary {
    background-color: #0000ff;
    color: #ffff00 !important;
}

.theme-retro .btn-secondary,
.theme-retro a.btn-secondary,
.theme-retro .content a.btn-secondary {
    background-color: #008080;
    color: #ffff00 !important;
}

.theme-retro .btn-tertiary,
.theme-retro a.btn-tertiary,
.theme-retro .content a.btn-tertiary {
    background-color: #006400;
    color: #ffff00 !important;
}

.theme-retro .btn-cobalt,
.theme-retro a.btn-cobalt,
.theme-retro .content a.btn-cobalt {
    background-color: #000080;
    color: #ff00ff !important;
}

.theme-retro .btn-airbnb,
.theme-retro a.btn-airbnb,
.theme-retro .content a.btn-airbnb {
    background-color: #FF5A5F;
    color: #ffffff !important;
}

.theme-retro .btn-vrbo,
.theme-retro a.btn-vrbo,
.theme-retro .content a.btn-vrbo {
    background-color: #0065e3;
    color: #ffffff !important;
}

/* Retro status indicators */
.theme-retro .status-done {
    color: #008000;
}

.theme-retro .status-pending {
    color: #ff8c00;
}

.theme-retro .status-yes {
    color: #008000;
}

.theme-retro .status-no {
    color: #ff0000;
}

.theme-retro .status-maybe {
    color: #ff8c00;
}

/* Retro images */
.theme-retro img {
    border: 2px solid #000000;
    border-radius: 0;
}

.theme-retro img.no-border {
    border: none;
}

/* ===========================================
   WEDDING RUNNER GAME STYLES
   =========================================== */

.game-container {
    max-width: 820px;
    margin: var(--space-md) auto;
    position: relative;
}

.game-score-display {
    background-color: var(--olive);
    color: var(--cream);
    padding: var(--space-xs) var(--space-md);
    font-weight: 600;
    font-size: 1.1rem;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

#game-canvas {
    display: block;
    width: 100%;
    max-width: 800px;
    height: auto;
    border: 2px solid var(--sand);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    background-color: var(--cream);
    cursor: pointer;
}

.game-instructions {
    margin-top: var(--space-sm);
    color: var(--slate);
    font-size: 0.9rem;
}

.game-instructions p {
    margin: var(--space-xs) 0;
}

.mobile-hint {
    display: none;
}

@media (max-width: 768px) {
    .mobile-hint {
        display: block;
    }
}

.game-over-panel,
.start-panel {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(255, 255, 255, 0.95);
    border: 2px solid var(--terracotta);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    text-align: center;
    z-index: 10;
    box-shadow: 0 4px 20px rgba(58, 56, 24, 0.2);
}

.game-over-panel h3 {
    color: var(--terracotta);
    margin-top: 0;
}

.score-submit-form {
    margin: var(--space-md) 0;
}

.score-submit-form .form-group {
    margin-bottom: var(--space-sm);
}

.score-submit-form .form-group input {
    width: 200px;
    padding: var(--space-xs) var(--space-sm);
    border: 1px solid var(--sand);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    text-align: center;
}

.score-submit-form button {
    margin: var(--space-xs);
}

.submit-message {
    font-weight: 500;
    margin-top: var(--space-sm);
}

.submit-message.success {
    color: var(--olive);
}

.submit-message.error {
    color: var(--rose);
}

.leaderboard-container {
    max-width: 400px;
    margin: var(--space-md) auto;
}

.leaderboard-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 1rem;
}

.leaderboard-table th,
.leaderboard-table td {
    padding: var(--space-sm);
    text-align: center;
    border-bottom: 1px solid var(--sand);
}

.leaderboard-table th {
    background-color: var(--olive);
    color: var(--cream);
    font-weight: 600;
}

.leaderboard-table tr:nth-child(1) td {
    background-color: rgba(214, 141, 40, 0.2);
    font-weight: 600;
}

.leaderboard-table tr:nth-child(2) td {
    background-color: rgba(173, 149, 112, 0.15);
}

.leaderboard-table tr:nth-child(3) td {
    background-color: rgba(212, 171, 150, 0.15);
}

/* Retro theme game styles */
.theme-retro .game-score-display {
    background-color: #000080;
    color: #00ff00;
    font-family: "Courier New", monospace;
    border-radius: 0;
}

.theme-retro #game-canvas {
    border: 3px solid #000000;
    border-radius: 0;
}

.theme-retro .game-over-panel,
.theme-retro .start-panel {
    background-color: #c0c0c0;
    border: 3px outset #ffffff;
    border-radius: 0;
    box-shadow: none;
}

.theme-retro .game-over-panel h3 {
    color: #ff0000;
    font-family: "Times New Roman", serif;
}

.theme-retro .score-submit-form .form-group input {
    border: 2px inset #808080;
    border-radius: 0;
    font-family: "Comic Sans MS", "Chalkboard SE", "Marker Felt", sans-serif;
}

.theme-retro .leaderboard-table th {
    background-color: #000080;
    color: #ffff00;
}

.theme-retro .leaderboard-table tr:nth-child(1) td {
    background-color: #ffff00;
    color: #000000;
}

.theme-retro .leaderboard-table tr:nth-child(2) td {
    background-color: #c0c0c0;
}

.theme-retro .leaderboard-table tr:nth-child(3) td {
    background-color: #e0e0e0;
}

.theme-retro .submit-message.success {
    color: #008000;
}

.theme-retro .submit-message.error {
    color: #ff0000;
}

/* ===========================================
   FERRY EXPERIENCE PHOTO STYLES
   =========================================== */

.ferry-experience {
    margin: var(--space-lg) 0;
}

.ferry-experience h4 {
    text-align: center;
    color: var(--olive);
    margin-bottom: var(--space-md);
}

.ferry-photo-single {
    max-width: 300px;
    margin: var(--space-md) auto;
    text-align: center;
}

.ferry-photo-single img {
    width: 100%;
    height: auto;
    box-shadow: 0 4px 12px rgba(58, 56, 24, 0.15);
}

.ferry-photo-pair {
    display: flex;
    justify-content: center;
    gap: var(--space-md);
    margin: var(--space-md) auto;
    max-width: 600px;
}

.photo-pair-item {
    flex: 1;
    max-width: 280px;
}

.photo-pair-item img {
    width: 100%;
    height: auto;
    box-shadow: 0 4px 12px rgba(58, 56, 24, 0.15);
}

.ferry-photo-wide {
    max-width: 700px;
    margin: var(--space-lg) auto;
    text-align: center;
}

.ferry-photo-wide img {
    width: 100%;
    height: auto;
    box-shadow: 0 4px 16px rgba(58, 56, 24, 0.12);
}

.photo-caption {
    font-size: 0.9rem;
    color: var(--slate);
    font-style: italic;
    margin-top: var(--space-xs);
    margin-bottom: var(--space-md);
}

/* Responsive adjustments for ferry photos */
@media (max-width: 600px) {
    .ferry-photo-pair {
        flex-direction: column;
        align-items: center;
    }

    .photo-pair-item {
        max-width: 280px;
    }
}

/* Retro theme ferry photos */
.theme-retro .ferry-photo-single img,
.theme-retro .photo-pair-item img,
.theme-retro .ferry-photo-wide img {
    box-shadow: none;
    border: 3px solid #000000;
}

.theme-retro .photo-caption {
    color: #ff00ff;
    font-family: "Comic Sans MS", "Chalkboard SE", "Marker Felt", sans-serif;
}

.theme-retro .ferry-experience h4 {
    color: #008080;
}

/* Print styles */
@media print {
    body {
        background: white;
    }

    .navbar,
    .footer,
    .best-viewed,
    .theme-switcher {
        display: none;
    }
}