/* Comic Frame Effects for Avatars and Icons */
:root {
    --comic-black: #000000;
    --comic-white: #ffffff;
    --comic-red: #ff3b30;
    --comic-blue: #007aff;
    --comic-yellow: #ffcc00;
    --comic-green: #34c759;
    --comic-orange: #ff9500;
    --comic-purple: #af52de;
}

/* Base frame styles */
.comic-frame {
    position: relative;
    display: inline-block;
}

.comic-frame img {
    position: relative;
    z-index: 1;
    display: block;
    max-width: 100%;
}

/* Classic Comic Panel Frame */
.comic-panel-frame {
    padding: 8px;
    border: 4px solid var(--comic-black);
    background-color: var(--comic-white);
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.75);
    position: relative;
    transform: rotate(-2deg);
}

/* Rough Edge Comic Frame */
.comic-rough-frame {
    padding: 2px;
    border: 4px solid var(--comic-black);
    position: relative;
    overflow: visible;
}

.comic-rough-frame::before {
    content: "";
    position: absolute;
    top: -8px;
    left: -8px;
    right: -8px;
    bottom: -8px;
    background: transparent;
    border: 2px dashed var(--comic-black);
    z-index: -1;
    clip-path: polygon(
        0% 10%,
        5% 0%,
        15% 5%,
        25% 0%,
        35% 5%,
        45% 0%,
        55% 5%,
        65% 0%,
        75% 5%,
        85% 0%,
        95% 5%,
        100% 10%,
        95% 20%,
        100% 30%,
        95% 40%,
        100% 50%,
        95% 60%,
        100% 70%,
        95% 80%,
        100% 90%,
        95% 100%,
        85% 95%,
        75% 100%,
        65% 95%,
        55% 100%,
        45% 95%,
        35% 100%,
        25% 95%,
        15% 100%,
        5% 95%
        );
}

/* Starburst Effect Frame */
.comic-starburst-frame {
    padding: 5px;
    background-color: var(--comic-yellow);
    position: relative;
    border: 3px solid var(--comic-black);
    z-index: 1;
}

.comic-starburst-frame::before {
    content: "";
    position: absolute;
    top: -15px;
    left: -15px;
    right: -15px;
    bottom: -15px;
    background: var(--comic-yellow);
    z-index: -1;
    clip-path: polygon(
        50% 0%,
        61% 35%,
        98% 35%,
        68% 57%,
        79% 91%,
        50% 70%,
        21% 91%,
        32% 57%,
        2% 35%,
        39% 35%
        );
    transform: scale(1.1);
    border: 3px solid var(--comic-black);
}

/* Speech Bubble Frame */
.comic-bubble-frame {
    padding: 8px;
    background-color: var(--comic-white);
    border: 4px solid var(--comic-black);
    border-radius: 50% 50% 50% 0;
    position: relative;
}

.comic-bubble-frame::after {
    content: "";
    position: absolute;
    background-color: var(--comic-white);
    border-right: 4px solid var(--comic-black);
    border-bottom: 4px solid var(--comic-black);
    width: 20px;
    height: 20px;
    bottom: -15px;
    left: 15px;
    transform: rotate(45deg);
    z-index: -1;
}

/* Thought Bubble Frame */
.comic-thought-frame {
    padding: 8px;
    background-color: var(--comic-white);
    border: 4px solid var(--comic-black);
    border-radius: 50%;
    position: relative;
}

.comic-thought-frame::before,
.comic-thought-frame::after {
    content: "";
    position: absolute;
    background-color: var(--comic-white);
    border: 3px solid var(--comic-black);
    border-radius: 50%;
    z-index: -1;
}

.comic-thought-frame::before {
    width: 20px;
    height: 20px;
    bottom: -25px;
    right: 30px;
}

.comic-thought-frame::after {
    width: 10px;
    height: 10px;
    bottom: -35px;
    right: 15px;
}

/* Halftone Pattern Frame */
.comic-halftone-frame {
    padding: 8px;
    border: 4px solid var(--comic-black);
    background-color: var(--comic-white);
    position: relative;
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.5);
}

.comic-halftone-frame::before {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    right: 4px;
    bottom: 4px;
    background-image: radial-gradient(circle, #000 1px, transparent 1px);
    background-size: 8px 8px;
    background-position: center;
    opacity: 0.15;
    z-index: 2;
    pointer-events: none;
}

/* Item Frame for Game Items */
.comic-item-frame {
    padding: 5px;
    background: linear-gradient(45deg, var(--comic-blue), var(--comic-purple));
    border: 3px solid var(--comic-black);
    box-shadow: 0 0 0 3px var(--comic-white), 0 0 10px rgba(0, 0, 0, 0.7);
    position: relative;
    border-radius: 10px;
}

.comic-item-frame::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.3) 0%,
        transparent 50%,
        rgba(0, 0, 0, 0.2) 100%
        );
    border-radius: 7px;
    z-index: 2;
    pointer-events: none;
}

/* Rotating Comic Frame */
.comic-rotating-frame {
    padding: 8px;
    border: 4px solid var(--comic-black);
    background-color: var(--comic-white);
    position: relative;
    transition: transform 0.3s ease;
}

.comic-rotating-frame:hover {
    transform: rotate(5deg) scale(1.05);
}

/* Perfect Circle Frame */
.comic-circle-frame {
    padding: 6px;
    border: 4px solid var(--comic-black);
    background-color: var(--comic-white);
    border-radius: 50%;
    position: relative;
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

.comic-circle-frame img {
    border-radius: 50%;
}

/* Double Circle Frame */
.comic-double-circle-frame {
    padding: 6px;
    border: 4px solid var(--comic-black);
    background-color: var(--comic-white);
    border-radius: 50%;
    position: relative;
}

.comic-double-circle-frame::after {
    content: "";
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border: 2px dotted var(--comic-black);
    border-radius: 50%;
    z-index: 2;
    pointer-events: none;
}

.comic-double-circle-frame img {
    border-radius: 50%;
}

/* Glowing Circle Frame */
.comic-glow-circle-frame {
    padding: 6px;
    border: 4px solid var(--comic-black);
    background-color: var(--comic-white);
    border-radius: 50%;
    position: relative;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.7),
        inset 0 0 15px rgba(255, 215, 0, 0.5);
}

.comic-glow-circle-frame img {
    border-radius: 50%;
}

/* Color Variations - add these classes in addition to the frame classes */
.comic-frame-red {
    --frame-color: var(--comic-red);
    background-color: var(--frame-color) !important;
}

.comic-frame-blue {
    --frame-color: var(--comic-blue);
    background-color: var(--frame-color) !important;
}

.comic-frame-green {
    --frame-color: var(--comic-green);
    background-color: var(--frame-color) !important;
}

.comic-frame-orange {
    --frame-color: var(--comic-orange);
    background-color: var(--frame-color) !important;
}

.comic-frame-purple {
    --frame-color: var(--comic-purple);
    background-color: var(--frame-color) !important;
}

/* Comic Background Patterns */
.comic-pattern-bg {
    background-image: url("../images/comic-pattern.png");
    background-repeat: repeat;
    background-size: 200px;
    position: relative;
}

.comic-dots-bg {
    background-image: radial-gradient(#000 1px, transparent 2px);
    background-size: 15px 15px;
    background-position: center;
    position: relative;
}

.comic-lines-bg {
    background-image: repeating-linear-gradient(
        45deg,
        #000,
        #000 1px,
        transparent 1px,
        transparent 10px
        );
    background-color: rgba(255, 255, 255, 0.9);
    position: relative;
    opacity: 0.05;
}

/* Comic Container Frame */
.comic-container-frame {
    background-color: rgba(255, 255, 255, 0.85);
    border: 3px solid var(--comic-black);
    border-radius: 10px;
    box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.7);
    padding: 15px;
    position: relative;
    overflow: hidden;
}

.comic-container-frame::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("../images/comic-pattern.png");
    background-repeat: repeat;
    background-size: 200px;
    opacity: 0.1;
    pointer-events: none;
}

/* Character modal enhancements for better mobile display */
.character-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.character-modal-content {
    background-color: white;
    max-width: 800px;
    width: 90%;
    max-height: 90vh;
    border-radius: 10px;
    overflow: auto;
    padding-bottom: 20px;
}

/* Responsive adaptations */
@media (max-width: 768px) {
    .comic-frame {
        transform: scale(0.9);
    }

    .comic-panel-frame {
        padding: 5px;
        border-width: 3px;
    }

    .comic-rough-frame {
        border-width: 3px;
    }

    .comic-circle-frame {
        padding: 4px;
        border-width: 2px;
    }

    .comic-halftone-frame {
        padding: 5px;
        border-width: 3px;
    }
}

@media (max-width: 480px) {
    .comic-frame {
        transform: scale(0.8);
    }

    .comic-panel-frame {
        padding: 4px;
        border-width: 2px;
    }

    .comic-starburst-frame::before {
        top: -10px;
        left: -10px;
        right: -10px;
        bottom: -10px;
    }
}