body {
    margin: 0;
    padding: 0;
    background-color: #000;
    font-family: 'Geneva', sans-serif;
    color: #FFFFFF;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 25px;
    overflow: auto;
}

a {
    color: #FF0000;
    text-decoration: underline;
}

a:hover {
    text-decoration: none;
}

#layout-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.header-bar {
    display: flex;
    justify-content: center;
    width: 100%;
    z-index: 10;
    position: relative;
}

.header-content {
    display: flex;
    align-items: center;
    gap: 20px;
    transform: translateY(-3px);
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 0px;
}

.footer-bar {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 35px;
    font-size: 16px;
    font-family: 'Times New Roman', serif;
    z-index: 10;
    position: relative;
}

.transcript-container {
    width: 100%;
    box-sizing: border-box;
    padding: 0 40px;
    margin: 20px 0;
    font-family: 'Courier', 'Courier New', monospace;
    -webkit-text-stroke: 0.3px currentColor;
    font-size: 14px;
    line-height: 1.12;
    text-align: left;
    color: #00AF00;
}

.transcript-container p {
    margin-bottom: 15px;
}

.highlight {
    color: #D6D600;
}

#game-container {
    position: relative;
    width: 400px;
    height: 430px;
    background-color: #000;
    background-repeat: no-repeat;
    overflow: hidden;
}

#stage {
    position: relative;
    width: 100%;
    height: 100%;
}

#grid-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    /* Cells might handle their own clicks, or container handles it */
}

.cell {
    position: absolute;
    width: 50px;
    height: 20px;

    /* Render shape using clip-path (parallelogram) */
    -webkit-clip-path: polygon(40% 0, 100% 0, 60% 100%, 0% 100%);
    clip-path: polygon(40% 0, 100% 0, 60% 100%, 0% 100%);

    /* Ensure background color is visible */
    background-color: rgb(255, 100, 100);
    /* Default fallback */
    mask-repeat: no-repeat;

    pointer-events: none;
    transition: top 0.1s, left 0.1s;
}

#sidebar-container {
    position: absolute;
    left: -24px;
    top: -19px;
    width: 86px;
    height: 100%;
}

.theme-icon {
    position: absolute;
    left: 0;
    width: 100%;
    /* roughly */
    height: 40px;
    /* roughly */
    background-repeat: no-repeat;
    background-position: right center;
    /* Right-aligns the sprites */
    cursor: grab;
}

/* Sidebar theme images from the composite or individual files if available. 
   Using theme1-7.png for now. Assuming they map to nature..manual.
   Actually, manual is #8, nature is #1. 
   theme1.png -> nature
   theme2.png -> beauty
   ...
*/

.theme-icon[data-id="1"] {
    background-image: url('assets/theme1.png');
}

.theme-icon[data-id="2"] {
    background-image: url('assets/theme2.png');
}

.theme-icon[data-id="3"] {
    background-image: url('assets/theme3.png');
}

.theme-icon[data-id="4"] {
    background-image: url('assets/theme4.png');
}

.theme-icon[data-id="5"] {
    background-image: url('assets/theme5.png');
}

.theme-icon[data-id="6"] {
    background-image: url('assets/theme6.png');
}

.theme-icon[data-id="7"] {
    background-image: url('assets/theme7.png');
}

/* Manual might not have a theme sprite or might use a generic one? 
   Lingo script for themes goes 1 to 7. Manual seems to be handled differently or just not in the loop 
   or maybe it is the 8th item but handled separately. 
   Wait, themes loop 1 to 7. Manual is #8 in gThemeNames list.
   But sidebar only checks v (50 + (a-1)*40) for a = 1 to 7.
   So Manual might not be on the sidebar?
   Checking "6_BG MouseDown.ls":
   "if h >= 10 and h <= 70 then repeat with a = 1 to 7"
   So there are only 7 themes in sidebar. Manual might be special or unused? 
   gThemeNames has 8 items. 
   The script loop only goes to 7.
   I will hide manual for now in CSS or just handle 1-7.
*/
.theme-icon[data-id="8"] {
    display: none;
}


#poem-container {
    position: absolute;
    left: 96px; /* 105px + 13px horizontal padding */
    top: 196px; /* 205px + 5px vertical padding */
    width: 274px; /* 300px - 26px padding */
    height: 234px;
    overflow: hidden;
    font-family: 'Courier', monospace;
    -webkit-text-stroke: 0.3px currentColor;
    font-size: 12px;
    line-height: 12.3px;
    color: #dbdbdb;
    pointer-events: none;
    white-space: pre-wrap;
    user-select: none;
    -webkit-user-select: none;
}

.active-effector {
    position: absolute;
    width: 60px;
    height: 40px;
    background-repeat: no-repeat;
    background-position: center;
    cursor: grab;
    z-index: 100;
}

.active-effector.dragging {
    cursor: grabbing;
    pointer-events: none;
    /* Let clicks pass through to background for coordinate tracking? No, keeping it simple. */
}

/* Cursors */
body.pointing-hand {
    cursor: url('assets/Pointing Hand.png'), auto;
}

body.open-hand {
    cursor: url('assets/Open Hand.png'), pointer;
}

body.closed-hand {
    cursor: url('assets/Closed Hand.png'), grabbing;
}

/* Vertical lines for background overlay */
.vertical-line {
    position: absolute;
    width: 1px;
    bottom: 0;
    background-color: #333433;
    /* Dark gray line */
    top: 191px;
    /* Moved up by 30px */
    pointer-events: none;
    z-index: 1;
    /* Above background, behind effectors */
}

#left-line {
    left: 83px;
}

#right-line {
    left: 383px;
}




.title-img {
    transform: translateY(-2px);
}