@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&family=Bangers&family=Space+Mono:wght@400;700&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Space Mono', monospace;
    background: radial-gradient(ellipse at 10% 10%, rgba(255,95,109,0.06), transparent 10%),
                radial-gradient(ellipse at 90% 90%, rgba(255,195,113,0.04), transparent 10%),
                linear-gradient(180deg, #050505 0%, #0e0e0e 100%);
    color: #fff;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    position: relative;
    overflow: auto;
}

/* subtle rough brick/texture using gradients to read like a wall */
body::before,
body::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    mix-blend-mode: screen;
    opacity: 0.12;
}
body::before {
    background:
      radial-gradient(circle at 10% 20%, rgba(255,95,109,0.6) 0%, transparent 12%),
      radial-gradient(circle at 80% 80%, rgba(0,225,255,0.45) 0%, transparent 14%),
      repeating-linear-gradient(0deg, rgba(0,0,0,0.02) 0 2px, transparent 2px 20px);
    filter: blur(16px);
}
body::after {
    background:
      radial-gradient(circle at 25% 75%, rgba(255,255,255,0.03) 0%, transparent 10%),
      linear-gradient(180deg, rgba(0,0,0,0.06), transparent 30%);
    mix-blend-mode: overlay;
    filter: contrast(120%) saturate(120%);
}

.container {
    width: 100%;
    max-width: 980px; /* increased width for bigger boxes */
    position: relative;
    z-index: 5; /* bring above ambient layer */
    /* subtle foreground transparency so the photo shows through */
    opacity: 0.70;
}

/* New: Page title graffiti styling */
.page-title {
    font-family: 'Bangers', 'Permanent Marker', sans-serif;
    font-size: 64px; /* larger title */
    line-height: 1;
    margin-bottom: 18px;
    color: #ffd54e;
    text-shadow:
        0 2px 0 rgba(0,0,0,0.7),
        0 6px 18px rgba(0,0,0,0.6),
        0 0 18px rgba(255,95,109,0.12);
    letter-spacing: 1px;
    transform: rotate(-2deg);
    display: inline-block;
    padding: 8px 12px;
    border-radius: 8px;
    background: linear-gradient(90deg, rgba(0,0,0,0.18), rgba(255,255,255,0.02));
    border: 2px solid rgba(255,255,255,0.03);
    box-shadow: 0 10px 30px rgba(255,95,109,0.06), inset 0 -8px 18px rgba(0,0,0,0.35);
}

/* decorative SVG at top */
.graffiti-decor {
    width: 100%;
    height: 80px;
    margin-bottom: 12px;
    pointer-events: none;
    overflow: visible;
}
.splat { width: 110%; height: 100%; transform: translateX(-5%); }

/* NEW: graffiti layered stickers + spraycan */
.graffiti-layer {
    position: absolute;
    left: 4%;
    top: 6px;
    right: 4%;
    height: 86px;
    pointer-events: none;
    z-index: 3;
}
.spraycan {
    position: absolute;
    left: 8px;
    top: -6px;
    transform: rotate(-10deg) scale(1.08);
    filter: drop-shadow(0 6px 12px rgba(0,0,0,0.6));
    opacity: 0.95;
}
.sticker {
    position: absolute;
    display: inline-block;
    padding: 6px 10px;
    border-radius: 6px;
    font-family: 'Permanent Marker', 'Bangers', monospace;
    font-size: 12px;
    color: #0b0b0b;
    background: linear-gradient(180deg,#ffd54e,#ff5f6d);
    transform-origin: center;
    box-shadow: 0 8px 20px rgba(0,0,0,0.5);
    text-shadow: none;
    letter-spacing: 0.6px;
    mix-blend-mode: multiply;
    opacity: 0.96;
}
.sticker--top { right: 8px; top: 6px; transform: rotate(-8deg) scale(1.06); }
.sticker--left { left: 64px; top: 10px; transform: rotate(12deg) scale(0.93); background: linear-gradient(180deg,#6ee7b7,#34d399); color:#07120a; }
.sticker--right { right: 88px; top: 34px; transform: rotate(-18deg) scale(0.98); background: linear-gradient(180deg,#60a5fa,#7c3aed); color:#fff; }

/* paint drips for a fresh-spray look */
.paint-drips {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 64px;
    pointer-events: none;
    overflow: visible;
    mix-blend-mode: screen;
}
.paint-drips span {
    position: absolute;
    bottom: -6px;
    left: var(--x, 10%);
    width: 10px;
    height: var(--h, 48px);
    background: linear-gradient(180deg, rgba(255,95,109,0.95), rgba(255,195,113,0.9));
    border-radius: 8px 8px 40px 40px;
    transform: translateX(-50%) rotate(-6deg);
    filter: blur(0.6px);
    opacity: 0.92;
}

/* input section with gritty texture */
.input-section {
    margin-bottom: 18px;
    /* make the input card more translucent so background image is more visible */
    background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.006));
    border: 1px solid rgba(255,255,255,0.04);
    padding: 20px; /* larger padding */
    border-radius: 14px; /* slightly rounder */
    box-shadow: 0 10px 40px rgba(0,0,0,0.6), inset 0 -8px 22px rgba(0,0,0,0.4);
    position: relative;
    overflow: visible;
}

/* torn paper edge for the card feel */
.input-section::after {
    content: "";
    position: absolute;
    left: -8px;
    right: -8px;
    bottom: -12px;
    height: 12px;
    background: linear-gradient(180deg, rgba(0,0,0,0.18), rgba(255,255,255,0.02));
    mask-image: radial-gradient(circle at 10% 40%, transparent 6px, black 8px);
    opacity: 0.5;
    pointer-events: none;
}

/* textarea looks spray-painted with rough edges */
#wordInput {
    width: 100%;
    min-height: 220px; /* taller textarea for bigger input */
    padding: 20px;
    font-family: 'Space Mono', monospace;
    font-size: 20px; /* larger text */
    background: linear-gradient(180deg, #141414, #0f0f0f);
    border: 2px dashed rgba(255,255,255,0.06);
    color: #fff;
    border-radius: 10px;
    resize: vertical;
    margin-bottom: 14px;
    box-shadow: 0 8px 22px rgba(0,0,0,0.6);
    line-height: 1.6;
    position: relative;
}

/* placeholder slightly grungy */
#wordInput::placeholder {
    color: #9b9b9b;
    font-style: italic;
}

/* buttons adopt bold graffiti fonts */
button {
    width: 100%;
    padding: 18px; /* larger tap area */
    font-family: 'Bangers', 'Permanent Marker', 'Space Mono', monospace;
    font-size: 24px; /* bigger text for buttons */
    font-weight: 700;
    background: linear-gradient(90deg, #ff5f6d 0%, #ffc371 100%);
    color: #0a0310;
    border: none;
    border-radius: 12px; /* larger radius */
    cursor: pointer;
    transition: transform 0.08s, box-shadow 0.18s, opacity 0.12s;
    box-shadow: 0 10px 30px rgba(255,95,109,0.16), 0 3px 8px rgba(0,0,0,0.6);
    text-shadow: 0 1px 0 rgba(255,255,255,0.08);
    letter-spacing: 0.6px;
}

/* distinct generate button */
button.generate {
    background: linear-gradient(90deg, #ffd54e 0%, #ff5f6d 60%);
    color: #12060a;
    transform-origin: center;
}

button:hover {
    opacity: 0.98;
    transform: translateY(-2px) rotate(-0.6deg);
    box-shadow: 0 14px 36px rgba(255,95,109,0.18);
}

button:active {
    transform: translateY(0) rotate(0);
}

button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* output section: gritty card with neon trim */
.output-section {
    /* soften the foreground card so the background photo reads through */
    background: linear-gradient(180deg, rgba(15,15,15,0.6), rgba(11,11,11,0.5));
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 14px;
    padding: 24px; /* more spacious padding */
    margin-bottom: 18px;
    box-shadow: 0 16px 48px rgba(0,0,0,0.6);
    position: relative;
    overflow: hidden;
}

/* neon edge */
.output-section::before {
    content: "";
    position: absolute;
    left: -2px;
    top: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 14px;
    padding: 2px;
    background: linear-gradient(90deg, rgba(255,95,109,0.12), rgba(255,195,113,0.08));
    -webkit-mask: linear-gradient(#fff, #fff) content-box, linear-gradient(#fff, #fff);
    mask: linear-gradient(#fff, #fff) content-box, linear-gradient(#fff, #fff);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

/* lyrics stylings to feel like poster text */
.lyrics-container {
    /* show entire song on screen (no internal scroll) */
    max-height: none;
    overflow-y: visible;
    margin-bottom: 14px;
    padding-right: 8px;
}

/* stronger graffiti-style for lyrics */
#lyrics {
    font-size: 42px; /* much larger lyric text */
    line-height: 1.6; /* tightened a bit for better reading */
    white-space: pre-wrap;
    color: #fff;
    text-shadow: 0 3px 8px rgba(0,0,0,0.75), 0 1px 0 rgba(255,255,255,0.02);
    font-family: 'Permanent Marker', 'Space Mono', monospace;
    letter-spacing: 0.2px;
    background: linear-gradient(90deg, rgba(255,255,255,0.03), rgba(255,95,109,0.02));
    padding: 16px 14px; /* bigger padding */
    border-radius: 12px;
    border: 1px dashed rgba(255,255,255,0.03);
    transform: rotate(-0.6deg);
    display: inline-block;
}

/* play button darker */
.play-btn {
    background: linear-gradient(90deg, #222 0%, #333 100%);
    color: #ffd;
    font-family: 'Bangers', 'Permanent Marker', monospace;
    padding: 14px;
    font-size: 18px;
}

/* subtle graffiti stamps on edges */
.container::after {
    content: "STREET VERSE";
    position: absolute;
    right: 8px;
    bottom: 8px;
    font-family: 'Permanent Marker', monospace;
    font-size: 12px;
    color: rgba(255,255,255,0.06);
    transform: rotate(-18deg);
    letter-spacing: 1.6px;
    pointer-events: none;
}

/* Hidden background YouTube player: keep offscreen/transparent but allow audio */
#bgPlayerWrap {
    position: absolute;
    width: 1px;
    height: 1px;
    left: -9999px;
    top: -9999px;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
}
#bgPlayer {
    width: 560px; /* standard embed size but placed offscreen */
    height: 315px;
    border: 0;
    display: block;
}

.hidden {
    display: none;
}

.loading {
    text-align: center;
    padding: 36px 20px;
}

/* spinner brighter */
.spinner {
    width: 44px;
    height: 44px;
    margin: 0 auto 12px;
    border: 4px dashed rgba(255,255,255,0.08);
    border-top-color: #ffd54e;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* ambient overlay sits behind container but above background */
.ambient {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
}

/* subtle vinyl/film grain across whole view */
.ambient::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(transparent 0%, rgba(0,0,0,0.02) 50%, transparent 100%);
    mix-blend-mode: overlay;
    opacity: 0.08;
    pointer-events: none;
}

/* drifting smoke layer to add atmosphere */
.smoke {
    position: absolute;
    left: -10%;
    top: -20%;
    width: 120%;
    height: 140%;
    background: radial-gradient(ellipse at 20% 20%, rgba(255,255,255,0.04), transparent 8%),
                radial-gradient(ellipse at 80% 60%, rgba(255,255,255,0.03), transparent 10%),
                radial-gradient(ellipse at 40% 70%, rgba(255,180,80,0.02), transparent 12%);
    filter: blur(18px) saturate(90%);
    opacity: 0.55;
    transform: translateY(-6px);
    animation: smokeDrift 12s linear infinite;
    mix-blend-mode: screen;
    pointer-events: none;
}

/* eq bars */
.eq {
    position: absolute;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    align-items: end;
    z-index: 4;
    pointer-events: none;
    opacity: 0.95;
}
.eq span {
    display: block;
    width: 8px;
    height: 12px;
    background: linear-gradient(180deg, rgba(255,95,109,0.95), rgba(255,195,113,0.95));
    border-radius: 4px;
    transform-origin: bottom center;
    animation: eqPulse var(--d, 1s) ease-in-out infinite;
    box-shadow: 0 6px 14px rgba(255,95,109,0.06);
}

/* stagger durations for organic movement */
.eq span:nth-child(1){ --d: .72s; animation-delay: -0.12s; }
.eq span:nth-child(2){ --d: .94s; animation-delay: -0.24s; }
.eq span:nth-child(3){ --d: .86s; animation-delay: -0.36s; }
.eq span:nth-child(4){ --d: 1.12s; animation-delay: -0.48s; }
.eq span:nth-child(5){ --d: .78s; animation-delay: -0.6s; }
.eq span:nth-child(6){ --d: 1.0s; animation-delay: -0.72s; }
.eq span:nth-child(7){ --d: .9s; animation-delay: -0.84s; }

@keyframes eqPulse {
    0% { transform: scaleY(0.25); opacity: 0.6; }
    50% { transform: scaleY(1.8); opacity: 1; }
    100% { transform: scaleY(0.3); opacity: 0.6; }
}

@keyframes smokeDrift {
    0% { transform: translateY(-12px) translateX(-2%); opacity: 0.45; }
    50% { transform: translateY(8px) translateX(2%); opacity: 0.6; }
    100% { transform: translateY(-12px) translateX(-2%); opacity: 0.45; }
}

/* mute button floating over content */
.mute-btn {
    position: fixed;
    right: 14px;
    bottom: 14px;
    z-index: 6;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    background: rgba(10,10,10,0.6);
    color: #ffd54e;
    box-shadow: 0 8px 24px rgba(0,0,0,0.6);
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    transition: transform .12s ease, opacity .12s ease;
}

/* small pressed state */
.mute-btn[aria-pressed="true"] {
    transform: scale(.96);
    background: rgba(255,95,109,0.12);
    color: #ffb86b;
}

/* keep small screen clear */
@media (max-width: 480px) {
    .container { max-width: 96%; padding: 8px; }
    .eq { bottom: 10px; gap: 4px; }
    .eq span { width: 6px; }
    .mute-btn { width: 44px; height: 44px; right: 8px; bottom: 8px; }
    #wordInput { min-height: 170px; font-size: 18px; } /* slightly reduced for small screens */
    #lyrics { font-size: 24px; line-height: 1.5; } /* scaled down for mobile fit */
}

/* photographic background layer (place a Travis Scott photo at /travis-photo.jpg) */
.background-photo {
    position: fixed;
    inset: 0;
    z-index: 0;
    background-image: url('/141743.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    filter: grayscale(6%) contrast(92%) brightness(62%);
    opacity: 0.28;
    pointer-events: none;
    transform-origin: center;
}

/* ensure main container stays above photo and ambient sits between */
.ambient { z-index: 2; }
.container { z-index: 5; }