/* =========================
   Base / Reset
========================= */

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    background-image: url('/static/web/Hintergrund.svg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    user-select: none;
    color: #fff;
}

.hidden {
    display: none !important;
}

/* =========================
   Layout
========================= */

#main-container {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

section {
    width: 100%;
    height: 100%;
}

.center {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* =========================
   Loading
========================= */

#loading-spinner {
    width: 100%;
    height: 100vh;
}

.spinner {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 4px solid rgba(255,255,255,0.2);
    border-top-color: #facc15;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* =========================
   Header
========================= */

#spielstation-modul h1 {
    font-size: 5.5rem;
    font-weight: 300;
    margin: 0;
}

#spielstation-modul p {
    color: #b71f6a; /* dark pink to match play button */
    font-size: 1.125rem; /* larger subtitle */
    font-weight: 600;
    letter-spacing: 0.12em;
    margin: 0.25rem 0 0;
}

#spielstation-modul {
    width: 100%;
    height: 100%;
    padding: 2rem;
    display: flex;
    flex-direction: column;
}

#spielstation-modul .header {
    text-align: center;
    margin-bottom: 1.5rem;
}

/* Scroll container and grid centering */
.scroll-wrap { flex:1; overflow-y:auto; display:flex; justify-content:center; padding-right:1.5rem; }
#spiele-grid { width:100%; max-width:900px; display:flex; flex-direction:column; align-items:center; gap:1rem; padding:0 1rem; }

/* =========================
   Spiele Grid
========================= */

#spiele-grid,
#detail-other-games {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
}

/* =========================
   Game Card
========================= */
.game-card {
    position: relative;
    width: 100%;
    height: auto; /* let image determine height */
    border-radius: 14px;
    overflow: hidden;
    background: transparent; /* remove black bar */
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(0,0,0,0.45);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    transform-origin: center;
}

.banner-visual {
    position: relative;
    width: 100%;
}

.banner-img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    -webkit-user-drag: none;
}

.game-card:hover {
    transform: scale(1.04);
    box-shadow: 0 20px 48px rgba(183,31,106,0.28); /* pink outward shadow */
}

.card-overlay {
    display: none; /* no overlay content on banners */
}

.card-title {
    margin: 0;
    text-align: center;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.2;
}

/* Play badge on main banners */
.card-overlay { display:flex; align-items:center; justify-content:center; }
.play-badge {
    width: 56px;
    height: 56px;
    border-radius: 10px;
    border: none;
    background: linear-gradient(90deg,#d6458f,#b71f6a);
    color: white;
    font-weight: 700;
    font-size: 1.2rem;
    cursor: pointer;
    box-shadow: 0 10px 26px rgba(183,31,106,0.16);
    transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.2s ease;
    opacity: 0.95;
}
.game-card:hover .play-badge { transform: scale(1.18); box-shadow: 0 18px 40px rgba(183,31,106,0.28); }
.game-card .card-overlay { opacity: 0.65; }

.other-card {
    width: 100%;
    max-width: 420px;
    height: 72px;
    margin: 0 auto;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 6px 16px rgba(0,0,0,0.45);
    cursor: pointer;
    display: flex;
    align-items: center;
}
.other-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.other-card .card-overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background: rgba(0,0,0,0.18); opacity:0; transition: opacity 0.25s ease; }
.other-card:hover .card-overlay { opacity: 1; }

/* =========================
   Detail View
========================= */

#spiel-detail-modul {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 40;
    pointer-events: auto;
}

#detail-backdrop {
    position: fixed;
    inset: 0;
    background: transparent; /* removed darkening */
    z-index: 30;
    /* allow clicks so JS can detect backdrop clicks */
    pointer-events: auto;
}

.content-wrap {
    position: relative;
    z-index: 40;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}
/* allow clicks to pass through outside the centered detail box so backdrop receives them */
.content-wrap { pointer-events: none; }
.detail-main { pointer-events: auto; }

#detail-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem; /* reduced spacing between title and icon */
    margin-bottom: 3rem;

    /* ensure the detail-content acts as the shared frame width for both
       rand.png (background) and the VHS frame inside it */
    width: 100%;
    max-width: 680px; /* shared width for rand and VHS */
    margin-left: auto;
    margin-right: auto;

    /* decorative frame removed: keep neutral background and padding */
    background: none;
    padding: 2.4rem 1.6rem; /* inner spacing for content */
    border-radius: 10px;
}

#detail-icon {
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
    margin: 0.25rem 0;
}

#detail-title {
    font-size: 3rem;
    font-weight: 300;
    text-align: center;
}

.other-games-title { text-align: center; width:100%; margin:0 0 0.5rem; }

/* Play button larger and pink with hover shine/scale */
#detail-play-btn {
    display: block;
    width: auto;
    max-width: 420px;
    padding: 0.72rem 1.2rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: #fff;
    border: none;
    border-radius: 12px;
    background: linear-gradient(90deg,#d6458f,#b71f6a);
    box-shadow: 0 10px 26px rgba(183,31,106,0.16);
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    margin: 0.6rem auto;
}
#detail-play-btn:hover {
    transform: scale(1.06);
    box-shadow: 0 18px 40px rgba(183,31,106,0.28);
}
#detail-play-btn:active { transform: scale(0.98); }

#detail-description {
    max-width: 800px;
    font-size: 0.9rem;
    line-height: 1.6;
    text-align: center;
}

/* Selected banner under description */
#detail-selected-banner-wrap { margin-top: 1rem; width: 100%; display:block; }

/* make the selected banner image fill the wrap width */
#detail-selected-banner {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
}

/* VHS frame around the selected banner */

#vhs-frame {
     /* VHS decorative background removed: simple container */
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
     width: 100%;
     margin: 0;
     padding: 2% 3%;
     background: none;
     border-radius: 12px;
}

#vhs-frame img {
    width: auto;
    max-width: 78%; /* inner banner remains smaller than the VHS frame */
    height: auto;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

/* =========================
   Buttons
========================= */

.button-primary {
    padding: 0.75rem 2rem;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(90deg, #eab308, #ca8a04);
}

.button-primary:hover {
    box-shadow: 0 10px 25px rgba(0,0,0,0.4);
}

/* =========================
   Diashow Toggle
========================= */
.diashow-toggle-wrap { margin: 0.75rem 0 1.5rem; }
.diashow-toggle-wrap { position: relative; z-index: 80; pointer-events: auto; }

/* Hide the toggle while the diashow (Bildschirmschoner) is active */
body.diashow-active #diashow-toggle-wrap { display: none !important; }
.diashow-toggle {
    padding: 0.6rem 1rem;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    font-weight: 700;
    color: #fff;
    min-width: 160px;
    transition: background-color 160ms ease, transform 120ms ease, box-shadow 120ms ease;
}
.diashow-toggle.on { background-color: #16a34a; box-shadow: 0 8px 22px rgba(16,153,63,0.16); }
.diashow-toggle.off { background-color: #dc2626; box-shadow: 0 8px 22px rgba(220,38,38,0.16); }
.diashow-toggle:active { transform: translateY(1px) scale(0.995); }
.diashow-toggle[aria-pressed="true"] { outline: 3px solid rgba(255,255,255,0.06); }

/* =========================
   Close Button
========================= */

#detail-close-btn {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.9rem;
    cursor: pointer;
}

#detail-close-btn:hover {
    color: #facc15;
}

/* Position close button flush to the content area */
.detail-main {
    position: relative;
    width: 100%;
    max-width: 720px;
}

#detail-close-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 0.08rem 0.4rem;
    border-radius: 6px;
    background: rgba(0,0,0,0.12);
    z-index: 60;
    line-height: 1;
}

#detail-close-btn:hover { color: #facc15; background: rgba(0,0,0,0.2); }

/* =========================
   Animations
========================= */

.fade-in {
    animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Small helpers / aliases used by HTML */
.spinner-wrap { margin-bottom: 1rem; }
.loading-text { margin:0.5rem 0 0; color:#fff; font-size:1.125rem; font-weight:300; letter-spacing:0.08em; }
.card { background:#0f172a; padding:2rem; border-radius:0.5rem; max-width:28rem; text-align:center; }
.error-overlay { z-index:50; }

/* Backwards compatibility aliases */
.banner-card { }
.banner-overlay { }
.overlay { }

/* Ensure detail-other-games centers its items and can scroll on small screens */
#detail-other-games {
    display:flex;
    flex-direction:column;
    align-items:center;
    width:100%;
    max-width:720px;
    margin:0 auto;
    /* make scrollable on all viewports when content overflows */
    max-height: 45vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    padding-right: 0.5rem;
}

/* Carousel-specific styles for focused view: show exactly 5 items stacked vertically,
   center item emphasized, neighbors dimmed */
.carousel-vertical {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* allow slots to expand so banners are never clipped */
    height: auto;
    overflow: visible;
    width: 100%;
    /* prevent browser panning/scroll while interacting with carousel */
    touch-action: none;
    user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
}

/* Desktop: layout detail view with right column for other games */
@media (min-width: 900px) {
    .detail-main {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 2.5rem; /* increased gap between icon/content and the reel */
        justify-content: center;
    }
    #detail-content {
        width: 60%;
        align-items: center;
        text-align: center;
    }
    .other-games-wrap {
        width: 38%;
        max-width: 480px;
        align-self: flex-start;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }
    #detail-other-games {
        display: flex;
        flex-direction: column;
        gap: 0.6rem;
        max-height: 70vh;
        overflow-y: auto;
    }
    /* ensure right-column banners show full banner without cropping */
    #detail-other-games .other-card { height: auto; max-width: 100%; overflow: visible; }
    #detail-other-games .other-card img { width: 100%; height: auto; object-fit: contain; display:block; }
    /* hide the mobile toggle button on desktop (we show reel) */
    #detail-other-games-toggle { display: none !important; }
    /* hide the game title in focused desktop view */
    #detail-title { display: none !important; }
    /* Right-column banners: allow larger, uncropped banners (use contain) */
    #detail-other-games .other-card { height: auto; max-width:100%; }
    #detail-other-games .other-card img { object-fit: contain; height: auto; width: 100%; display:block; }
    /* Hide dropdown on desktop */
    #detail-other-games-dropdown { display: none !important; }

     /* Frame wrapper removed — styles deleted so layout uses original containers. */

    #spiel-detail-modul {
        position: relative;
        display: flex;
        justify-content: center;
    }
    #spiel-detail-modul .content-wrap,
    #spiel-detail-modul .detail-main {
        width: 100%;
        max-width: 70vw; /* keep focused content narrower inside the frame */
        margin: 0 auto;
    }
}

/* Mobile: hide right-column list and use dropdown; style toggle button */
@media (max-width: 899px) {
    .detail-main { flex-direction: column; }
    .other-games-wrap { width: 100%; display: flex; flex-direction: column; align-items: center; }
    /* Hide the right-column inline list on mobile */
    #detail-other-games { display: none; }
    #detail-other-games-toggle { display: inline-block; background: linear-gradient(90deg,#b71f6a,#8f1750); color: #fff; border: none; padding: 0.6rem 1rem; border-radius: 10px; font-weight:700; cursor:pointer; }
    #detail-other-games-toggle:active { transform: translateY(1px); }
    /* dropdown panel */
    #detail-other-games-dropdown { position: absolute; left: 50%; transform: translateX(-50%); bottom: 6rem; width: 92%; max-width: 720px; background: rgba(0,0,0,0.9); border-radius: 12px; padding: 0.75rem; box-shadow: 0 12px 30px rgba(0,0,0,0.45); z-index: 80; }
    #detail-other-games-dropdown .other-card { height: 64px; margin: 0.25rem 0; }
}
.carousel-vertical .other-card {
    width: 100%;
    max-width: 480px;
    height: auto;
    margin: 8px 0;
    transition: transform 220ms ease, opacity 220ms ease;
    overflow: visible; /* allow scaled banners to be fully visible */
    transform-origin: center center;
}
.carousel-vertical .carousel-slot img { object-fit: contain; width:100%; height:auto; display:block; max-height: none; }
.carousel-vertical .carousel-slot.slot-2 { transform: scale(0.86); opacity: 0.95; }
.carousel-vertical .carousel-slot.slot-1 { transform: scale(0.94); opacity: 0.98; }
.carousel-vertical .carousel-slot.slot-0 { transform: scale(1.06); opacity: 1; box-shadow: 0 12px 30px rgba(0,0,0,0.45); }

/* prevent page background from moving while interacting with carousel on touch devices */
.carousel-vertical { touch-action: none; }

/* Diashow full-screen settings */
#diashow-modul { position: fixed; inset: 0; z-index: 70; background:#000; display: none; }
.diashow-active .diashow-modul, #diashow-modul.active { display: block; }
.slide-container { position:absolute; inset:0; width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:#000; transition: opacity 0.5s ease-in-out; }
.slide-container img, .slide-container video { width:100%; height:100%; object-fit:cover; display:block; }

/* when diashow mode is active we hide the page background */
body.diashow-active { background-image: none !important; background-color: #000 !important; }

/* Responsive adjustments for smaller screens to avoid cutoff */
@media (max-width: 700px) {
    #spielstation-modul h1 {
        font-size: 2.2rem; /* scale down on mobile */
    }

    #spielstation-modul p {
        font-size: 0.95rem;
    }

    /* Detail view: align to top and allow scrolling so title/icon aren't cut off */
    .content-wrap { align-items: flex-start; padding-top: 1rem; }
    #detail-content { max-height: 80vh; overflow-y: auto; padding: 0.5rem; }
    #detail-title { font-size: 1.6rem; }
    #detail-icon { width: 100%; max-width: 100%; }
    #detail-play-btn { width: auto; max-width: 420px; }
    /* make other-games list taller to allow swiping */
    #detail-other-games { max-height: 40vh; }
}

/* iFrame overlay (Spiel) */
#iframe-container {
    position: fixed;
    inset: 0;
    background: #000;
    z-index: 80;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
}
#iframe-container.hidden { display: none !important; }
#iframe-container iframe { width: 100%; height: 100%; border: 0; display: block; }