:root {
    --md-sys-color-primary: #D0BCFF;
    --md-sys-color-on-primary: #381E72;
    --md-sys-color-primary-container: #4F378B;
    --md-sys-color-on-primary-container: #EADDFF;
    --md-sys-color-surface: #141218;
    --md-sys-color-on-surface: #E6E1E5;
    --md-sys-color-surface-variant: #49454F;
    --md-sys-color-on-surface-variant: #CAC4D0;
    --md-sys-color-outline: #938F99;
    --sparkle-gold: #FFD700;

    --glass-bg: rgba(20, 18, 24, 0.7);
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-blur: 20px;

    --font-heading: 'Courier New', Courier, monospace;
    /* Monospace for headings */
    --font-body: 'Inter', sans-serif;
    /* Sans-serif for body */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #000;
    color: var(--md-sys-color-on-surface);
    font-family: var(--font-body);
    overflow-x: hidden;
    cursor: none;
    /* Hide default cursor for custom follower */
}

/* --- Typo --- */
h1,
h2,
h3 {
    font-family: var(--font-heading);
    font-weight: 700;
    letter-spacing: -1px;
    text-transform: uppercase;
}

h1 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.subtitle {
    font-size: 1rem;
    color: var(--md-sys-color-on-surface-variant);
    margin-bottom: 2rem;
    font-family: var(--font-body);
}

/* --- Layout --- */
.page {
    display: none;
    min-height: 100vh;
    padding: 100px 20px 40px 20px;
    /* Space for top nav */
    animation: fadeIn 0.4s ease-out;
}

.page.active {
    display: block;
}

/* Home page specific: no padding top to allow full bleed canvas */
#home.page {
    padding: 0;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- Scroll Animation Section --- */
.v-container {
    position: relative;
    width: 100%;
    height: 100vh;
    /* User logic: height is 100vh, scroll is virtual via GSAP pin */
    overflow: hidden;
    background: #000;
}

#video-canvas {
    display: block;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    /* Drawing handled by GSAP */
}

.content-section {
    position: relative;
    z-index: 10;
    min-height: 100vh;
    background: var(--md-sys-color-surface);
    /* Solid bg to avoid transparency issues */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 100px;
    margin-top: 0;
}

.scroll-instruction {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    animation: bounce 2s infinite;
}

@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateX(-50%) translateY(0);
    }

    40% {
        transform: translateX(-50%) translateY(-10px);
    }

    60% {
        transform: translateX(-50%) translateY(-5px);
    }
}


/* --- Glassmorphism Panels --- */
.glass-panel {
    background: rgba(30, 25, 40, 0.6);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: 9999px;
    /* Rounded Pill shape fallback if height allows */
    padding: 24px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

/* --- Navigation (Top Fixed) --- */
.glass-nav {
    position: fixed;
    top: 20px;
    /* Floating slightly from top */
    left: 50%;
    transform: translateX(-50%);
    background: rgba(40, 40, 40, 0.4);
    /* Darker frosted */
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-radius: 50px;
    padding: 8px 30px;
    display: flex;
    gap: 20px;
    z-index: 9999;
    border: 1px solid rgba(255, 255, 255, 0.05);
    width: fit-content;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.nav-btn {
    background: transparent;
    border: none;
    color: var(--md-sys-color-on-surface-variant);
    padding: 12px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-btn:hover,
.nav-btn.active-nav {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    transform: scale(1.1);
}

.nav-btn span {
    font-size: 24px;
}

.hidden {
    display: none !important;
}

/* --- Actions --- */
.actions-row {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.action-btn {
    padding: 8px 16px;
    border-radius: 9999px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.05);
    color: white;
    cursor: pointer;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}

.action-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.action-btn.delete:hover {
    background: rgba(255, 50, 50, 0.4);
    border-color: red;
}

.action-btn.edit:hover {
    background: var(--md-sys-color-primary-container);
    border-color: var(--md-sys-color-primary);
}

.action-btn span {
    font-size: 16px;
}

/* --- Tiles --- */
.tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 20px;
    width: 100%;
    max-width: 900px;
    padding: 0 20px;
}

.tile {
    background: var(--md-sys-color-surface-variant);
    color: var(--md-sys-color-on-surface-variant);
    padding: 30px 20px;
    border-radius: 30px;
    /* Soft square/rect for tiles */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    cursor: pointer;
    transition: transform 0.2s, background-color 0.2s;
    border: 1px solid transparent;
}

.tile:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--md-sys-color-primary);
}

.tile .icon {
    font-size: 40px;
    color: var(--md-sys-color-primary);
}

.epic-tile {
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
    border: 1px solid var(--sparkle-gold);
}

.epic-tile:hover {
    box-shadow: 0 0 40px rgba(255, 215, 0, 0.6);
}

/* --- Pills (Brews / Drinks / Shops) --- */
.brew-pill {
    background: var(--md-sys-color-surface-variant);
    border-radius: 9999px;
    /* Semi-circle ends */
    margin-bottom: 16px;
    overflow: hidden;
    /* This cuts off expanded content if we rely on pill shape for container */
    /* Fix: For expanded state, we might need to animate radius but user requested semicircle always? 
       Actually standard pill design usually morphs for cards. 
       Let's keep it pill when closed, and maybe less pill when open? 
       Or just huge radius always. If huge radius, the content inside needs padding. */
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.brew-pill.expanded {
    border-radius: 40px;
    /* Slightly less rounded when expanded to fit content better */
    background: #1c1924;
}

.brew-header {
    padding: 16px 32px;
    /* More padding for pill look */
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.brew-details {
    max-height: 0;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.2);
    transition: max-height 0.4s ease, padding 0.4s;
}

.brew-pill.expanded .brew-details {
    max-height: 2000px;
    padding: 24px;
}

/* --- Detail Grid --- */
.detail-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    font-size: 0.9rem;
}

.detail-item {
    display: flex;
    flex-direction: column;
}

.detail-item label {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: #888;
    margin-bottom: 4px;
    font-family: var(--font-heading);
}

/* --- Forms & Inputs --- */
input,
textarea,
select {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--md-sys-color-outline);
    color: white;
    padding: 16px 20px;
    border-radius: 9999px;
    /* Inputs also pills */
    margin-bottom: 16px;
    font-family: inherit;
    transition: border-color 0.2s;
}

textarea {
    border-radius: 20px;
}

input:focus {
    outline: none;
    border-color: var(--md-sys-color-primary);
    background: rgba(255, 255, 255, 0.08);
}

.fab {
    position: fixed;
    bottom: 40px;
    right: 24px;
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    width: 64px;
    height: 64px;
    border-radius: 24px;
    /* Squircle */
    border: none;
    font-size: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    cursor: pointer;
    z-index: 100;
    transition: transform 0.2s;
}

.fab:hover {
    transform: scale(1.05);
}

/* --- Actions --- */
.actions-row {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.action-btn {
    padding: 8px 16px;
    border-radius: 9999px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.05);
    color: white;
    cursor: pointer;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}

.action-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.action-btn.delete:hover {
    background: rgba(255, 50, 50, 0.4);
    border-color: red;
}

.action-btn.edit:hover {
    background: var(--md-sys-color-primary-container);
    border-color: var(--md-sys-color-primary);
}

.action-btn span {
    font-size: 16px;
}

/* --- Map/List Toggle --- */
#shop-map-container {
    width: 100%;
    height: 60vh;
    min-height: 400px;
    border-radius: 30px;
    overflow: hidden;
    margin-bottom: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}

.map-toggle-container {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
    background: rgba(255, 255, 255, 0.05);
    padding: 6px;
    border-radius: 9999px;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.toggle-btn {
    background: transparent;
    border: none;
    color: var(--md-sys-color-on-surface-variant);
    padding: 8px 20px;
    border-radius: 9999px;
    cursor: pointer;
    font-family: var(--font-body);
    font-weight: 500;
    transition: all 0.3s;
}

.toggle-btn.active {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    font-weight: 700;
}

.toggle-btn:hover:not(.active) {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

/* --- Epic Dial-In --- */
.epic-page {
    background: radial-gradient(circle at center, #2a2a2a, #000);
}

.epic-header h1 {
    text-align: center;
    background: linear-gradient(45deg, #FFD700, #DAA520);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    padding-bottom: 20px;
    font-size: 3rem;
}

.dial-in-container {
    max-width: 600px;
    margin: 40px auto;
}

.glass-panel-dark {
    background: rgba(10, 10, 10, 0.6);
    backdrop-filter: blur(30px);
    border: 1px solid rgba(255, 215, 0, 0.2);
    border-radius: 30px;
    padding: 40px;
}

.shot-inputs {
    display: flex;
    gap: 16px;
    margin: 30px 0;
}

.shot-card {
    flex: 1;
    background: rgba(255, 255, 255, 0.03);
    padding: 20px;
    border-radius: 20px;
    border: 1px solid rgba(255, 215, 0, 0.1);
}

.calculate-btn {
    width: 100%;
    padding: 20px;
    background: linear-gradient(45deg, #FFD700, #B8860B);
    border: none;
    color: black;
    font-weight: 800;
    font-size: 1.2rem;
    border-radius: 9999px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: 20px;
    transition: transform 0.2s, box-shadow 0.2s;
}

.calculate-btn:hover {
    transform: scale(1.02);
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.3);
}

/* --- Modals --- */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}

.modal.visible {
    opacity: 1;
    pointer-events: auto;
}

.modal-content {
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    background: #1e1b26;
    border-radius: 40px;
    padding: 30px;
    transform: scale(0.9);
    transition: transform 0.3s;
}

.modal.visible .modal-content {
    transform: scale(1);
}

.close {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 32px;
    cursor: pointer;
    color: #fff;
}

.save-btn {
    width: 100%;
    padding: 16px;
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    border: none;
    border-radius: 9999px;
    font-weight: 700;
    margin-top: 24px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* --- Mouse Follower (PC Only) --- */
#cursor-follower {
    position: fixed;
    top: 0;
    left: 0;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 99999;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(2px) brightness(1.2) contrast(1.1);
    -webkit-backdrop-filter: blur(2px) brightness(1.2) contrast(1.1);
    box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.05), 0 0 30px rgba(0, 0, 0, 0.2);
    /* Distort effect via slight scale or mix-blend mode? 
       Actual "dent" is hard in pure CSS. 
       Let's use a subtle lighting effect + scale. */
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: width 0.2s, height 0.2s;
    mix-blend-mode: overlay;
    display: none;
    /* JS will enable for non-touch */
}

/* --- Mobile Optimization --- */
@media (hover: none) and (pointer: coarse) {
    #cursor-follower {
        display: none !important;
    }

    body {
        cursor: auto;
    }

    .v-container {
        height: 200vh;
        /* Shorter scroll on mobile */
    }

    .tile-grid {
        grid-template-columns: 1fr;
    }

    .shot-inputs {
        flex-direction: column;
    }

    h1 {
        font-size: 2rem;
    }

    .glass-nav {
        bottom: 20px;
        top: auto;
        /* Maybe user wants top, but mobile bottom is standard. 
        User said "also und auch auf der startseite zusehen sein. ... mache die navigationsleiste zu einem
        forstet glas transparent element. ... oben eine navigationseliste".
        User EXPLICITLY requested TOP. */
        top: 20px;
        bottom: auto;
        width: 90%;
        justify-content: space-around;
        padding: 12px;
    }

    .page {
        padding-top: 120px;
        /* More space for top nav */
    }
}