@font-face {font-family:'ColorfictionGothic';
    src: url(https://fanciphee.neocities.org/ColorfictionGothic.otf)format('opentype');
    font-weight: normal;font-style: normal;}
@font-face {font-family:'vinizinho';
    src: url(https://fanciphee.neocities.org/vinizinho.ttf)format('truetype');
    font-weight: normal;font-style: normal;}
@font-face {font-family: 'DawnOfSouls';
     src: url('https://zazo.neocities.org/webfontkit/final-fantasy-dawn-of-souls-webfont.woff2') format('woff2'),
          url('https://zazo.neocities.org/webfontkit/final-fantasy-dawn-of-souls-webfont.woff') format('woff');
    font-weight: normal; font-style: normal;  }

body {font-family:Georgia,serif;
    line-height:1.6;max-width:1200px;margin:0 auto;padding:20px;
    background:url('https://fanciphee.neocities.org/images/level2/its_cooler_now.png')center/cover fixed;color:#333;}

h1 {text-align:center;margin-bottom: 20px;font-size:2.2em;font-family:'ColorfictionGothic';
    border-bottom:4px dotted brown;background:linear-gradient(to bottom,#e74c3c,#2c3e50);-webkit-background-clip:text;
    background-clip:text;-webkit-text-fill-color:transparent;}

h2 {border-bottom:2px solid #e74c3c;padding-bottom:5px;margin:40px 0 20px 0;
    cursor:pointer;user-select:none;position:relative;
    background:linear-gradient(to bottom,#e74c3c,#34495e);-webkit-background-clip:text;
    background-clip:text;-webkit-text-fill-color:transparent;}

.intro {text-align:center;margin-bottom:30px;font-size:1.5em;font-family:'vinizinho',serif;
   text-shadow: 0 0 6px rgba(255,255,255,0.8), 
                0 0 3px rgba(255,255,255,0.6),
                0 0 8px rgba(0,0,0,0.4);}
.intro a {color:#e74c3c;text-decoration:none;border-bottom:1px dotted #e74c3c;}
.intro a:hover {border-bottom:1px solid #e74c3c;}

.gallery-nav {background:lavender;padding:15px;margin:20px 0;border-radius:2px;
    box-shadow:0 2px 10px rgba(0,0,0,0.3);opacity:0.7;text-align:center;}

.nav-btn {background:#f8f9fa;border:1px solid #ddd;
    padding:8px 15px;margin:0 5px;text-decoration:none;color:#333;
    display:inline-block;transition:all 0.3s ease;}
.nav-btn:hover,.nav-btn.current {background:#e74c3c;color:white;border-color:#e74c3c;}

.controls {background:lavender;padding:20px;margin:20px auto;border-radius:2px;box-shadow:0 2px 10px rgba(0,0,0,0.3);}
.search-bar {width:100%;padding:10px;
    border:2px solid #e74c3c;border-bottom-right-radius:15px;border-top-right-radius:15px;border-top-left-radius:15px;
    font-size:1em;margin-bottom:18px;box-sizing:border-box;}

.tag-group {display:flex;flex-wrap:wrap;gap:8px;margin-bottom:4px;}
.tag-btn {background:#f8f9fa;border:1px solid #ddd;padding:5px 5px;cursor:pointer;
    font-size:0.9em;transition:all 0.3s ease;}

.tag-btn:hover,
.tag-btn.active {background:#e74c3c;color:white;border-color:#e74c3c;}

.clear-filters {background:#34495e;color:white;border:none;font-style:italic;position:absolute;left:50%;
    padding:8px;border-top-right-radius:20px;border-top-left-radius:20px;
    cursor:pointer;font-size:0.9em;}
.clear-filters:hover {background: #2c3e50;}

.pagination {text-align:center;margin:20px auto;background:lavender;opacity:0.8;font-style:italic;
    max-width:300px;font-family:Garamond,serif;
    padding:15px;border-radius:2px;box-shadow:0 2px 10px rgba(0,0,0,0.3);}

.page-btn {background:#f8f9fa;border:1px solid #ddd;
    padding:8px 12px;margin:0 2px;cursor:pointer;
    border-radius:3px;font-size:0.9em;}
.page-btn:hover,
.page-btn.active {background:#e74c3c;color:white;border-color:#e74c3c;}
.page-btn:disabled {background:#f8f9fa;color:#ccc;cursor:not-allowed;}

.page-info {margin:10px 0;color:#666;}

.ezgallery {
    display:grid;border-radius:2px;
    grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
    gap:15px;margin:30px 0;padding:20px;
    background:white;box-shadow:0 2px 10px rgba(0,0,0,0.3);
    transition:max-height 0.3s ease,opacity 0.3s ease;overflow:hidden;}

.ezgallery.collapsed {max-height:0;opacity:0;margin:0;padding:0;}

.ezgallery a {
    display:block;position:relative;overflow:hidden;
    transition:transform 0.3s ease,box-shadow 0.3s ease;background:#f8f9fa;
    cursor:pointer; /* Make it clear these are clickable */
    text-decoration:none; /* Remove default link underline */
}
.ezgallery a:hover {transform:translateY(-3px);box-shadow:0 5px 20px rgba(0,0,0,0.5);}
.ezgallery a.hidden {display:none;}

/* Add a visual indicator for warning images */
.ezgallery a[onclick*="showWarning"] {
    border:2px solid #ff6600;
    box-shadow:0 0 5px rgba(255,102,0,0.3);
}
.ezgallery a[onclick*="showWarning"]::before {
    content:"⚠️";
    position:absolute;
    top:5px;right:5px;
    background:rgba(255,102,0,0.9);
    color:white;
    font-size:12px;
    padding:2px 4px;
    border-radius:3px;
    z-index:10;
}

.ezgallery img {width:100%;height:120px;object-fit:cover;
    display:block;transition:transform 0.3s ease;
    background: linear-gradient(45deg,#f0f0f0 25%,transparent 25%), 
                linear-gradient(-45deg,#f0f0f0 25%,transparent 25%), 
                linear-gradient(45deg,transparent 75%,#f0f0f0 75%), 
                linear-gradient(-45deg,transparent 75%,#f0f0f0 75%);
    background-size:20px 20px;background-position:0 0,0 10px, 10px -10px,-10px 0px;}

.ezgallery a:hover img {transform:scale(1.05);}
.ezgallery a::after {content:attr(title);position:absolute;
    bottom:0;left:0;right:0;
    background:linear-gradient(transparent,rgba(0,0,0,0.8));color:white;
    padding:15px 8px 8px;font-size:0.8em;
    opacity:0;transition:opacity 0.3s ease;pointer-events:none;}
.ezgallery a:hover::after {opacity:1;}

.back-to-top {
    position:fixed;bottom:20px;right:20px;
    background:#e74c3c;color:white;
    border:none;border-top-left-radius:50%;border-bottom-right-radius:50%;
    width:48px;height:46px;
    font-size:20px;cursor:pointer;
    opacity:0;transition:opacity 0.3s ease;
    z-index:1000;}

.tag-group {display:flex;flex-wrap: wrap;
    gap:8px;margin-bottom:15px;}
details .tag-group {margin-top:10px;}

.back-to-top.visible {opacity:1;}
.back-to-top:hover {background:#c0392b;}

.photoviewer-modal {background:rgba(255,255,255,0.8)}
.photoviewer-stage {background:rgba(0,0,0,0.4);
touch-action: pan-zoom !important;
    -webkit-user-select: none !important;
    user-select: none !important;}
.photoviewer-image {opacity:1;
touch-action: pan-zoom !important;
    -webkit-user-select: none !important;
    user-select: none !important;}
.photoviewer-title { background: rgba(255,255,255, 0.9)}

.warning-modal {display:none;position:fixed;
    z-index: 20000;left:0;top: 0;width: 100%;height:100%;
    background-color: rgba(0,0,0,0.8);animation: fadeIn 0.3s ease;}

.warning-content {position:absolute;
    top:50%;left:50%;transform:translate(-50%,-50%);
    background:white;padding:30px;border-radius:10px;
    max-width:400px;width:90%;
    text-align:center;box-shadow:0 10px 30px rgba(0,0,0,0.3);}

.warning-title {color:#e74c3c;
    font-size: 1.3em;font-weight: bold;margin-bottom: 15px;display: flex;
    align-items: center;justify-content: center;gap:10px;}
    
.warning-text {margin-bottom:25px;line-height:1.4;color: #333;}
.warning-buttons {display: flex;gap: 15px;justify-content: center;}

.warning-btn {padding:10px 20px;border:none;border-radius:5px;
    cursor:pointer;font-size:1em;transition:all 0.3s ease;}

.btn-proceed {background:#e74c3c;color:white;}
.btn-proceed:hover {background:#c0392b;}

.btn-cancel {background:#95a5a6;color:white;}
.btn-cancel:hover {background:#7f8c8d;}

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

.tag-section {margin-bottom:15px;}
.tag-header {padding-left:20px;font-weight:bold;color:#cd7f32;
    border-bottom:dashed 2px #f8f8ff;transition:background 0.5s ease;}
.tag-header:hover {background:#f8f9fa;}

.tag-content {max-height:200px;overflow:hidden;transition:max-height 0.3s ease,padding 0.3s ease;padding:10px 0;}
.tag-content.collapsed {max-height:0;padding:0;}

/* Mobile Tweaks - Enhanced for better usability */
@media (max-width:768px){
    body {
        padding: 8px;
        font-size: 16px; /* Prevent iOS zoom */
    }
    
    .ezgallery {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 8px;
        padding: 12px;
    }
    
    .ezgallery img {
        height: 100px;
    }
    
    h1 {
        font-size: 1.6em;
        margin-bottom: 15px;
    }
    
    .intro {
        font-size: 1.2em;
        margin-bottom: 20px;
        padding: 0 5px;
    }
    
    /* Improve controls on mobile */
    .controls {
        padding: 15px;
        margin: 15px auto;
    }
    
    .search-bar {
        padding: 12px;
        font-size: 16px; /* Prevent iOS zoom */
        margin-bottom: 15px;
    }
    
    /* Better touch targets for tags */
    .tag-btn {
        padding: 8px 10px;
        margin: 2px;
        font-size: 0.85em;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        -webkit-tap-highlight-color: rgba(231, 76, 60, 0.3);
    }
    
    .clear-filters {
        padding: 10px 15px;
        font-size: 0.85em;
        min-height: 44px;
        left: 50%;
        transform: translateX(-50%);
    }
    
    /* Improve collapsible sections */
    .tag-header {
        padding: 12px 15px;
        font-size: 1em;
        cursor: pointer;
        -webkit-tap-highlight-color: rgba(248, 249, 250, 0.2);
    }
    
    .tag-content {
        padding: 12px 0;
    }
    
    /* Better pagination on mobile */
    .pagination {
        padding: 12px;
        margin: 15px auto;
        max-width: 280px;
    }
    
    .page-btn {
        padding: 10px 8px;
        margin: 0 1px;
        font-size: 0.8em;
        min-width: 44px;
        min-height: 44px;
    }
    
    .page-info {
        margin: 8px 0;
        font-size: 0.9em;
    }
    
   
    
    /* Back to top button */
    .back-to-top {
        width: 50px;
        height: 50px;
        bottom: 15px;
        right: 15px;
        font-size: 18px;
    }
    
    /* Hover title improvements for touch */
    .ezgallery a::after {
        padding: 12px 6px 6px;
        font-size: 0.75em;
    }
    
    /* Warning modal improvements */
    .warning-content {
        padding: 20px;
        max-width: 320px;
        width: 85%;
    }
    
    .warning-title {
        font-size: 1.2em;
        margin-bottom: 12px;
    }
    
    .warning-text {
        margin-bottom: 20px;
        font-size: 0.9em;
    }
    
    .warning-btn {
        padding: 12px 16px;
        font-size: 0.9em;
        min-height: 44px;
    }
    
    /* Make warning indicators more visible on mobile */
    .ezgallery a[onclick*="showWarning"]::before {
        font-size: 14px;
        padding: 3px 5px;
    }
}

/* Extra small screens */
@media (max-width: 480px) {
    body {
        padding: 5px;
    }
    
    h1 {
        font-size: 1.4em;
    }
    
    .ezgallery {
        grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
        gap: 6px;
        padding: 10px;
    }
    
    .ezgallery img {
        height: 90px;
    }
    
    .controls {
        padding: 12px;
    }
    
    .search-bar {
        padding: 10px;
    }
    
    .intro {
        font-size: 1.1em;
    }
    
    .gallery-nav {
        padding: 10px;
    }
    
    .nav-btn {
        padding: 8px 10px;
        font-size: 0.75em;
    }
    
    .tag-btn {
        padding: 6px 8px;
        font-size: 0.8em;
    }
    
    .pagination {
        max-width: 250px;
        padding: 10px;
    }
    
    .page-btn {
        padding: 8px 6px;
        font-size: 0.75em;
        min-width: 40px;
        min-height: 40px;
    }
}

/* Landscape orientation on small screens */
@media (max-height: 500px) and (orientation: landscape) {
    .ezgallery {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
        gap: 5px;
        padding: 8px;
    }
    
    .ezgallery img {
        height: 80px;
    }
    
    h1 {
        font-size: 1.3em;
        margin-bottom: 10px;
    }
    
    .controls {
        padding: 10px;
        margin: 10px auto;
    }
    
    .gallery-nav {
        padding: 8px;
        margin: 10px 0;
    }
}

/* Touch-friendly improvements for all screen sizes */
@media (hover: none) and (pointer: coarse) {
    /* This targets touch devices specifically */
    
    .ezgallery a:hover::after {
        opacity: 0; /* Hide hover titles on touch devices */
    }
    
    /* Show titles on tap/touch instead */
    .ezgallery a:active::after,
    .ezgallery a:focus::after {
        opacity: 1;
    }
    
    /* Improve button feedback */
    .tag-btn:active,
    .page-btn:active,
    .nav-btn:active,
    .clear-filters:active {
        transform: scale(0.95);
        transition: transform 0.1s ease;
    }
    
    /* Remove hover transforms on touch devices */
    .ezgallery a:hover {
        transform: none;
    }
    
    .ezgallery a:hover img {
        transform: none;
    }
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .ezgallery a:hover {
        transform: none;
    }
    
    .ezgallery a:hover img {
        transform: none;
    }
}

.warning-modal {display:none;position:fixed;
    z-index: 20000;left:0;top: 0;width: 100%;height:100%;
    background-color: rgba(0,0,0,0.8);animation: fadeIn 0.3s ease;}

.warning-content {position:absolute;
    top:50%;left:50%;transform:translate(-50%,-50%);
    background:white;padding:30px;border-radius:10px;
    max-width:400px;width:90%;
    text-align:center;box-shadow:0 10px 30px rgba(0,0,0,0.3);}

.warning-title {color:#e74c3c;
    font-size: 1.3em;font-weight: bold;margin-bottom: 15px;display: flex;
    align-items: center;justify-content: center;gap:10px;}
    
.warning-text {margin-bottom:25px;line-height:1.4;color: #333;}
.warning-buttons {display: flex;gap: 15px;justify-content: center;}

.warning-btn {padding:10px 20px;border:none;border-radius:5px;
    cursor:pointer;font-size:1em;transition:all 0.3s ease;}

.btn-proceed {background:#e74c3c;color:white;}
.btn-proceed:hover {background:#c0392b;}

.btn-cancel {background:#95a5a6;color:white;}
.btn-cancel:hover {background:#7f8c8d;}

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