:root {
    --primary-color: #c82940;
}

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

/* ✅ FIX: html, body වෙනුවට class එකකට සීමා කර ඇත */
body.stories-page {
    margin: 0; 
    padding: 0; 
    width: 100%; 
    height: 100vh;
    overflow: hidden; 
    font-family: 'Poppins', sans-serif;
    background: #000000;
    -webkit-tap-highlight-color: transparent;
}

/* Canvas Wall Space */
.wall-space {
    position: relative;
    width: 100vw;
    height: 100vh;
    background: #000000;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 120px;
    padding-bottom: 80px;
}

        .trigger-btn {
            background: transparent; color: var(--primary-color, #c82940); border: 1px solid var(--primary-color, #c82940); padding: 8px 20px;
            font-size: 0.85rem; font-weight: 500; border-radius: 50px; cursor: pointer;
            backdrop-filter: blur(5px);
            transition: all 0.4s ease; display: inline-flex; align-items: center; gap: 8px;
        }
        .trigger-btn:hover { background: var(--primary-color, #c82940); color: #fff; box-shadow: 0 0 15px var(--primary-color, #c82940); transform: translateY(-2px); }

        /* Absolute Math Honeycomb Grid Container */
        .honeycomb-container {
            position: relative;
            width: 100%;
            max-width: 1100px;
            margin: 145px auto 0 auto;
            min-height: 400px;
        }

        /* Organic Floating Animation Keyframes */
        @keyframes floatHexCard {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-8px); }
            100% { transform: translateY(0px); }
        }

        /* Border Laser Line Rotation Keyframes */
        @keyframes rotateHexBorder {
            0% { stroke-dashoffset: 400; }
            100% { stroke-dashoffset: 0; }
        }

        /* True Hexagon Card Container (Desktop Defaults) */
        .hex-story-card {
            position: absolute;
            width: 140px;
            height: 160px;
            background: #111;
            clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
            cursor: pointer;
            opacity: 0.45;
            overflow: hidden;
            transition: left 0.5s ease, top 0.5s ease, transform 0.25s ease, opacity 0.4s ease;
        }

        /* Desktop Hover Style */
        @media (hover: hover) {
            .hex-story-card:hover {
                opacity: 1 !important;
                transform: scale(1.18) translateY(-4px) !important;
                animation-play-state: paused !important;
                z-index: 999;
            }

            .hex-story-card:hover .hex-bg-img {
                transform: scale(1.12);
                filter: brightness(1);
            }

            .hex-story-card:hover .hex-border-svg polygon {
                stroke: var(--primary-color);
                filter: drop-shadow(0 0 6px var(--primary-color)) drop-shadow(0 0 14px var(--primary-color));
                animation: rotateHexBorder 2s linear infinite;
            }
        }

        .hex-bg-img {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            object-fit: cover; filter: brightness(0.85);
            transition: transform 0.4s ease, filter 0.4s ease;
        }

        .hex-overlay {
            position: absolute; bottom: 0; left: 0; width: 100%;
            padding: 35px 10px 18px 10px;
            background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.6) 65%, transparent 100%);
            display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
            text-align: center; z-index: 2; pointer-events: none;
        }

        .card-author {
            font-size: 0.68rem; font-weight: 600; color: #ffffff; width: 100%;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
            margin-bottom: 2px; text-shadow: 0 2px 4px rgba(0,0,0,0.9);
        }

        .card-snippet {
            font-size: 0.48rem; color: #d1d1d1; width: 100%;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
            opacity: 0.9; text-shadow: 0 1px 3px rgba(0,0,0,0.9);
        }

        .hex-border-svg {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            pointer-events: none; z-index: 10;
        }

        .hex-border-svg polygon {
            fill: none; stroke: rgba(255, 255, 255, 0.15); stroke-width: 3;
            stroke-dasharray: 90 310; stroke-dashoffset: 0; transition: stroke 0.3s ease;
        }

        @media (max-width: 768px), (hover: none) {
            .hex-story-card { opacity: 1 !important; }
            .hex-bg-img { filter: brightness(0.92); }
            .hex-border-svg polygon {
                stroke: var(--primary-color) !important;
                filter: drop-shadow(0 0 5px var(--primary-color)) drop-shadow(0 0 10px var(--primary-color));
                animation: rotateHexBorder 4.5s linear infinite !important;
            }
            .hex-story-card:active {
                transform: scale(1.15) !important; z-index: 999; transition: transform 0.1s ease;
            }
            .hex-story-card:active .hex-border-svg polygon {
                stroke: #ffffff !important;
                filter: drop-shadow(0 0 12px var(--primary-color)) drop-shadow(0 0 20px var(--primary-color));
            }
        }

        /* Modals */
        .custom-modal {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0,0,0,0.85); backdrop-filter: blur(10px);
            display: none; align-items: center; justify-content: center; z-index: 9999;
        }
        .custom-modal.active { display: flex; }

        .modal-box {
            background: #111; color: #fff; padding: 35px; border-radius: 20px;
            width: 90%; max-width: 450px; position: relative;
            border: 1px solid rgba(255,255,255,0.15);
            box-shadow: 0 25px 60px rgba(0,0,0,0.9);
            max-height: 85vh; overflow-y: auto;
            animation: modalPop 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }

        @keyframes modalPop {
            0% { transform: scale(0.8) translateY(20px); opacity: 0; }
            100% { transform: scale(1) translateY(0); opacity: 1; }
        }

        .close-btn {
            position: absolute; top: 18px; right: 18px; font-size: 1.1rem;
            cursor: pointer; color: #aaa; border: none; background: rgba(255,255,255,0.08);
            width: 32px; height: 32px; border-radius: 50%; display: flex;
            align-items: center; justify-content: center; transition: all 0.3s;
        }
        .close-btn:hover { background: #fff; color: #000; }

        .form-group { margin-bottom: 15px; text-align: left; }
        .form-group label { display: block; font-weight: 500; margin-bottom: 5px; color: #aaa; font-size: 0.8rem; }
        .form-group input, .form-group textarea {
            width: 100%; padding: 10px 14px; border: 1px solid rgba(255,255,255,0.15); border-radius: 8px; font-family: 'Poppins'; box-sizing: border-box; font-size: 0.85rem; background: #050505; color: #fff;
        }
        .form-group input:focus, .form-group textarea:focus { border-color: #fff; outline: none; }
        
        .submit-btn {
            background: #fff; color: #000; padding: 12px 20px; border: none;
            border-radius: 50px; cursor: pointer; width: 100%; font-size: 0.9rem; font-weight: 600;
            transition: all 0.3s; box-shadow: 0 5px 20px rgba(255,255,255,0.2);
        }
        .submit-btn:hover { background: #e0e0e0; transform: translateY(-2px); }

        .view-photo-container { text-align: center; margin-bottom: 15px; }
        .view-photo { width: 110px; height: 110px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; box-shadow: 0 0 20px rgba(255,255,255,0.4); display: inline-block; }
        .view-name { text-align: center; font-size: 1.3rem; margin-bottom: 15px; color: #fff; font-weight: 600; }
        .modal-text-side {
            color: #bbb; line-height: 1.7; /*max-height: 200px;*/ overflow-y: auto; padding-right: 5px; font-size: 0.9rem; text-align: left;
        }

        .empty-wall-msg {
            text-align: center; color: #555; font-size: 1rem; letter-spacing: 1px;
            padding-top: 100px; width: 100%;
        }