:root {
    --bg-color: #000000;
    /* Deep Black */
    --win-bg: #c0c0c0;
    --win-border-light: #ffffff;
    --win-border-dark: #808080;
    --win-border-black: #000000;
    --accent-red: #cc0000;
    /* Keeping variable name for compatibility, updating value */
    --accent-yellow: #FFBF00;
    /* Amber Gold (Top only) */
    --accent-dark-yellow: #B8860B;
    --accent-main: #0077BE;
    /* Ocean Blue (Global) */
    --accent-secondary: #004477;
    /* Darker Ocean */
    --accent-glow: #0099EE;
    /* Bright Blue Glow */
    --accent-lime: #00ff00;
    --text-color: #000000;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Rubik', 'Varela Round', sans-serif;
}

body {
    background: #000 url('https://web.archive.org/web/20091027083023im_/http://geocities.com/Tokyo/Harbor/9242/stars.gif') repeat;
    color: white;
    overflow-x: hidden;
    cursor: url('https://web.archive.org/web/20091027054617im_/http://geocities.com/Hollywood/Hills/1441/cursor.gif'), auto;
}

.scanlines {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%,
            rgba(0, 0, 0, 0.1) 50%), linear-gradient(90deg,
            rgba(0, 119, 190, 0.05),
            rgba(0, 153, 238, 0.01),
            rgba(0, 68, 119, 0.02));
    background-size: 100% 4px, 3px 100%;
    pointer-events: none;
    z-index: 9999;
}

.wrapper {
    max-width: 900px;
    margin: 20px auto;
    border: 4px ridge var(--win-border-light);
    background: rgba(10, 10, 10, 0.9);
    padding: 10px;
    box-shadow: 10px 10px 0px rgba(0, 0, 0, 0.5);
}

header {
    text-align: center;
    border-bottom: 2px solid var(--accent-yellow);
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.kigler-logo {
    display: inline-block;
    background: #000;
    color: #fff;
    padding: 10px 30px;
    font-family: 'Rubik', sans-serif;
    font-weight: 900;
    font-size: 3.5rem;
    text-transform: uppercase;
    letter-spacing: -3px;
    line-height: 0.8;
    transform: rotate(-2deg);
    border: 3px solid #fff;
    box-shadow: 5px 5px 0px var(--accent-yellow);
    margin: 15px 0;
    text-shadow: 2px 2px #555;
    position: relative;
    overflow: hidden;
}

.kigler-logo::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(rgba(255, 255, 255, 0.05) 0px,
            rgba(255, 255, 255, 0.05) 1px,
            transparent 1px,
            transparent 2px);
    pointer-events: none;
}

.sub-brand {
    font-family: 'Rubik', sans-serif;
    font-weight: 900;
    color: var(--accent-yellow);
    font-size: 1.4rem;
    letter-spacing: 2px;
    margin-top: 5px;
    text-transform: uppercase;
}

@keyframes glitch {
    0% {
        transform: translate(0);
    }

    20% {
        transform: translate(-2px, 2px);
    }

    40% {
        transform: translate(-2px, -2px);
    }

    60% {
        transform: translate(2px, 2px);
    }

    80% {
        transform: translate(2px, -2px);
    }

    100% {
        transform: translate(0);
    }
}

.marquee-container {
    background: #000;
    color: #FFBF00;
    font-family: 'VT323', monospace;
    font-size: 1.5rem;
    padding: 5px;
    border: 2px inset #FFBF00;
}

.win98-nav {
    background: var(--win-bg);
    border: 2px outset var(--win-border-light);
    margin-bottom: 20px;
}

.win98-nav ul {
    display: flex;
    list-style: none;
    justify-content: space-around;
    padding: 5px;
}

.win98-nav a {
    color: black;
    text-decoration: none;
    font-weight: bold;
    padding: 5px 10px;
    border: 1px solid transparent;
}

.win98-nav a:hover {
    background: var(--bg-color);
    color: white;
    border: 1px inset var(--win-border-dark);
}

.window {
    background: var(--win-bg);
    border: 2px outset var(--win-border-light);
    margin-bottom: 30px;
    color: black;
}

.window-header {
    background: linear-gradient(90deg, #000000, var(--accent-secondary));
    color: white;
    padding: 3px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
    font-size: 0.9rem;
}

.window-controls span {
    background: var(--win-bg);
    color: black;
    border: 1px outset white;
    padding: 0 5px;
    margin-left: 2px;
    cursor: pointer;
    font-family: Arial;
}

.window-content {
    padding: 15px;
    border: 1px inset white;
    margin: 2px;
    font-weight: 500;
}

h2,
h3 {
    font-family: 'Rubik', sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    margin-bottom: 10px;
    letter-spacing: -1px;
}

.hero-flex {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.hero-image-container {
    position: relative;
    border: 3px solid black;
}

.hero-img {
    width: 300px;
    display: block;
}

.blink-text {
    position: absolute;
    top: -10px;
    right: -10px;
    background: var(--accent-yellow);
    color: black;
    font-weight: bold;
    padding: 5px;
    border: 2px dashed black;
    transform: rotate(15deg);
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}



.credit-note {
    font-size: 0.85rem;
    color: #666;
    font-style: italic;
    margin-top: 10px;
    font-family: 'Varela Round', sans-serif;
}

.album-promo {
    margin-top: 20px;
    text-align: center;
}

.album-btn {
    display: inline-block;
    padding: 15px 25px;
    background: var(--accent-main);
    color: white;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.2rem;
    border: 4px outset var(--accent-glow);
}

.album-btn:hover {
    background: #fff;
    color: black;
    border: 4px inset var(--win-border-light);
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

/* Music Player */
.player-mockup {
    background: #333;
    padding: 10px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    gap: 15px;
    color: white;
    margin: 15px 0;
}

.disc-spin {
    font-size: 2rem;
    animation: spin 3s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.progress-bar {
    width: 200px;
    height: 10px;
    background: #555;
    margin-top: 5px;
}

.progress-bar .fill {
    width: 40%;
    height: 100%;
    background: var(--accent-main);
}

.tracklist {
    list-style: decimal-leading-zero;
    padding-right: 20px;
}

.tracklist li {
    margin: 5px 0;
    border-bottom: 1px dotted #888;
    display: flex;
    justify-content: space-between;
}

.download-link {
    color: var(--accent-main);
    cursor: pointer;
    font-weight: bold;
}

/* Gallery */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}

.photo-frame {
    border: 2px solid white;
    padding: 5px;
    background: #eee;
    position: relative;
}

.photo-frame img {
    width: 100%;
    filter: sepia(0.3) contrast(1.2) grayscale(0.5);
    /* Grittier look */
    transition: filter 0.3s;
}

.photo-frame img:hover {
    filter: none;
}

/* Facts Section Redesign - Dossier / Dossier Style */
.facts-window {
    background: var(--win-bg);
    padding: 30px !important;
    border: 2px inset white;
    position: relative;
    overflow: hidden;
    color: black;
    box-shadow: none;
}

.facts-window::before {
    content: " ";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: repeating-linear-gradient(rgba(0, 0, 0, 0) 0px,
            rgba(0, 0, 0, 0) 1px,
            rgba(0, 0, 0, 0.05) 1px,
            rgba(0, 0, 0, 0.05) 2px);
    z-index: 10;
    pointer-events: none;
}

.facts-window::after {
    display: none;
    /* No CRT flicker for the dossier style */
}

@keyframes flicker {
    0% {
        opacity: 0.27861;
    }

    5% {
        opacity: 0.34769;
    }

    10% {
        opacity: 0.23604;
    }

    15% {
        opacity: 0.90626;
    }

    20% {
        opacity: 0.18128;
    }

    /* ... shortened for brevity but keep the essence ... */
    100% {
        opacity: 0.24351;
    }
}

.facts-title-he {
    font-family: 'Rubik', sans-serif;
    font-weight: 900;
    font-size: 2.2rem;
    color: black;
    text-align: right;
    margin-bottom: 40px;
    text-shadow: none;
    animation: none;
    padding-right: 20px;
}

.facts-grid {
    display: flex;
    flex-direction: column;
    gap: 25px;
    position: relative;
    z-index: 5;
    max-width: 800px;
    margin: 0 auto;
}

.fact-card {
    background: transparent;
    padding: 0 20px;
    border: none;
    position: relative;
    transition: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    box-shadow: none;
}

.fact-card:hover {
    border-color: transparent;
    box-shadow: none;
    transform: none;
    background: transparent;
}

.fact-num {
    position: static;
    color: black;
    font-family: 'Rubik', sans-serif;
    font-weight: 400;
    font-size: 1.8rem;
    margin-bottom: 2px;
    width: 100%;
    text-align: right;
}

.fact-card p {
    font-family: 'Rubik', sans-serif;
    font-weight: 400;
    font-size: 1.5rem;
    line-height: 1.2;
    color: black;
    margin: 0;
    text-align: right;
    text-shadow: none;
    width: 100%;
}

.sticker-1,
.sticker-2,
.sticker-3 {
    transform: none !important;
    background: transparent !important;
}

/* Guestbook */
.guestbook-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.guestbook-form input,
.guestbook-form textarea {
    padding: 10px;
    border: 2px inset var(--win-border-dark);
    background: #ccc;
    color: black;
    font-family: 'Courier New', Courier, monospace;
}

.guestbook-form button {
    background: var(--win-bg);
    border: 2px outset white;
    padding: 10px;
    cursor: pointer;
    font-weight: bold;
}

.guestbook-form button:active {
    border: 2px inset white;
}

.guestbook-messages {
    margin-top: 20px;
    max-height: 200px;
    overflow-y: scroll;
    background: white;
    padding: 10px;
    border: 2px inset var(--win-border-dark);
    color: black;
}

.message {
    padding: 5px 0;
    border-bottom: 1px solid #ccc;
    display: flex;
    align-items: center;
    gap: 10px;
}

.delete-btn {
    background: var(--accent-secondary);
    color: white;
    border: 1px solid black;
    cursor: pointer;
    font-size: 0.8rem;
    padding: 0 5px;
    font-family: monospace;
}

.delete-btn:hover {
    background: black;
    color: var(--accent-glow);
    border: 1px solid var(--accent-glow);
}

/* Footer */
footer {
    text-align: center;
}

.counter-num {
    background: black;
    color: var(--accent-main);
    padding: 2px 5px;
    font-family: 'VT323', monospace;
    font-size: 1.2rem;
}

.badges {
    margin: 15px 0;
}

.badges img {
    margin: 0 5px;
}

/* Retro Links */
.retro-link {
    display: inline-block;
    padding: 10px;
    background: #000;
    color: var(--accent-main);
    text-decoration: none;
    font-family: 'VT323', monospace;
    font-size: 1.5rem;
    border: 2px solid var(--accent-main);
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    transition: all 0.2s;
}

.retro-link:hover {
    background: var(--accent-main);
    color: white;
    box-shadow: 0 0 10px var(--accent-glow);
    transform: scale(1.05);
}

.retro-link .icon {
    margin-right: 10px;
}

/* RTL Adjustments */
[dir="rtl"] .window-header {
    flex-direction: row-reverse;
}

[dir="rtl"] .window-controls {
    display: flex;
    flex-direction: row-reverse;
}

/* Petition Modal */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

.modal-overlay.active {
    display: flex;
}

.modal-window {
    background: var(--win-bg);
    border: 2px outset var(--win-border-light);
    max-width: 450px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    color: black;
    animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }

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

.petition-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.petition-form input,
.petition-form textarea {
    padding: 10px;
    border: 2px inset var(--win-border-dark);
    background: #ccc;
    color: black;
    font-family: 'Courier New', Courier, monospace;
}

.petition-form textarea {
    min-height: 80px;
    resize: vertical;
}

.petition-form button {
    background: var(--accent-main);
    border: 2px outset var(--accent-glow);
    padding: 12px;
    cursor: pointer;
    font-weight: bold;
    color: white;
    font-size: 1.1rem;
    transition: all 0.2s;
}

.petition-form button:hover {
    background: var(--accent-glow);
}

.petition-form button:active {
    border: 2px inset var(--accent-glow);
}

.petition-form button:disabled {
    background: #888;
    cursor: not-allowed;
}

/* ===========================================
   MOBILE RESPONSIVE STYLES
   =========================================== */

/* Mobile Navigation Toggle Button */
.mobile-menu-toggle {
    display: none;
    background: var(--win-bg);
    border: 2px outset white;
    padding: 8px 12px;
    cursor: pointer;
    font-weight: bold;
    font-family: 'VT323', monospace;
    font-size: 1.2rem;
    color: black;
    width: 100%;
}

.mobile-menu-toggle:active {
    border: 2px inset white;
}

/* Tablet styles - up to 768px */
@media screen and (max-width: 768px) {
    .wrapper {
        margin: 10px;
        padding: 5px;
    }

    .kigler-logo {
        font-size: 2.2rem;
        padding: 8px 15px;
        letter-spacing: -2px;
    }

    .sub-brand {
        font-size: 1rem;
    }

    .marquee-container {
        font-size: 1.2rem;
    }

    /* Navigation - Hamburger Menu */
    .mobile-menu-toggle {
        display: block;
    }

    .win98-nav ul {
        display: none;
        flex-direction: column;
        padding: 0;
    }

    .win98-nav ul.active {
        display: flex;
    }

    .win98-nav li {
        border-bottom: 1px solid var(--win-border-dark);
    }

    .win98-nav a {
        display: block;
        padding: 12px 15px;
        text-align: center;
    }

    /* Hero Section - Stack Vertically */
    .hero-flex {
        flex-direction: column;
        align-items: center;
    }

    .hero-image-container {
        width: 100%;
        max-width: 300px;
    }

    .hero-img {
        width: 100%;
        height: auto;
    }

    .hero-text {
        text-align: center;
    }

    .stats-box {
        font-size: 1rem;
    }

    .album-btn {
        font-size: 1rem;
        padding: 12px 18px;
    }

    /* Gallery */
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .facts-grid {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 15px;
    }

    /* YouTube Video Responsive */
    #video .window-content iframe {
        height: 200px;
    }

    /* Links */
    .retro-link {
        font-size: 1.2rem;
        padding: 12px;
    }

    /* Window headers */
    .window-title {
        font-size: 0.8rem;
    }

    /* Footer */
    .badges img {
        width: 80px;
        height: auto;
    }
}

/* Mobile styles - up to 480px */
@media screen and (max-width: 480px) {
    .wrapper {
        margin: 5px;
        padding: 3px;
        border-width: 2px;
    }

    .kigler-logo {
        font-size: 1.6rem;
        padding: 6px 12px;
        letter-spacing: -1px;
        transform: rotate(0deg);
    }

    .sub-brand {
        font-size: 0.85rem;
        letter-spacing: 1px;
    }

    .marquee-container {
        font-size: 1rem;
        padding: 3px;
    }

    /* Window styling adjustments */
    .window {
        margin-bottom: 15px;
    }

    .window-header {
        padding: 2px 6px;
        font-size: 0.75rem;
    }

    .window-controls span {
        padding: 0 3px;
        font-size: 0.8rem;
    }

    .window-content {
        padding: 10px;
    }

    h2,
    h3 {
        font-size: 1.1rem;
    }

    /* Hero section */
    .hero-image-container {
        max-width: 250px;
    }

    .blink-text {
        font-size: 0.85rem;
        padding: 3px;
        top: -8px;
        right: -8px;
    }

    .stats-box {
        font-size: 0.9rem;
        padding: 8px;
    }

    .stats-box p {
        margin: 3px 0;
    }

    .album-btn {
        font-size: 0.9rem;
        padding: 10px 15px;
        border-width: 3px;
    }

    /* Gallery - Single Column on very small screens */
    .gallery-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .facts-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .facts-title-en {
        font-size: 1.4rem;
    }

    .photo-frame {
        padding: 3px;
    }

    /* YouTube Video */
    #video .window-content iframe {
        height: 180px;
    }

    /* Shows section */
    #shows .window-content>div {
        padding: 15px;
    }

    #shows .window-content p {
        font-size: 1.2rem !important;
    }

    /* Guestbook */
    .guestbook-form input,
    .guestbook-form textarea {
        padding: 8px;
        font-size: 0.9rem;
    }

    .guestbook-form button {
        padding: 10px;
        font-size: 0.9rem;
    }

    .guestbook-messages {
        max-height: 150px;
        padding: 8px;
    }

    .message {
        font-size: 0.9rem;
        flex-wrap: wrap;
    }

    /* Links */
    .retro-link {
        font-size: 1rem;
        padding: 10px;
    }

    .retro-link .icon {
        margin-right: 5px;
    }

    /* Footer */
    .hit-counter {
        font-size: 0.9rem;
    }

    .counter-num {
        font-size: 1rem;
    }

    .badges {
        margin: 10px 0;
    }

    .badges img {
        width: 60px;
    }

    footer p {
        font-size: 0.8rem;
    }

    /* Modal adjustments */
    .modal-window {
        width: 95%;
        margin: 10px;
    }

    .petition-form input,
    .petition-form textarea {
        padding: 8px;
        font-size: 0.9rem;
    }

    .petition-form button {
        padding: 10px;
        font-size: 1rem;
    }

    #petitionCount {
        font-size: 1rem !important;
    }
}

/* Extra small devices - up to 320px */
@media screen and (max-width: 320px) {
    .kigler-logo {
        font-size: 1.3rem;
        padding: 5px 10px;
    }

    .sub-brand {
        font-size: 0.75rem;
    }

    .marquee-container {
        font-size: 0.85rem;
    }

    .win98-nav a {
        font-size: 0.9rem;
        padding: 10px;
    }

    .album-btn {
        font-size: 0.8rem;
        padding: 8px 12px;
    }

    .retro-link {
        font-size: 0.9rem;
    }
}

/* Touch-friendly improvements */
@media (hover: none) and (pointer: coarse) {
    .win98-nav a {
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .guestbook-form button,
    .petition-form button,
    .album-btn {
        min-height: 44px;
    }

    .retro-link {
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .window-controls span {
        min-width: 30px;
        min-height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* Landscape mode on mobile */
@media screen and (max-width: 768px) and (orientation: landscape) {
    .hero-flex {
        flex-direction: row;
        align-items: flex-start;
    }

    .hero-image-container {
        max-width: 40%;
    }

    .hero-text {
        flex: 1;
        text-align: right;
    }

    #video .window-content iframe {
        height: 250px;
    }
}

/* Ensure images and videos are responsive */
img,
video {
    max-width: 100%;
    height: auto;
}

#video .window-content iframe {
    width: 100%;
    aspect-ratio: 16/9;
}

/* ===========================================
   LIGHTBOX STYLES
   =========================================== */

.lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 10001;
}

.lightbox-overlay.active {
    display: flex;
}

.lightbox-content {
    background: var(--win-bg);
    border: 2px outset var(--win-border-light);
    max-width: 90vw;
    max-height: 90vh;
    animation: modalSlideIn 0.3s ease-out;
}

.lightbox-header {
    background: linear-gradient(90deg, #000000, var(--accent-secondary));
    color: white;
    padding: 3px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
    font-size: 0.9rem;
}

.lightbox-close {
    background: var(--win-bg);
    color: black;
    border: 1px outset white;
    padding: 0 8px;
    cursor: pointer;
    font-family: Arial;
}

.lightbox-close:hover {
    background: var(--accent-main);
    color: white;
}

.lightbox-img {
    display: block;
    max-width: 85vw;
    max-height: 80vh;
    border: 1px inset white;
    margin: 2px;
    filter: sepia(0.3) contrast(1.2) grayscale(0.5);
}

/* Make gallery images clickable */
.gallery-grid .photo-frame img {
    cursor: zoom-in;
}

@media screen and (max-width: 480px) {
    .lightbox-content {
        max-width: 95vw;
    }

    .lightbox-img {
        max-width: 92vw;
        max-height: 75vh;
    }

    .lightbox-header {
        font-size: 0.75rem;
        padding: 2px 6px;
    }
}

/* ===========================================
   WINDOWS MEDIA PLAYER STYLE
   =========================================== */

.wmp-window {
    background: linear-gradient(180deg, #2a4a7a 0%, #1a2a4a 100%);
    border: 2px outset #6a8aba;
    border-radius: 8px 8px 0 0;
    max-width: 90vw;
    width: 500px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
    animation: modalSlideIn 0.3s ease-out;
}

.wmp-titlebar {
    background: linear-gradient(180deg, #4a7aba 0%, #2a4a7a 50%, #1a3a6a 100%);
    color: white;
    padding: 4px 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 6px 6px 0 0;
    font-size: 0.85rem;
    font-weight: bold;
}

.wmp-title-left {
    display: flex;
    align-items: center;
    gap: 6px;
}

.wmp-icon {
    background: linear-gradient(135deg, #ff6600, #ff9900);
    color: white;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    font-size: 10px;
}

.wmp-menubar {
    background: #d4d0c8;
    padding: 2px 5px;
    display: flex;
    gap: 15px;
    font-size: 0.75rem;
    color: black;
    border-bottom: 1px solid #808080;
}

.wmp-menubar span:hover {
    background: #316ac5;
    color: white;
    padding: 0 3px;
}

.wmp-video-container {
    background: #000;
    padding: 2px;
    position: relative;
    overflow: hidden;
}

.wmp-video-container video {
    width: 100%;
    max-height: 50vh;
    display: block;
    /* Old tape look - washed out, warm tones */
    filter: saturate(0.75) contrast(1.1) brightness(1.05) sepia(0.15);
    animation: oldTapeFlicker 0.1s infinite;
}

/* Old tape flicker effect */
@keyframes oldTapeFlicker {

    0%,
    100% {
        opacity: 1;
        filter: saturate(0.75) contrast(1.1) brightness(1.05) sepia(0.15);
    }

    50% {
        opacity: 0.98;
        filter: saturate(0.73) contrast(1.12) brightness(1.03) sepia(0.16);
    }
}

/* Vignette - darker edges like old TV */
.wmp-video-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center,
            transparent 40%,
            rgba(0, 0, 0, 0.4) 100%);
    pointer-events: none;
    z-index: 2;
}

/* Hide tracking and noise */
.vhs-tracking {
    display: none;
}

.wmp-video-container::after {
    display: none;
}

/* Hide default controls, we'll use custom ones */
.wmp-video-container video::-webkit-media-controls {
    display: none !important;
}

/* ===========================================
   90s CAMCORDER OVERLAY - HIDDEN
   =========================================== */

.camcorder-overlay {
    display: none;
}

/* REC indicator */
.cam-rec {
    position: absolute;
    top: 25px;
    right: 25px;
    color: #fff;
    font-size: 1.2rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 10px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    animation: recBlink 1s infinite;
}

.rec-dot {
    width: 12px;
    height: 12px;
    background: #ff0000;
    border-radius: 50%;
    box-shadow: 0 0 8px #ff0000;
    animation: recDotBlink 1s infinite;
}

@keyframes recBlink {

    0%,
    49% {
        opacity: 1;
    }

    50%,
    100% {
        opacity: 0.3;
    }
}

@keyframes recDotBlink {

    0%,
    49% {
        opacity: 1;
        box-shadow: 0 0 12px #ff0000;
    }

    50%,
    100% {
        opacity: 0.5;
        box-shadow: 0 0 4px #ff0000;
    }
}

/* Battery indicator */
.cam-battery {
    position: absolute;
    top: 25px;
    left: 25px;
    display: flex;
    align-items: center;
    gap: 5px;
    color: white;
    font-size: 0.9rem;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.battery-icon {
    font-size: 1rem;
}

.battery-bar {
    width: 30px;
    height: 12px;
    border: 2px solid white;
    border-radius: 2px;
    position: relative;
    background: rgba(0, 0, 0, 0.3);
}

.battery-bar::after {
    content: "";
    position: absolute;
    right: -5px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 6px;
    background: white;
    border-radius: 0 2px 2px 0;
}

.battery-level {
    height: 100%;
    width: 70%;
    background: #00ff00;
    animation: batteryDrain 30s linear infinite;
}

@keyframes batteryDrain {
    0% {
        width: 100%;
        background: #fff;
    }

    50% {
        width: 50%;
        background: #fff;
    }

    80% {
        width: 30%;
        background: #fff;
    }

    100% {
        width: 100%;
        background: #fff;
    }
}

/* Timestamp */
.cam-timestamp {
    position: absolute;
    bottom: 30px;
    right: 30px;
    color: #fff;
    font-size: 1.4rem;
    line-height: 1.1;
    text-align: right;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

/* SP (Standard Play) indicator */
.cam-sp {
    position: absolute;
    top: 50px;
    right: 330px;
    /* Positioned near play based on reference */
    color: #fff;
    font-size: 1.2rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

/* Play and SP group matching reference */
.cam-play-indicator {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 1.6rem;
    text-align: center;
    font-family: 'VT323', monospace;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
    opacity: 0;
    z-index: 10;
}

.cam-play-indicator.active {
    opacity: 1;
}

.cam-sp {
    position: absolute;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 1.4rem;
    font-family: 'VT323', monospace;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
    z-index: 10;
}

/* Redefine REC position - moved to top right */
.cam-rec {
    position: absolute;
    top: 25px;
    right: 25px;
    left: auto;
    color: #fff;
    font-family: 'VT323', monospace;
    font-size: 1.2rem;
    z-index: 10;
}


/* Mobile adjustments for camcorder overlay */
@media screen and (max-width: 480px) {
    .cam-rec {
        font-size: 0.9rem;
        top: 8px;
        left: 8px;
    }

    .rec-dot {
        width: 8px;
        height: 8px;
    }

    .cam-battery {
        top: 8px;
        right: 8px;
        font-size: 0.7rem;
    }

    .battery-bar {
        width: 20px;
        height: 8px;
    }

    .cam-timestamp {
        font-size: 0.8rem;
        bottom: 8px;
        right: 8px;
    }

    .cam-sp {
        font-size: 0.7rem;
        bottom: 8px;
        left: 8px;
        padding: 1px 4px;
    }
}

.wmp-controls {
    background: linear-gradient(180deg, #3a5a8a 0%, #2a4a7a 100%);
    padding: 8px;
}

.wmp-progress {
    background: #1a2a4a;
    height: 12px;
    border: 1px inset #0a1a3a;
    border-radius: 2px;
    margin-bottom: 8px;
    overflow: hidden;
}

.wmp-progress-bar {
    background: linear-gradient(180deg, #6a9aca 0%, #4a7aba 50%, #3a6aaa 100%);
    height: 100%;
    width: 0%;
    transition: width 0.1s linear;
}

.wmp-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.wmp-btn {
    background: linear-gradient(180deg, #4a6a9a 0%, #3a5a8a 50%, #2a4a7a 100%);
    border: 1px outset #6a8aba;
    color: white;
    width: 32px;
    height: 28px;
    cursor: pointer;
    border-radius: 3px;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wmp-btn:hover {
    background: linear-gradient(180deg, #5a7aaa 0%, #4a6a9a 50%, #3a5a8a 100%);
}

.wmp-btn:active {
    border: 1px inset #4a6a9a;
}

.wmp-volume {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-left: 15px;
    color: white;
    font-size: 14px;
}

.wmp-volume input[type="range"] {
    width: 80px;
    height: 8px;
    -webkit-appearance: none;
    appearance: none;
    background: #1a2a4a;
    border-radius: 2px;
    border: 1px inset #0a1a3a;
}

.wmp-volume input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 18px;
    background: linear-gradient(180deg, #6a8aba 0%, #4a6a9a 100%);
    border: 1px outset #8aaaca;
    border-radius: 2px;
    cursor: pointer;
}

.wmp-statusbar {
    background: #d4d0c8;
    padding: 3px 8px;
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    color: black;
    border-top: 1px solid #808080;
}

/* Gallery video clickable */
.gallery-grid .photo-frame video {
    cursor: pointer;
    filter: sepia(0.2) contrast(1.1) grayscale(0.2);
}

.gallery-grid .photo-frame:has(video)::after {
    content: "\25B6";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(145deg, #4a4a4a 0%, #2a2a2a 50%, #1a1a1a 100%);
    color: #c0c0c0;
    font-size: 2rem;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 4px;
    pointer-events: none;
    z-index: 3;
    border: 3px outset #808080;
    box-shadow:
        inset 2px 2px 4px rgba(255, 255, 255, 0.2),
        inset -2px -2px 4px rgba(0, 0, 0, 0.4),
        3px 3px 8px rgba(0, 0, 0, 0.6);
    text-shadow: 1px 1px 2px #000;
    transition: transform 0.2s, border 0.2s;
}

.gallery-grid .photo-frame:has(video):hover::after {
    border: 3px inset #808080;
    transform: translate(-50%, -50%) scale(1.05);
}

/* Mobile video play button */
@media screen and (max-width: 480px) {
    .gallery-grid .photo-frame:has(video)::after {
        width: 40px;
        height: 40px;
        font-size: 1.5rem;
        padding-left: 3px;
    }
}

@media screen and (max-width: 480px) {
    .wmp-window {
        width: 95vw;
    }

    .wmp-titlebar {
        font-size: 0.75rem;
        padding: 3px 5px;
    }

    .wmp-menubar {
        font-size: 0.65rem;
        gap: 8px;
    }

    .wmp-btn {
        width: 28px;
        height: 24px;
        font-size: 10px;
    }

    .wmp-volume input[type="range"] {
        width: 50px;
    }

    .wmp-statusbar {
        font-size: 0.6rem;
    }
}