* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32"><text y="24" font-size="24">🍺</text></svg>'), auto !important;
}

body { 
    display: flex; 
    flex-direction: column; 
    height: 100vh; 
    /* Subtle bamboo/wood repeating pattern */
    background-image: url("sources/Bamboo2.jpg");
    background-size:1200px;
    color: #FFFF00; 
    font-family: "Comic Sans MS", "Comic Sans", cursive;
    overflow: hidden;
}

header, footer {
    height: 80px; 
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #000000;
    border: 5px dashed #00FF00; 
    z-index: 20;
    font-size: 28px;
    font-weight: bold;
    text-transform: uppercase;
    position: relative;
}

marquee {
    width: 100%;
}

#big-shop-link {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 45px;
    color: #FFFFFF;
    background-color: #CC0000; 
    border: 6px solid #0000AA;
    padding: 5px 20px;
    text-decoration: underline;
    text-shadow: 3px 3px #000000;
    box-shadow: 8px 8px 0px #000000;
    z-index: 100;
    animation: slow-blink 1.5s ease-in-out infinite;
}

#big-shop-link:hover {
    background-color: #0000AA;
    color: #FFFFFF;
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32"><text y="24" font-size="24">🍻</text></svg>'), pointer !important;
}

@keyframes slow-blink {
    50% { opacity: 0.6; }
}

.blink {
    animation: blinker 0.3s linear infinite;
}

@keyframes blinker {
    50% { opacity: 0; }
}

#canvas-container {
    width: 900px; /* Expanded from 500px */
    height: 500px;
    position: relative;
    overflow: hidden;
    margin: auto; 
    border: 12px ridge #FF0000; 
    background:#87cefa;
    box-shadow: 15px 15px 0px #FFFF00; 
    z-index: 10;
}

canvas { 
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    z-index: 1;
    display: block; 
}

#tooltip {
    position: absolute;
    background: #0000FF;
    color: #FFFFFF;
    padding: 5px 3px; 
    border: 4px dotted #FF0000;
    border-radius: 0px; 
    font-size: 14px; 
    font-family: "Comic Sans MS", "Comic Sans", cursive;
    font-weight: bold;
    pointer-events: none; 
    display: none; 
    z-index: 10;
    text-shadow: 2px 2px #000000;
}

.lofi-asset {
  position: absolute;
    z-index: 5;
    font-size: 80px;
    pointer-events: auto; /* was 'none' — now they can be clicked/dragged */
    cursor: grab;
    user-select: none; /* prevents text selection while dragging emoji
}
.lofi-asset.dragging {
    cursor: grabbing;
    z-index: 999; /* bring to front while dragging */
}

.lofi-asset img {
    width: 100px; /* Controls image sizing if you use your own files */
}

#dolphin-1 { top: 15%; left: 10%; animation: spin 3s linear infinite; }
#dolphin-2 { bottom: 25%; right: 15%; animation: bounce 1s alternate infinite; }
#hula-girl { bottom: 5%; left: 20%; font-size: 120px; animation: shake 0.5s alternate infinite; }
#palm-1 { top: 8%; left: 1%; font-size: 180px; animation: shake 2s alternate infinite; }
#palm-2 { top: 8%; right: 1%; font-size: 180px; transform: scaleX(-1); animation: shake 2.5s alternate infinite; }
#bamboo-1 { top: 40%; left: 35%; font-size: 100px; animation: bounce 0.8s alternate infinite; }
#firework-1 { top: 15%; left: 85%; font-size: 150px; animation: explode 0.4s alternate infinite; }
#firework-2 { top: 15%; right: 30%; font-size: 110px; animation: explode 0.6s alternate infinite; }
#solo-cup-1 { bottom: 18%; left: 40%; font-size: 80px; animation: spin 4s linear infinite; }
#solo-cup-2 { bottom: 12%; right: 22%; font-size: 90px; animation: spin 2s linear infinite reverse; }

@keyframes spin { 100% { transform: rotate(360deg); } }
@keyframes bounce { 100% { transform: translateY(-40px); } }
@keyframes shake { 0% { transform: rotate(-15deg); } 100% { transform: rotate(15deg); } }
@keyframes explode { 0% { transform: scale(0.8); opacity: 0.2; } 100% { transform: scale(1.3); opacity: 1; } }

/* --- 90s RADIO PLAYER UI (PARTY AESTHETIC) --- */
#radio-player {
    position: absolute;
    bottom: 95px; 
    right: 20px;
    width: 250px;
    background-color: #FF1493; /* Hot Pink Base */
    border-top: 2px solid #FF69B4;
    border-left: 2px solid #FF69B4;
    border-bottom: 2px solid #8B008B;
    border-right: 2px solid #8B008B;
    box-shadow: 5px 5px 0px #000000; /* Hard shadow */
    font-family: 'MS Sans Serif', Tahoma, Arial, sans-serif; 
    color: #FFFFFF;
    z-index: 150;
    padding: 4px;
    cursor: default !important; 
}

#radio-player * {
    cursor: default !important;
}

#radio-title-bar {
    background-color: #00FF00;
    color: #000000;
    font-weight: bold;
    text-align: center;
    padding: 3px;
    font-size: 14px;
    margin-bottom: 5px;
    border: 1px solid #000000;
    position: relative; /* so the button can be positioned inside it */
}

#radio-toggle-btn {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer !important;
    color: #000000;
}

#radio-inner {
   background-color: #00FFFF;
    color: #000000;
    border-top: 2px solid #808080;
    border-left: 2px solid #808080;
    border-bottom: 2px solid #ffffff;
    border-right: 2px solid #ffffff;
    padding: 12px;
    text-align: center;
    max-height: 500px; /* large enough to fit content when expanded */
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
}

#radio-player.collapsed #radio-inner {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
}

.radio-text-bold { font-weight: bold; font-size: 12px; margin-bottom: 2px; }
.radio-title { font-weight: bold; font-size: 18px; margin-bottom: 2px; }
.radio-artist { font-size: 12px; margin-bottom: 12px; }

.radio-art {
    width: 80px;
    height: 80px;
    background-color: #FF00FF;
    border: 2px solid #000000;
    margin: 0 auto 15px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-size: 32px;
    letter-spacing: -2px;
    animation: blinker 1s linear infinite;
}

.radio-progress-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    margin-bottom: 10px;
}

.radio-progress-bar {
    flex-grow: 1;
    height: 8px;
    background-color: #ffffff;
    margin: 0 10px;
    position: relative;
    border: 1px solid #808080;
}

.radio-progress-fill {
    width: 0%; /* JS will update this */
    height: 100%;
    background-color: #FF1493;
}

.radio-controls {
    margin-bottom: 10px;
}

.win95-btn {
    background-color: #d4d0c8;
    color: #000000;
    border-top: 2px solid #ffffff;
    border-left: 2px solid #ffffff;
    border-bottom: 2px solid #404040;
    border-right: 2px solid #404040;
    box-shadow: inset -1px -1px #808080, inset 1px 1px #dfdfdf;
    padding: 4px 20px;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer !important;
}

.win95-btn:active {
    border-top: 2px solid #404040;
    border-left: 2px solid #404040;
    border-bottom: 2px solid #ffffff;
    border-right: 2px solid #ffffff;
    box-shadow: inset 1px 1px #808080;
    padding: 5px 19px 3px 21px; 
}

.radio-volume {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    margin-bottom: 15px;
}

.radio-volume input {
    margin: 0 10px;
    width: 110px;
    cursor: pointer !important;
}

.queue-btn {
    width: 100%;
    font-size: 12px;
}

@media (max-width: 768px) {
    body {
        overflow-y: auto; /* allow scrolling on mobile since things won't all fit */
        background-size: 600px; /* smaller bamboo tile for smaller screens */
    }

    header, footer {
        height: 50px;
        font-size: 16px;
    }

    #big-shop-link {
        font-size: 22px;
        padding: 4px 12px;
    }

    #canvas-container {
        width: 95vw;
        height: 60vw; /* scales with width, keeps roughly same aspect ratio */
        border-width: 6px; /* scale down the thick border too */
        box-shadow: 8px 8px 0px #FFFF00;
    }

    /* Hide or shrink decorative lofi assets so they don't overlap/clutter small screens */
    .lofi-asset {
        display: none; /* simplest option — hide palm trees, fireworks, etc entirely */
    }

    
}