@import url(https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&display=swap);
@font-face {
    font-family: "Vanilla-Whale";
    font-style: normal;
     src: url(f9dc527f2417333d9616.otf);
}

@font-face {
    font-family: "Curly";
    font-style: normal;
    src: url(25db81b8054ea00773ac.otf);
}

@font-face {
    font-family: 'Cabin Sketch';
    font-style: normal;
    src: local('Cabin Sketch Regular'), local('CabinSketch-Regular'), url(2d4524fa96d4485f0907.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

@font-face {
    font-family: 'Kreon';
    font-style: normal;
    src: local('Kreon Regular'), local('Kreon-Regular'), url(c901f10d0c91a1b50d5c.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

@font-face {
    font-family: 'ds-term';
    font-style: normal;
    src: local('ds terminal'), local('DS-TERM'), url(de4989403599dd156386.TTF);
}

@font-face {
    font-family: 'larissa';
    font-style: normal;
    src: local('Larissa'), local('larissa'), url(a7996dca4fba4399bf54.ttf);
}

@font-face {
    font-family: 'll-pixel';
    font-style: normal;
    src: local('LL Pixel'), local('ll-pixel'), url(2e5d04eb2cbd829a61b1.ttf);
}

@font-face {
    font-family: "fell";
    src: url(fd9b51251ef83712c852.ttf);
}

@font-face {
    font-family: "fell";
    src: url(8a50eaa509964303ca3f.ttf);
    font-weight: bold;
}

@font-face {
    font-family: "fell";
    src: url(06d18cf88bfd6d2eb544.ttf);
    font-weight: bold;
    font-style: italic;
}

.vanilla {
    font-family: Vanilla-Whale;
}

.curly {
    font-family: "Curly";
}

.larissa {
    font-family: "larissa";
}

.pixel-font {
    font-family: 'll-pixel' !important;
}

.fell-font {
    font-family: 'fell';
}

.cabin {
    font-family: "Cabin Sketch";
}

.kreon {
    font-family: "Kreon";
}

html {
    --font-scale: 1;
}

body#bodyWithBackground {
    background-image: url(9909d53f79b8750c8c70.png);
    height: 100%;
    margin: 0;
    font-family: fell serif;
    color: white;
}

a {
    text-decoration: none;
    color: #99c9ff;
    text-shadow: #000 1px 1px 2px;
}

a:hover {
    color: #ffb06b;
    text-shadow: 1px 1px 3px black, 0px 0px 10px black;
    text-decoration: underline;
}

#page-build-metadata {
    font-size: 5px;
}

#vowel-sounds a {
    color: #83d0ff;
}

#vowel-sounds a:hover {
    color: black;
}

.person-bio, .bio-caption, .bio-title, h1, #about-text, .text-shadow {
    text-shadow: -1px -1px 2px black, 1px 1px 3px black, 0px 0px 10px black;
}

.person-info img {
    max-height: 300px;
    object-fit: contain;
    max-width: 100%;
}

#cryptograss-nav-link {
    margin-top: -2px;
}

#cryptograss-content blockquote {
    font-family: 'Cabin', sans-serif;
    font-style: italic;
    color: #f2c6ae;
    text-shadow: 1px 1px 0px black;
    margin-left: 40px;
    margin-right: 40px;
}

.aside1 {
    margin-top: 20px;
    background-color: antiquewhite;
    padding: 5px;
    font-family: 'Kreon', serif;
    font-size: .7em;
}

#footer {
    background-color: rgba(16, 0, 0, 0.59);
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40px;
}

#footer a img {
    margin-bottom: 10px;
    margin-top: 5px;
    width: 30px;
}

#top-nav {
    border-top: 1px solid #383b67;
}

#slogan {
    font-size: calc(1rem + .6vw);
    color: black;
    -webkit-text-stroke: 1px #424032;
    text-shadow: white -1px -1px 0px, white 1px 1px 0px, white 1px -1px 0px, white -1px 1px 0px;
    min-height: 32px;
}

nav#top-nav a.nav-link {
    font-size: 1.2em;
    color: #99c9ff;
    text-shadow: 0px 0px 1px black, 0px 0px 3px #1f0432, 0px 0px 2px #2f17ce;
    text-align: center;
}

.subnav button.nav-link {
    color: white;
    font-size: 1.2em;
}

.subnav button.nav-link:hover {
    color: #99c9ff;
}

nav#top-nav a.nav-link:hover {
    color: white;
}

nav#top-nav a.nav-link.active {
    color: #bd86ff;
}

/*These are the arrows*/
nav#top-nav a.nav-link span {
    display: none;
    color: #f2c6ae;
}

nav#top-nav a.nav-link.active span {
    display: inline;
}

#top-nav a:hover {
    text-shadow: 0px 0px 2px red, 0px 0px 9px #6a95cc, 0 0 20px #714400;
    color: white;
}

nav a img {
    max-height: 40px;
}

/*Looking for a way to implement this without the entire row triggering the hover.*/
/*#home-link-at-top:hover {*/
/*    filter: invert(100%) drop-shadow(1px 1px 1px white);*/
/*    color: black;*/
/*}*/

#immutable-string-band {
    text-shadow: none;
}

#listen-container iframe {
    width: 100%;
    min-height: 240px;
}

.section-heading {
    color: #f2c6ae;
    text-shadow: 1px 1px 0px #323232, 0px 0px 3px #343434
}

.timeframe {
    margin: auto;
    text-align: center;
    width: 100%;
    font-weight: bold;
    font-family: cabin;
    font-size: 1.6em;
}

.detail {
    font-family: 'Inconsolata', monospace;
    font-size: 1.4em;
}

.detail-bright-back {
    font-family: 'Inconsolata', monospace;
    width: 800px;
    margin: auto;
    margin-top: 30px;
    background-color: #cfcfcf;
    border: 5px ridge #5683bf;
    padding: 10px;
    font-size: 1.4em;
}

.detail-bright-back :is(h1,h2,h3,h4,h5) {
    margin: auto;
}

.detail-bright-back a {
    color: #9191ff;
    text-shadow: 1px 0px 0px black, 0px -1px 0px black
}

.detail-bright-back a:hover {
    color: gray;
}

.detail p {
    margin: 0;
    margin-top: 20px;
}

.detail-bright-back strong {
    text-shadow: 1px 1px 0px #2c00ff;
}

.media-item .detail-bright-back {
    margin: 0;
}

.detail h1 {
    margin: 0;
    font-size: 1.5em;
}

.orange-glow, .orange-glow a {
    text-shadow: #db7b46 0em 2px 3px;
}

.deep-stroke, .deep-stroke a {
    text-shadow: #000 1px 2px 1px, #000 -2px -1px 1px;
}

.bright {
    color: white;
    text-shadow: #7b6b15 0px 0px 1px, black 1px 1px 3px, black -1px -1px 3px, black 2px 2px 2px;
}

.page-headline {
    font-family: 'Cabin', sans-serif;
    width: 60%;
    margin: auto;
    margin-top: 80px;
    background-color: #cfcfcf;
    border-left: 2px dashed black;
    border-right: 1px dashed black;
    padding: 10px;
    font-size: 1.5em;
    text-align: center;
}

.small {
    font-size: .6em;
}

.big {
    font-size: 1.5em;
}

.center {
    margin: auto;
    text-align: center;
}

.media-share {
    background-color: rgba(156, 156, 156, 0.4);
    width: 600px;
    margin-top: -5px;
    padding: 10px 0 10px 0;
}

.media-share a img {
    /* width: 110px; */
    vertical-align: middle;
    margin-left: 10px;
    max-height: 40px;
    max-width: 135px;
    margin-right: 10px;
}

.media-item {
    border-bottom: 1px solid white;
    padding-bottm: 10px;
}

.media-item iframe {
    display: block;
    clear: left;
}

.small-credit {
    color: white;
    font-size: 15px;
    font-family: larissa;
}

.lower-photo {
    display: block;
    margin-top: 20px;
    margin: auto;
}

.sorta-background {
    position: absolute;
    z-index: 0;
    opacity: .4;
    width: 90%;
}

.very-bottom {
    position: fixed;
    bottom: 58px;
    width: 100%;
    background: #9390b7;
    font-size: 20px;
    text-align: center;
}

/*Mostrly Music and POAP stuff below*/

#right-of-puzzle {
    position: relative;
    left: 490px;
}

#puzzle-array {
    position: relative;
    float: left;
}

#puzzle-area {
    height: 525px;
    width: 500px;
}

#puzzle-area li {
    color: white;
    font-size: 1.8em;
    filter: drop-shadow(5px 2px 2px black);
    text-shadow: 1px 1px black;
}

#puzzle-array img {
    position: absolute;
}

#puzzle-array .top-left {
    top: 0;
    left: 0;
}

#puzzle-array .top-right {
    top: 0;
    left: 205px;
}

#puzzle-array .bottom-left {
    top: 229px;
    left: 0;
}

#puzzle-array .bottom-right {
    top: 167px;
    left: 205px;
}

.desaturated {
    filter: saturate(0);
}

.shadowed {
    filter: drop-shadow(-8px 8px 1px black) saturate(0);
}

.artFrame {
    height: 0;
    width: 0;
    filter: drop-shadow(3px 3px 2px black);
    border: 6px dashed;
    float: left;
    clear: left;
    margin-bottom: 30px;
}

#ensemble-intro {
    padding: 20px;
}

#productionArea, #ensembleArea {
    width: 1200px;
    display: none;
}

#productionArtFrame {
    opacity: 0;
    border-color: #a67b75;
}

#ensembleArtFrame {
    opacity: 0;
    border-color: black;
}

.purpleBox {
    background: rgba(90, 0, 131, 0.49) !important;
    color: white;
    text-shadow: 1px 1px 1px black;
    width: 450px;
    height: 405px;
    padding: 15px;
}

.box-to-the-right {
    height: 405px;
    padding: 15px;
    background: #908d86a3;
    float: left;
    width: 585px;
    margin-left: 75px;
    border: 1px solid white;
}

#poap-check-dialog .button {
    margin-left: 10px;
    font-size: 20px;
    background-color: #3c3cff;
    color: white;
    padding: 15px;
}

#POAPloadanimation {
    width: 160px;
    left: 155px;
    top: 188px;
    opacity: 0;
}

#poap-checking-now {
    opacity: 0;
    margin-left: 10px;
    width: 450px;
    height: 405px;
    display: none;
}

#found-poaps {
    opacity: 0;
    margin-left: 70px;
    display: none;
}

.tracklist {
    font-family: ll-pixel;
    font-size: 16px;
    width: 400px;
    margin-bottom: 15px;
}

#ursa-minor-actual-album {
    width: 100%;
    background: #592929d9;
    padding: 30px;
    border: 2px solid black;
    height: 0;
    opacity: 0;
    display: none;
}

#ursa-minor-actual-album iframe {
    float: left;
    clear: left;
}

#actual-download-link {
    color: #7a76fb;
}

.as-slice {
    height: 100px;
}

.as-slice .logo {
    position: fixed;
    height: 150px;
    width: 150px;
    top: 0;
    filter: drop-shadow(2px 3px 2px rgb(0 0 0 / 1));

}

.as-slice .logo:hover {
    filter: drop-shadow(2px 1px 12px rgb(0 0 0 / 1));
}

/* For video background */


.bg {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100vw;
    min-height: 100vh;
    width: auto;
    height: auto;
    background-size: cover;
}

.contentOnTopOfVideo {
    position: relative;
    z-index: 200;
    margin-bottom: 100px;
}

.media-metadata-above-video {
    height: 200px;
}

.index-0 {
    background-color: rgba(162, 198, 243, 0.18);
    border: 1px solid rgb(162, 198, 243);
}

.index-1 {
    background-color: rgba(106, 88, 119, 0.33);
    border: 1px solid rgb(58, 34, 75);
}

.index-2 {
    background-color: rgba(244, 199, 156, 0.33);
    border: 1px solid rgb(58, 34, 75);
}

.index-3 {
    background-color: rgba(133, 7, 144, 0.22);
    border: 1px solid rgb(162, 198, 243);
}

.all-shows-list h1 {
    font-size: 1.8em;
}

.all-shows-list h4 {
    font-size: 1.2em;
}

.semi-transparent-bg {
    background: linear-gradient(90deg, rgba(64, 70, 84, 0.7) 0%, rgba(58, 58, 62, .84) 100%);
}

#setlist .songPlay a {
    font-size: 1.1em;
    color: #b4beb0;
}

#setlist .tease-mode {
    margin-left: 1em;
    font-size: 12px;
}

#setlist .original-detail {
    color: #7692ff;
}

/* TODO: Settle on one convention for this. */
#setlist .video-game-detail,
#setlist .video_game-detail {
    color: rgb(192, 4, 4);
}

#setlist .cover-detail {
    color: rgba(206, 159, 6);
}

#setlist .traditional-detail {
    color: rgb(91, 198, 0);
}

.set-stones-available {
    color: #ff8989;
    font-family: Vanilla-Whale;
    font-size: 2em;
    text-shadow: 1px 1px black;
}

.single-set-list {
    background-color: #1e1e1e;
    color: #ffffff;
    padding: 15px;
    border-radius: 5px;
    font-family: 'Courier New', Courier, monospace;
}

#rabbithash {
    font-weight: bold;
    font-size: 2em;
    text-shadow: 1px 1px black;
}

.stone-in-long-list {
    height: 25px;
}

.stone-data {
    background-color: rgba(60, 53, 92, 0.69);
}

.ensemble {
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    background-color: rgba(248, 235, 216, 0.36);
    font-family: fell serif;
}

.ensemble a {
    color: #070836;
    text-shadow: #818181 1px 1px 2px;
}

.kuba-tribute {
    background-color: black;
}

.long-form h1 {
    font-family: ll-pixel;
    font-size: 3em;
}

.long-form h2 {
    font-family: ll-pixel;
    font-size: 2em;
}

.long-form h2.vanilla {
    font-family: Vanilla-Whale;
    font-size: 3.5em;
}

.long-form h3 {
    font-family: Kreon;
    font-size: 1.5em;
}

.long-form blockquote {
    font-style: italic;
    margin-left: 40px;
    margin-right: 40px;
}

.long-form-aside {
    float: right;
    margin-left: 20px;
    width: 25%;
    background-color: rgba(106, 88, 119, 0.33);
    border: 1px solid rgb(58, 34, 75);
}

.long-form-aside img {
    width: 100%;

}

.long-form-aside .caption {
    font-size: .8em;
}


.blue-railroad-section {
    padding: 2rem;
}

.blue-railroad-intro {
    border-radius: 8px;
    margin-top: 1rem;
}

.blue-railroad-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 2rem;
    padding: 1rem 0;
}

.blue-railroad-card {
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.2s;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.blue-railroad-card:hover {
    transform: translateY(-5px);
}

.blue-railroad-card .card-header {
    padding: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.blue-railroad-card .video-container {
    position: relative;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.blue-railroad-card video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blue-railroad-card .btn {
    margin: 1rem;
}

.owner-section {
    padding: 1rem;
    text-align: center;
}

.owner-address {
    font-family: 'Inconsolata', monospace;
    font-size: 1.1em;
    color: #7692ff;
    word-break: break-all;
    margin-bottom: 0.5rem;
}

.video-container {
    position: relative;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.video-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: rgba(0, 0, 0, 0.2);
}
.show-poster {
    width: auto;
}
/* NES color picker */
.color-grid {
    display: grid;
    grid-template-columns: repeat(14, 40px);
    gap: 4px;
    max-width: 600px;
    margin: 20px auto;
}

.color-cell {
    width: 40px;
    height: 40px;
    border: 1px solid #ccc;
    cursor: pointer;
    transition: transform 0.1s;
    position: relative;
}

.color-cell:hover {
    transform: scale(1.1);
    border: 1px solid #000;
    z-index: 2;
}

.color-cell:hover .tooltip {
    display: block;
}

.selected {
    border: 2px solid #000;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

.tooltip {
    display: none;
    position: absolute;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
}

#selected-color {
    margin: 20px;
    text-align: center;
    font-family: monospace;
}
/* Webamp Chartifacts Player Styles */

#webamp {
    z-index: 1000 !important;
}

/* Disable dragging on Webamp windows for better styling control */
#webamp .window {
    pointer-events: auto !important;
}
#webamp .title-bar {
    cursor: default !important;
    pointer-events: none !important;
}
/* Keep controls interactive */
#webamp .title-bar .title-bar-controls {
    pointer-events: auto !important;
}

/* Import handwritten font */

/* Parts chart styling */
.part-box {
    padding: 2px 6px;
    background: #f8f9fa;
    font-size: 16px;
    font-weight: bold;
    color: #666;
    font-family: 'Caveat', cursive, sans-serif;
    transition: all 0.3s ease;
}

.part-box.active {
    background: #000000;
    color: white;
    border:1px solid gray;
}

/* Musician card styling - Isotope-style transitions */
.musician-item {
    width: 100%;
    margin-bottom: 1px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.musician-card {
    padding: 2px 4px;
    background: #f8f9fa;
    line-height: 1.1;
    transform: scale(1);
    border-radius: 2px;
    border: 1px solid #ddd;
    position: relative;
    font-size: 12px;
}

/* Legacy solo styling */
.musician-card.solo {
    border: 2px solid #000000;
    background: #e3f2fd;
    transform: scale(1.05);
    animation: pulse-glow 3s infinite ease-in-out;
}

/* New scene-based styling */
.musician-card.lead {
    border: 2px solid #000000;
    background: #e3f2fd;
    transform: scale(1.05);
    animation: pulse-glow 3s infinite ease-in-out;
}

.musician-card.pickup {
    border: 2px solid #ff9800;
    background: #fff3e0;
    color: #e65100;
    transform: scale(1.02);
    animation: pickup-rise 2s ease-in-out;
}

.musician-card.cooldown {
    border: 2px solid #4caf50;
    background: #f3e5f5;
    color: #2e7d32;
    transform: scale(0.98);
    opacity: 0.9;
}

.musician-card.harmony {
    border: 1px solid #9c27b0;
    background: #fce4ec;
    color: #7b1fa2;
    transform: scale(0.95);
}

.musician-card.rhythm {
    border: 1px solid #607d8b;
    background: #eceff1;
    color: #455a64;
}

@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 0 3px 2px rgba(255, 163, 72, 0.75);
    }
    50% {
        box-shadow: 0 0 11px 3px rgba(255, 163, 72, 0);
    }
}

@keyframes pickup-rise {
    0% {
        transform: scale(1.0);
        box-shadow: 0 0 2px rgba(255, 152, 0, 0.5);
    }
    50% {
        transform: scale(1.03);
        box-shadow: 0 0 8px rgba(255, 152, 0, 0.8);
    }
    100% {
        transform: scale(1.02);
        box-shadow: 0 0 5px rgba(255, 152, 0, 0.6);
    }
}

/* Ensemble display in Webamp */
.ensemble-display-in-webamp {
    background: #faf7f2 !important;
    color: #1a365d !important;
}

.ensemble-display-in-webamp .musician-card {
    background: #f7fafc !important;
    color: #1a365d !important;
    border: 1px solid #1a365d !important;
    margin: 2px 0;
}

/* Engineer card - gray styling */
.ensemble-display-in-webamp .engineer-card {
    background: #e2e8f0 !important;
    border: 1px solid #718096 !important;
}

.ensemble-display-in-webamp .engineer-card .musician-name {
    color: #4a5568 !important;
}

.ensemble-display-in-webamp .engineer-card .chartifact-line {
    color: #718096 !important;
}

.ensemble-display-in-webamp .musician-name {
    color: #1a365d !important;
    font-weight: bold;
}

.ensemble-display-in-webamp .chartifact-line {
    color: #b8460e !important;
    font-size: 9px;
    opacity: 0.8;
}

.musician-card.solo .chartifact-line {
    color: #0056b3 !important;
}

.musician-card.pickup {
    border: 2px solid #ff9800;
    background: #fff3e0;
    transform: scale(1.02);
}

.musician-card.pickup .chartifact-line {
    color: #e65100 !important;
}

.musician-card.intro {
    border: 1px solid #17a2b8;
    background: #e6f7ff;
    transform: scale(1.02);
}

.musician-card.intro .chartifact-line {
    color: #117a8b !important;
}

.musician-card.grayed {
    border: 1px solid #e0e0e0;
    background: #f5f5f5;
    opacity: 0.5;
}

.musician-card.grayed .chartifact-line {
    color: #bbb !important;
}

.musician-card.grayed .musician-name {
    font-weight: normal !important;
    color: #999 !important;
}

.musician-card.flash {
    box-shadow: 0 0 2px #ffd700;
    font-weight: bold;
}

/* Webamp container styling - accommodate Webamp + ensemble display */
#just-the-player-goes-here {
    width: 340px;
}

/* Ensemble display - Isotope grid container */
#ensemble-display {
    padding: 6px;
    border-radius: 4px;
    border: 1px solid #dee2e6;
    font-family: Arial, sans-serif;
    font-size: 14px;
    color: #333;
    z-index: 1000;
    min-width: 200px;
}

.ensemble-grid {
    /* Isotope grid container */
}

.musician-item {
    width: 100%;
    margin-bottom: 2px;
}

/* Parts chart container */
#parts-chart {

}

/* Musician name styling */
.musician-name {
    font-family: 'Caveat', cursive, sans-serif;
    font-weight: bold;
    margin-bottom: 1px;
}

/* Chartifact ownership line */
.chartifact-line {
    font-size: 9px;
    color: #666;
    font-family: 'JetBrains Mono', monospace;
}

/* Custom layout classes to replace Bootstrap */
.webamp-chartifacts-main-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    max-width: 100%;
}

.webamp-chartifacts-player-and-parts {
    display: flex;
    gap: 10px;
    align-items: flex-end;
    flex: 1 1 auto;
    min-width: 400px; /* Webamp + parts minimum */
}

.webamp-chartifacts-player-area {
    flex: 0 0 auto;
    width: 275px; /* Webamp's standard width */
}

.webamp-chartifacts-parts-area {
    flex: 1 1 auto;
    min-width: 120px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
}

.webamp-chartifacts-ensemble-area {
    width: 100%;
    max-width: 400px;
    align-self: flex-start;
}

/* New ensemble display inside #webamp container */
.ensemble-display-in-webamp {
    height: 200px;
    position: absolute;
    top: 115px;
    left: 0;
    right: 0;
    padding: 6px;
    border-radius: 4px;
    border: 1px solid #dee2e6;
    background: rgba(255, 255, 255, 0.95);
    font-family: Arial, sans-serif;
    font-size: 14px;
    color: #333;
    z-index: 1001;
    overflow-y: auto;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Let Webamp handle its own positioning - don't force relative */
#webamp {
    z-index: 1000 !important;
    /* Removed position: relative - Webamp handles its own positioning */
}

/* Reserve space in main column when chartifacts player is active */
/* This addresses the fundamental absolute positioning challenge:
   absolutely positioned elements don't affect document flow */
#main-column-left:has(.webamp-chartifacts-main-container) {
    min-height: 350px; /* Webamp (120px) + ensemble (200px) + padding (~30px) */
}

/* Mobile/narrow screen stacking */
@media (max-width: 768px) {
    .webamp-chartifacts-main-container {
        flex-direction: column;
    }

    .webamp-chartifacts-player-and-parts {
        min-width: unset;
    }

    /* Adjust ensemble positioning for mobile */
    .ensemble-display-in-webamp {
        height: 150px;
        font-size: 12px;
    }

    /* Smaller space reservation on mobile */
    #main-column-left:has(.webamp-chartifacts-main-container) {
        min-height: 300px;
    }
}