body {
    background: linear-gradient(135deg, #1a1a1a 0%, #5d0000 100%);
    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Montserrat', 'Verdana', sans-serif;
}
.container {
    width: 100vw;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.big-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #b60000;
    color: #fff;
    font-size: 2.2em;
    font-weight: 700;
    border-radius: 50px;
    padding: 38px 60px;
    box-shadow: 0 2px 28px #000c, 0 0px 0px #fff6 inset;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, box-shadow 0.2s, transform 0.18s;
    outline: none;
    letter-spacing: 1px;
    margin-bottom: 20px;
    user-select: none;
    touch-action: manipulation;
    position: relative;
    text-shadow: 0 2px 7px #0008;
    overflow: hidden;
}
.big-btn:active {
    background: #5d0000;
    color: #eee;
    box-shadow: 0 2px 16px #b60000;
    transform: scale(0.98);
}
.icon {
    margin-right: 20px;
    font-size: 2em;
    vertical-align: middle;
    filter: drop-shadow(0 2px 5px #0007);
    transition: transform 0.5s cubic-bezier(.68,-0.55,.27,1.55), color .4s;
}
.big-btn.playing .icon {
    transform: rotate(-30deg) scale(1.15);
    color: #ffd700;
    animation: swing 1.1s infinite cubic-bezier(.68,-0.55,.27,1.55) alternate;
}
.big-btn.paused .icon {
    transform: none;
    color: #fff;
    animation: none;
}
.big-btn.playing {
    animation: pulse-btn 1s infinite alternate;
    background: #d40000;
    color: #fff;
    box-shadow: 0 4px 38px #d40000a0;
}
@keyframes pulse-btn {
    from { box-shadow: 0 2px 28px #d40000a0, 0 0px 0px #fff6 inset; }
    to { box-shadow: 0 6px 54px #ff0033a0, 0 0px 0px #fff6 inset; transform: scale(1.05);}
}
@keyframes swing {
    0% { transform: rotate(-30deg) scale(1.15);}
    50% { transform: rotate(30deg) scale(1.15);}
    100% { transform: rotate(-30deg) scale(1.15);}
}
@media (max-width: 600px) {
    .big-btn { font-size: 1.3em; padding: 22px 10vw; }
    .icon { font-size: 1.5em; margin-right: 10px; }
}
h1 {
    color: #fff;
    font-size: 2em;
    font-weight: 700;
    margin-bottom: 28px;
    text-shadow: 0 2px 7px #0008;
    letter-spacing: 1px;
    user-select: none;
    word-break: break-word;
    width: 100%;
    text-align: center;
}

@media (max-width: 375px) {
    h1 {
        font-size: 1.2em;
    }
    .big-btn {
        font-size: 1em;
        padding: 16px 6vw;
        border-radius: 40px;
    }
    .icon {
        font-size: 1.2em;
        margin-right: 6px;
    }
}

@media (min-width: 900px) {
    h1 {
        font-size: 3em;
    }
}