/*STUFFED ANIMAL WAR - jaemzware.org - 20150611 */
/*STUFFED ANIMAL WAR - jaemzwarellc - 20250331 */

/*UNIVERSAL//////////////////////////////////////////////CHAT//////////////////////////////////////////////////CHAT*/
*, *::before, *::after {
    box-sizing: inherit;
}

html {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    box-sizing: border-box;
}

body {
    background-color:black;
    color:white;
    font-weight:normal;
    font-family:sans-serif;
    margin: 0px;
    background-repeat:no-repeat;
    background-position:top left;
    text-align: left;
    overflow-x: hidden; /* Prevent horizontal scrolling */
    width: 100%;
    max-width: 100%;
    -webkit-text-size-adjust: 100%;
    box-sizing: border-box;
}

img {
    max-width: 100%;
    height: auto;
}

select, input, button {
    max-width: 100%;
}
/*CHAT//////////////////////////////////////////////CHAT//////////////////////////////////////////////////CHAT*/
#messagesdiv {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 100%; /* Fill available height in the table cell */
    min-height: 450px; /* Increased from 350px to match canvas height */
    width: 100%;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border: 8px solid #ccccff;
    border-radius: 8px;
    box-shadow:
        inset 0 0 10px rgba(0, 0, 0, 0.5),
        0 0 20px rgba(204, 204, 255, 0.3),
        inset 4px 4px 8px rgba(214, 214, 255, 0.4),
        inset -4px -4px 8px rgba(153, 153, 204, 0.5);
    overflow-x: scroll;
    overflow-y: scroll;
    margin: 0%;
    padding: 12px;
    text-align: left;
    vertical-align: top;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #e0e0e0;
    gap: 8px;
}

#chatclientmessagetd{
    width:80%;
}
#chatClientMessage{
    width:100%;
    box-sizing: border-box; /* Include padding and border in the width */
    margin: 2px 0; /* Add some margin to prevent overlap */
}
#jaemzwaredynamicaudioplayer{
    width:100%;
    /*height:200px;*/
}
span.remoteChatClientUser{
    color:white;
    /*font-size:xx-large;*/
}
/* Updated Photo Container Styles */
.photo-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 8px;
    overflow-x: hidden; /* Prevent horizontal scrolling within container */
    justify-content: center; /* Center items horizontally */
    border: 8px solid #ccccff;
    border-radius: 8px;
    box-shadow:
        inset 0 0 10px rgba(0, 0, 0, 0.5),
        0 0 20px rgba(204, 204, 255, 0.3),
        inset 4px 4px 8px rgba(214, 214, 255, 0.4),
        inset -4px -4px 8px rgba(153, 153, 204, 0.5);
}

.skatecreteordiephoto {
    flex: 1 1 150px;
    text-align: left;
    vertical-align: top;
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
    box-sizing: border-box;
    max-width: 150px; /* Contain the entire component */
}

.skatecreteordiephoto img.photosformthumbnail {
    width: 100%;
    height: auto;
    display: block; /* Remove potential whitespace */
    object-fit: cover; /* Maintain aspect ratio while filling the space */
    border: 1px solid #ccc;
    box-sizing: border-box;
}

.skatecreteordiephototitle {
    width: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    text-align: center;
    padding: 5px;
    font-size: 12px;
    box-sizing: border-box;
    margin-top: -5px; /* Slight overlap with image */
}
/* CHAT CONTROLS */
/* Ensure the form and table are responsive */
#chatform {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

#chattable {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    table-layout: fixed;
    margin: 0;
    padding: 16px;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border: 8px solid #ccccff;
    border-radius: 8px;
    box-shadow:
        inset 0 0 10px rgba(0, 0, 0, 0.5),
        0 0 20px rgba(204, 204, 255, 0.3),
        inset 4px 4px 8px rgba(214, 214, 255, 0.4),
        inset -4px -4px 8px rgba(153, 153, 204, 0.5);
}

#chattable td {
    padding: 5px; /* Adjust padding for smaller screens */
    word-wrap: break-word; /* Allow text to wrap within cells */
    overflow-wrap: break-word; /* Ensure long words break and wrap */
}

/* Adjust input and select elements for smaller screens */
#chatClientUser, #chatClientAutoResponder {
    width: 100%;
    box-sizing: border-box; /* Include padding and border in the width */
    margin: 2px 0; /* Add some margin to prevent overlap */
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid #ccccff;
    border-radius: 6px;
    color: #1a1a2e;
    font-size: 14px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    transition: all 0.2s ease;
}

#chatClientUser:focus, #chatClientAutoResponder:focus {
    outline: none;
    border-color: #9999ff;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 0 0 3px rgba(153, 153, 255, 0.2);
}

#chatClientMessage {
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid #ccccff;
    border-radius: 6px;
    color: #1a1a2e;
    font-size: 14px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    transition: all 0.2s ease;
}

#chatClientMessage:focus {
    outline: none;
    border-color: #9999ff;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 0 0 3px rgba(153, 153, 255, 0.2);
}

#clearchatbutton, #sendchatbutton {
    width: auto; /* Allow the button to size itself */
    margin: 2px 0; /* Add some margin to prevent overlap */
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-sizing: border-box;
    background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
    color: white;
    box-shadow: 0 3px 10px rgba(76, 175, 80, 0.4);
}

#clearchatbutton:hover, #sendchatbutton:hover {
    background: linear-gradient(135deg, #5cd660 0%, #4CAF50 100%);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(76, 175, 80, 0.6);
}

#clearchatbutton:active, #sendchatbutton:active {
    transform: translateY(0);
}
/*CHAT MESSAGES FONTS*/
.right-aligned-container {
    align-self: flex-end; /* Align the container to the right */
    display: flex;
    gap: 8px; /* Add spacing between user and server date */
    margin-left: auto; /* Push the container to the right */
}

span.serverdate {
    color: #a8a8ff;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.3px;
}

span.remoteChatClientUser {
    color: #ccccff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

span.chatclientmessage {
    align-self: flex-start; /* Ensure the message is aligned to the left */
    color: #f0f0ff;
    font-size: 15px;
    line-height: 1.5;
    font-weight: 400;
    letter-spacing: 0.2px;
}

a.chatclientmessage {
    align-self: flex-start; /* Ensure the message is aligned to the left */
    color: #a8d5ff;
    font-size: 15px;
    line-height: 1.5;
    font-weight: 400;
    text-decoration: underline;
    cursor: pointer;
    letter-spacing: 0.2px;
}

a.chatclientmessage:hover {
    color: #6eb8ff; /* Brighter blue on hover */
}

a.audio-link, a.video-link {
    font-size: 14px; /* Smaller text for media links */
    word-break: break-all; /* Break long URLs */
    overflow-wrap: break-word; /* Wrap to prevent overflow */
    max-width: 100%; /* Prevent exceeding container width */
    display: inline-block; /* Allow width constraints */
}

a.audio-link::before {
    content: "\266B "; /* Musical note symbol */
}

a.video-link::before {
    content: "\25B6 "; /* Play button symbol */
}
span.hitclientmessage {
    align-self: flex-start; /* Ensure the message is aligned to the left */
    color: #d0d0ff;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.3px;
}
span.disconnectnotification {
    align-self: flex-start; /* Ensure the message is aligned to the left */
    color: #ff8866;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.3px;
}
span.connectnotification {
    align-self: flex-start; /* Ensure the message is aligned to the left */
    color: #88ff88;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.3px;
}
/*LINKS ON INDEX.HTM FOR CONCERT BAND LINKS*/
div.seattlenativelinks{
    margin-left:10px;
}
/* MODERN SECTION CONTAINERS */
.section-container {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 16px;
    margin: 10px 0;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border: 8px solid #ccccff;
    border-radius: 8px;
    box-shadow:
        inset 0 0 10px rgba(0, 0, 0, 0.5),
        0 0 20px rgba(204, 204, 255, 0.3),
        inset 4px 4px 8px rgba(214, 214, 255, 0.4),
        inset -4px -4px 8px rgba(153, 153, 204, 0.5);
}

.modern-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 2px solid #ccccff;
    margin-bottom: 8px;
}

.section-icon {
    font-size: 28px;
}

.section-title {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #ccccff;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

/* ENDPOINT INFO */
.endpoint-info {
    color: #ccccff;
    font-weight: bold;
    font-size: 11px;
    margin-bottom: 8px;
    padding: 6px 10px;
    background: rgba(204, 204, 255, 0.1);
    border-radius: 4px;
    text-align: left;
}

/* MODERN INPUTS AND CONTROLS */
.input-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

.input-group.full-width {
    flex: 100%;
}

.input-label {
    font-size: 12px;
    font-weight: 600;
    color: #ccccff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.modern-input, .modern-select {
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid #ccccff;
    border-radius: 6px;
    color: #1a1a2e;
    font-size: 14px;
    font-family: sans-serif;
    transition: all 0.2s ease;
    width: 100%;
    box-sizing: border-box;
}

.modern-input:focus, .modern-select:focus {
    outline: none;
    border-color: #9999ff;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 0 0 3px rgba(153, 153, 255, 0.2);
}

.modern-input::placeholder {
    color: #888;
}

/* BUTTONS */
.button-group {
    display: flex;
    align-items: flex-end;
}

.action-button {
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-sizing: border-box;
}

.primary-button {
    background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
    color: white;
    box-shadow: 0 3px 10px rgba(76, 175, 80, 0.4);
}

.primary-button:hover {
    background: linear-gradient(135deg, #5cd660 0%, #4CAF50 100%);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(76, 175, 80, 0.6);
}

.primary-button:active {
    transform: translateY(0);
}

.secondary-button {
    background: linear-gradient(135deg, #ccccff 0%, #9999ff 100%);
    color: #1a1a2e;
    box-shadow: 0 3px 10px rgba(204, 204, 255, 0.4);
}

.secondary-button:hover {
    background: linear-gradient(135deg, #ddddff 0%, #aaaaff 100%);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(204, 204, 255, 0.6);
}

.secondary-button:active {
    transform: translateY(0);
}

/* CHAT SPECIFIC STYLES */
.chat-controls {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 10px;
    align-items: end;
}

.chat-message-area {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: end;
}

/* AUDIO PLAYER STYLES */
.audio-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.audio-player-wrapper {
    width: 100%;
}

.audio-player-wrapper audio {
    width: 100%;
    border-radius: 6px;
}

.next-track-button {
    white-space: nowrap;
}

/* VIDEO PLAYER STYLES */
.video-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.video-player-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
}

.video-player-wrapper video {
    max-width: 100%;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

/* PHOTO GALLERY STYLES */
.photo-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 12px;
    padding: 8px 0;
}

.photo-item {
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.photo-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 20px rgba(204, 204, 255, 0.4);
}

.photo-thumbnail {
    width: 100%;
    height: 150px;
    object-fit: cover;
    display: block;
}

.photo-title {
    padding: 8px;
    background: rgba(0, 0, 0, 0.7);
    color: #ccccff;
    text-align: center;
    font-size: 12px;
    font-weight: 500;
}
/* UPLOAD CONTAINERS */
.uploads-wrapper {
    display: flex;
    gap: 12px;
    margin: 10px 0;
}

.upload-container {
    flex: 1;
    min-width: 0;
    box-sizing: border-box;
    padding: 16px;
    background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
    border: 8px solid #ccccff;
    border-radius: 8px;
    box-shadow:
        inset 0 0 10px rgba(0, 0, 0, 0.5),
        0 0 20px rgba(204, 204, 255, 0.3),
        inset 4px 4px 8px rgba(214, 214, 255, 0.4),
        inset -4px -4px 8px rgba(153, 153, 204, 0.5);
}

.upload-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-sizing: border-box;
    max-width: 100%;
}

#uploads-content {
    box-sizing: border-box;
    max-width: 100%;
}

#uploads-content .upload-container {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
}

.upload-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 12px;
    border-bottom: 2px solid #f4d47c;
}

.upload-icon {
    font-size: 28px;
}

.upload-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #f4d47c;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.upload-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.file-input-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
    cursor: pointer;
    box-sizing: border-box;
    max-width: 100%;
}

.file-input {
    display: none;
}

.file-input-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    background: linear-gradient(135deg, #f4d47c 0%, #e6c56a 100%);
    border: none;
    border-radius: 8px;
    color: #1a1a1a;
    font-weight: 600;
    box-sizing: border-box;
    max-width: 100%;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(244, 212, 124, 0.3);
}

.file-input-button:hover {
    background: linear-gradient(135deg, #fae49a 0%, #f4d47c 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(244, 212, 124, 0.5);
}

.file-input-icon {
    font-size: 18px;
}

.file-input-text {
    font-size: 15px;
}

.file-input-label {
    padding: 8px 12px;
    background: rgba(244, 212, 124, 0.1);
    border: 1px solid rgba(244, 212, 124, 0.3);
    border-radius: 6px;
    color: #f4d47c;
    font-size: 13px;
    text-align: center;
    min-height: 20px;
}

.upload-submit-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 24px;
    background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
    border: none;
    border-radius: 8px;
    box-sizing: border-box;
    max-width: 100%;
    color: white;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 3px 10px rgba(76, 175, 80, 0.4);
}

.upload-submit-button:hover {
    background: linear-gradient(135deg, #5cd660 0%, #4CAF50 100%);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(76, 175, 80, 0.6);
}

.upload-submit-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 5px rgba(76, 175, 80, 0.4);
}

.upload-submit-icon {
    font-size: 18px;
}

.upload-submit-text {
    font-size: 16px;
}

.upload-progress {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.progress-text {
    font-size: 13px;
    color: #f4d47c;
    font-weight: 500;
    text-align: center;
}

.progress-bar-container {
    width: 100%;
    height: 8px;
    background: rgba(244, 212, 124, 0.2);
    border-radius: 4px;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #4CAF50 0%, #8BC34A 100%);
    border-radius: 4px;
    transition: width 0.3s ease;
    box-shadow: 0 0 10px rgba(76, 175, 80, 0.5);
}

.upload-info {
    font-size: 12px;
    color: rgba(244, 212, 124, 0.7);
    text-align: center;
    font-style: italic;
}
/*VIDEO THUMBNAILS*/
.video-thumbnail-container {
    position: relative;
    display: inline-block;
    margin: 5px;
    cursor: pointer;
}

.video-thumbnail {
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid #ccc;
    background-color: #000; /* Add a background color to make it obvious if the video isn't loading */
    min-width: 120px;
    min-height: 80px;
    display: block; /* Ensure it's displayed as a block */
}

.play-button-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 16px;
    opacity: 0.8;
}

.video-thumbnail-container:hover .play-button-overlay {
    opacity: 1;
}
/*STUFFEDANIMALWAR//////////////////////////////////////////////STUFFEDANIMALWAR//////////////////////////////////////////////////STUFFEDANIMALWAR*/
#stuffedanimalwardiv {
    margin: 0;
    padding: 0;
    top: 0px;
    bottom: 0px;
    left: 0px;
    width: 67%;
    display: flex;
    align-items: stretch;
    min-height: 500px; /* Ensure minimum height matches canvas */
}

#stuffedanimalwarform{
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    width: 33%;
    box-sizing: border-box; /* Include padding and border in the width */
    margin: 0;
    padding: 16px;
    border: 8px solid #ccccff;
    border-radius: 8px;
    box-shadow:
        inset 0 0 10px rgba(0, 0, 0, 0.5),
        0 0 20px rgba(204, 204, 255, 0.3),
        inset 4px 4px 8px rgba(214, 214, 255, 0.4),
        inset -4px -4px 8px rgba(153, 153, 204, 0.5);
    display: flex;
    flex-direction: column;
    min-height: 500px; /* Match the canvas min-height */
}

#stuffedanimalwarsvg{
    margin:0;
    padding:0;
    width:100%;
    background-size:contain;
    background-position:center;
    background-repeat: no-repeat;
    height:500px;
    touch-action: none;
    max-width: 100%;
}
#stuffedanimalwarcanvas{
    margin:0;
    padding:0;
    width:100%;
    background-size:contain;
    background-position:center;
    background-repeat: no-repeat;
    height:100%;
    min-height: 500px;
    touch-action: none;
    max-width: 100%;
    display: block;
    /* Removed border to fix coordinate mismatch */
    box-sizing: border-box;
}

/* Readonly mode: fullscreen canvas for demonstration purposes */
#stuffedanimalwardiv.readonly {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: black;
    z-index: 9999;
}

#stuffedanimalwardiv.readonly #stuffedanimalwarcanvas {
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
    pointer-events: none; /* Disable all interaction in readonly mode */
    cursor: default; /* Show normal cursor instead of pointer */
}

/* Hide audio player in readonly mode but keep it functional */
body:has(.readonly) #audioform {
    display: none;
}

/* Readonly mode mute button */
#readonlyMuteButton:hover {
    background: rgba(0, 0, 0, 0.7) !important;
    border-color: rgba(255, 255, 255, 0.5);
}
#stuffedanimalwarformtable{
    background-color: transparent;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box; /* Include padding and border in the width */
    margin: 0;
    padding: 0;
    height: 100%; /* Fill the form height */
}
#stuffedanimalwarformtable td{
    text-align: left;
    vertical-align:top;
    color: #e0e0e0;
}

/* Style the points and speed slider display */
#stuffedanimalwarformtable #points {
    color: #ccccff;
    font-weight: 600;
    font-size: 15px;
}

#stuffedanimalwarformtable label {
    color: #ccccff;
    font-weight: 500;
    font-size: 13px;
}

#stuffedanimalwarformtable #speedValue {
    color: #ccccff;
    font-weight: 600;
    font-size: 13px;
}

/* Style the animals dropdown */
#stuffedanimalwarformtable #animals {
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid #ccccff;
    border-radius: 6px;
    color: #1a1a2e;
    font-size: 16px;
    line-height: 1.6;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    transition: all 0.2s ease;
    height: auto;
    min-height: 36px;
}

#stuffedanimalwarformtable #animals:focus {
    outline: none;
    border-color: #9999ff;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 0 0 3px rgba(153, 153, 255, 0.2);
}

#stuffedanimalwarformtable #animals option {
    padding: 8px;
    font-size: 16px;
    line-height: 1.6;
}

/* Custom URL input */
#stuffedanimalwarformtable #imagepathtextbox {
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid #ccccff;
    border-radius: 6px;
    color: #1a1a2e;
    font-size: 14px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    transition: all 0.2s ease;
}

#stuffedanimalwarformtable #imagepathtextbox:focus {
    outline: none;
    border-color: #9999ff;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 0 0 3px rgba(153, 153, 255, 0.2);
}

/* Animal Preview Box */
#animalPreview {
    box-shadow: 0 2px 8px rgba(204, 204, 255, 0.3);
    transition: all 0.2s ease;
    flex-shrink: 0;
}

#animalPreviewContent img {
    transition: transform 0.2s ease;
}

/* Color Picker Button - compact style */
#colorPickerButton {
    border: 2px solid #ccccff !important;
    box-shadow: 0 2px 8px rgba(204, 204, 255, 0.3);
    transition: all 0.2s ease;
    cursor: pointer;
}

#colorPickerButton:hover {
    box-shadow: 0 3px 12px rgba(204, 204, 255, 0.5);
    transform: translateY(-1px);
}

#colorPickerButton:active {
    transform: translateY(0);
}
.photosformthumbnail {
    max-width: 150px; /* Set the maximum width of the thumbnail */
    height: auto; /* Maintain aspect ratio */
    border: 1px solid #ccc; /* Optional: Add a border */
    cursor: pointer; /* Change cursor to indicate it's clickable */
}
#sawflexdiv {
    display: flex;
    align-items: stretch; /* Changed from flex-start to stretch to make children equal height */
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
}
/*AUDIOVIDEOPHOTOS//////////////////////////////////////////////AUDIOVIDEOPHOTOS//////////////////////////////////////////////////AUDIOVIDEOPHOTOS*/
/* Ensure #audiotable and its children are responsive */
#audiotable {
    width: 100%; /* Make the table take up the full width of its container */
    max-width: 100%; /* Prevent overflow */
    table-layout: fixed; /* Ensure table cells respect the width */
    background-color: slategray;
    box-sizing: border-box; /* Include padding and border in the width */
    margin: 0;
    padding: 8px;
    border: 8px solid #ccccff;
    border-radius: 8px;
    box-shadow:
        inset 0 0 10px rgba(0, 0, 0, 0.5),
        0 0 20px rgba(204, 204, 255, 0.3),
        inset 4px 4px 8px rgba(214, 214, 255, 0.4),
        inset -4px -4px 8px rgba(153, 153, 204, 0.5);
}

#audiotable td {
    word-wrap: break-word; /* Allow text to wrap within cells */
    overflow-wrap: break-word; /* Ensure long words break and wrap */
    padding: 5px; /* Adjust padding for smaller screens */
}

/* Make audio elements responsive */
#audiotable audio {
    width: 100%; /* Make audio elements take up the full width of their container */
    max-width: 100%; /* Prevent overflow */
}

/* Ensure #selectsongs fits within its container */
#selectsongs {
    width: 100%; /* Make the select take up the full width of its container */
    max-width: 100%; /* Prevent overflow */
    box-sizing: border-box; /* Include padding and border in the width */
    overflow: hidden; /* Hide overflow */
    white-space: nowrap; /* Prevent text from wrapping */
    text-overflow: ellipsis; /* Show ellipsis for overflowed text */
    margin: 0;
    padding: 5px; /* Adjust padding as needed */
}

/* MP3 Player Metadata Display Styles - Add to your stylebase.css if not already there */
.audio-controls-container {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: rgba(204, 204, 255, 0.05);
    border-radius: 6px;
    flex-wrap: wrap;
}

#album-art-container {
    width: 40px;
    height: 40px;
    background-color: rgba(204, 204, 255, 0.2);
    flex-shrink: 0;
    border-radius: 4px;
    overflow: hidden;
    border: 2px solid rgba(204, 204, 255, 0.3);
}

#album-art-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

#track-metadata {
    font-size: 13px;
    color: #ccccff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

#track-artist, #track-album, #track-title {
    color: #ccccff;
}

#artist-album-separator, #album-title-separator {
    color: rgba(204, 204, 255, 0.6);
}

#imagepathtextbox #clearboardbutton {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box; /* Include padding and border in the width */
    margin: 0;
    padding: 5px; /* Adjust padding as needed */
}

/* Style the options within the select */
#selectsongs option {
    white-space: nowrap; /* Prevent text from wrapping */
    overflow: hidden; /* Hide overflow */
    text-overflow: ellipsis; /* Show ellipsis for overflowed text */
}


#videotable{
    background-color:black;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box; /* Include padding and border in the width */
    padding: 8px;
    margin: 0 auto; /* Center the table */
    text-align: center; /* Center the content inside */
    border: 8px solid #ccccff;
    border-radius: 8px;
    box-shadow:
        inset 0 0 10px rgba(0, 0, 0, 0.5),
        0 0 20px rgba(204, 204, 255, 0.3),
        inset 4px 4px 8px rgba(214, 214, 255, 0.4),
        inset -4px -4px 8px rgba(153, 153, 204, 0.5);
}
#videotable td{
    vertical-align:top;
    width:100%;
    text-align: center; /* Center the content in the cells */
}
#videotable video{
    width:100%;
}

#jaemzwaredynamicvideoplayer {
    max-width: 100%;
    width: 480px; /* Smaller width for desktop */
    height: 360px; /* Smaller height for desktop */
    margin: 0; /* Align left */
    display: block; /* Remove any inline spacing */
}

/* Video selector styles */
#selectvideos {
    max-width: 480px; /* Match the smaller video width */
    width: 100%;
    margin: 0 0 10px 0; /* Align left and add some space below */
    display: block; /* Proper block-level display */
}

#phototable{
    background-color:darkgrey;
    width:100%;
    max-width: 100%;
    box-sizing: border-box; /* Include padding and border in the width */
    margin: 0;
    padding: 0;
}
#phototable td{
    text-align: left;
    vertical-align:top;
    width:100%;
}
/*TABSTRIPVIDEO//////////////////////////////////////////////TABSTRIPVIDEO//////////////////////////////////////////////////TABSTRIPVIDEO*/
img.videolink{
    height:auto;
}
/*JAEMZWARELOGO//////////////////////////////////////////////JAEMZWARELOGO//////////////////////////////////////////////////JAEMZWARELOGO*/
p.jaemzwarelogo{
    color: white;
    width:50%;
}
a.jaemzwarelogo:link, .skateparkdetail a:link {
    color: white;
    text-decoration:underline;
}
a.jaemzwarelogo:visited, .skateparkdetail a:visited {
    color: white;
    text-decoration:underline;
}
a.jaemzwarelogo:hover, .skateparkdetail a:hover {
    color: lightblue;
    text-decoration: underline;
}
a.jaemzwarelogo:active, .skateparkdetail a:active {
    color: white;
    text-decoration: underline;
}
/*////////////MOBILE///////////////*/
@media only screen and (max-width: 768px) and (orientation: portrait) {
    table {
        table-layout: fixed;
        width: 100%;
    }
    select, input, button, #imagepathtextbox, #clearboardbutton {
        font-size: 16px; /* Prevent iOS zoom on focus */
        max-width: 100%;
    }
    /* Make all select dropdowns readable on mobile */
    select {
        font-size: 18px !important;
        line-height: 1.8;
        min-height: 44px;
        padding: 10px 12px !important;
    }
    select option {
        font-size: 18px !important;
        line-height: 1.8;
        padding: 10px;
    }
    /* Fix table cell widths for mobile portrait */
    #stuffedanimalwarformtable tr:first-child td:nth-child(1) {
        width: 45% !important; /* Animals dropdown */
    }
    #stuffedanimalwarformtable tr:first-child td:nth-child(2) {
        width: 35% !important; /* Color picker / custom URL */
    }
    #stuffedanimalwarformtable tr:first-child td:nth-child(3) {
        width: 20% !important; /* Clean button */
    }
    #colorPickerButton {
        width: 100% !important; /* Fill its cell */
        max-width: 100%;
    }
    #animals {
        width: 100%;
        max-width: 100%;
        font-size: 18px;
        line-height: 1.8;
        min-height: 44px;
        padding: 10px 12px;
    }
    #animals option {
        font-size: 18px;
        line-height: 1.8;
        padding: 10px;
    }
    #clearboardbutton {
        width: 100%;
        padding: 4px 2px;
        font-size: 14px;
    }
    #sawflexdiv{
        display: block;
    }
    #stuffedanimalwardiv{
        margin: 0;
        padding: 0;
        top: 0px;
        bottom: 0px;
        left: 0px;
        width: 100%;
    }
    /* Stack directional buttons and color picker vertically on mobile */
    #stuffedanimalwarformtable .direction-color-container {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    /* Make color picker smaller on mobile */
    #colorPickerButton {
        height: 80px !important;
        max-width: 100% !important;
    }
    #stuffedanimalwarsvg {
        height: 300px; /* Shorter height for mobile */
    }
    #stuffedanimalwarcanvas {
        height: 300px; /* Shorter height for mobile */
        /* Slightly thinner border for mobile */
        border-width: 12px;
        border-radius: 6px;
    }
    #stuffedanimalwarform{
        background-color:black;
        width:100%;
        border-width: 6px;
        border-radius: 6px;
        padding: 6px;
    }
    #chattable td {
        padding: 3px; /* Reduce padding for smaller screens */
    }

    #chatClientUser, #chatClientAutoResponder, #chatClientMessage {
        font-size: 14px; /* Adjust font size for better readability */
        width: 100%;
        max-width: 100%;
        box-sizing: border-box; /* Include padding and border in the width */
        margin: 0;
        padding: 5px; /* Adjust padding as needed */
    }

    /* Ensure #audiotable fits within its container */
    #audiotable {
        width: 100%;
        max-width: 100%;
    }

    #audiotable td {
        padding: 3px; /* Reduce padding for smaller screens */
    }

    /* Make audio elements responsive */
    #audiotable audio {
        width: 100%;
        max-width: 100%;
    }
    #selectsongs {
        width: 100%;
        max-width: 100%;
        font-size: 18px !important;
        line-height: 1.8;
        min-height: 44px;
        padding: 10px 12px !important;
    }
    #selectsongs option {
        font-size: 18px !important;
        line-height: 1.8;
        padding: 10px;
    }
    #selectvideos {
        width: 100%;
        max-width: 100%;
        font-size: 18px !important;
        line-height: 1.8;
        min-height: 44px;
        padding: 10px 12px !important;
    }
    #selectvideos option {
        font-size: 18px !important;
        line-height: 1.8;
        padding: 10px;
    }
    #messagesdiv {
        height: 200px;
        border-width: 6px;
        border-radius: 6px;
        padding: 6px;
    }
    #chattable {
        border-width: 6px;
        border-radius: 6px;
        padding: 6px;
    }
    #audiotable {
        border-width: 6px;
        border-radius: 6px;
        padding: 6px;
    }
    #videotable {
        border-width: 6px;
        border-radius: 6px;
        padding: 6px;
    }
    .photo-container {
        border-width: 6px;
        border-radius: 6px;
        padding: 6px;
    }
    /* Upload containers for mobile */
    .uploads-wrapper {
        gap: 8px;
        margin: 8px 0;
    }

    .upload-container {
        padding: 12px;
        border-width: 6px;
        border-radius: 6px;
    }
    .upload-header {
        padding-bottom: 10px;
    }
    .upload-icon {
        font-size: 24px;
    }
    .upload-title {
        font-size: 16px;
    }
    .file-input-button {
        padding: 10px 16px;
        font-size: 14px;
    }
    .file-input-icon {
        font-size: 16px;
    }
    .file-input-text {
        font-size: 14px;
    }
    .file-input-label {
        font-size: 12px;
        padding: 6px 10px;
    }
    .upload-submit-button {
        padding: 12px 20px;
        font-size: 15px;
    }
    .upload-submit-icon {
        font-size: 16px;
    }
    .upload-submit-text {
        font-size: 15px;
    }
    .progress-text {
        font-size: 12px;
    }
    .upload-info {
        font-size: 11px;
    }
    /* Modern sections for mobile */
    .section-container {
        padding: 12px;
        margin: 8px 0;
        border-width: 6px;
        border-radius: 6px;
    }
    .section-header {
        padding-bottom: 10px;
        gap: 10px;
    }
    .section-icon {
        font-size: 24px;
    }
    .section-title {
        font-size: 16px;
        letter-spacing: 1px;
    }
    .endpoint-info {
        font-size: 10px;
        padding: 5px 8px;
    }
    .input-label {
        font-size: 11px;
    }
    .modern-input, .modern-select {
        padding: 10px 12px;
        font-size: 18px;
        line-height: 1.8;
        min-height: 44px;
    }
    .modern-select option {
        font-size: 18px;
        line-height: 1.8;
        padding: 10px;
    }
    .action-button {
        padding: 8px 16px;
        font-size: 13px;
    }
    /* Chat controls mobile layout */
    .chat-controls {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .chat-message-area {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    /* Audio controls mobile */
    .audio-controls-container {
        flex-wrap: wrap;
        gap: 8px;
    }
    /* Photo gallery mobile */
    .photo-gallery {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
        gap: 8px;
    }
    .photo-thumbnail {
        height: 80px;
    }
    .photo-title {
        font-size: 11px;
        padding: 6px;
    }
}

@media only screen and (max-width: 640px) {
    #jaemzwaredynamicvideoplayer {
        width: 100%; /* On small screens, use responsive width */
        height: auto; /* Let the height adjust proportionally */
        margin: 0; /* Align left on mobile */
    }
}


/* Mobile styles */
@media only screen and (max-width: 768px) and (orientation: portrait) {
    .audio-controls-container {
        flex-wrap: nowrap;
    }

    #track-metadata {
        font-size: 10px; /* Smaller font for mobile */
    }

    #album-art-container {
        width: 24px;
        height: 24px;
    }
}
/* Collapsible Sections */
.section-header.collapsible {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    transition: background-color 0.3s ease;
}

.section-header.collapsible:hover {
    background: rgba(255, 255, 255, 0.05);
}

.upload-header.collapsible {
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background-color 0.3s ease;
}

.upload-header.collapsible:hover {
    background: rgba(255, 255, 255, 0.05);
}

.collapse-indicator {
    font-size: 16px;
    transition: transform 0.3s ease;
    user-select: none;
    margin-left: auto;
    padding-left: 10px;
    color: #ffffff !important;
    font-weight: bold;
    text-shadow: 0 0 3px rgba(255, 255, 255, 0.8);
}

.section-content {
    overflow: hidden;
    transition: max-height 0.3s ease;
}

/* Mobile optimizations for collapsible sections */
@media screen and (max-width: 768px) {
    .section-header.collapsible,
    .upload-header.collapsible {
        padding: 10px 15px;
        font-size: 16px;
    }

    .collapse-indicator {
        font-size: 14px;
    }

    .section-content {
        padding: 10px;
    }
}

/* Portrait mode specific adjustments */
@media screen and (max-width: 768px) and (orientation: portrait) {
    .section-container {
        margin-bottom: 15px;
    }

    .upload-container {
        margin-bottom: 15px;
    }
}

/* Inline Color Picker Responsive Styles */
#inlineColorPicker {
    width: 100%;
    box-sizing: border-box;
}

#inlineColorPicker input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    background: linear-gradient(to right, #333, #666);
    border-radius: 4px;
    cursor: pointer;
}

#inlineColorPicker input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    background: #ccccff;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 0 4px rgba(0,0,0,0.3);
}

#inlineColorPicker input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: #ccccff;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 0 4px rgba(0,0,0,0.3);
}

/* Mobile styles for inline color picker */
@media screen and (max-width: 768px) {
    #inlineColorPicker {
        padding: 12px !important;
    }

    #inlineColorPicker input[type="number"] {
        width: 45px !important;
        font-size: 14px !important;
        padding: 6px 2px !important;
    }

    #inlineColorPicker input[type="range"] {
        height: 12px !important;
    }

    #inlineColorPicker input[type="range"]::-webkit-slider-thumb {
        width: 24px;
        height: 24px;
    }

    #inlineColorPicker input[type="range"]::-moz-range-thumb {
        width: 24px;
        height: 24px;
    }

    #presets {
        grid-template-columns: repeat(8, 1fr) !important;
        gap: 6px !important;
    }

    #presets > div {
        min-height: 28px !important;
    }

    /* Stack direction and color vertically on mobile */
    .direction-color-container {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    /* Color preview on mobile */
    #colorPickerButton {
        height: 80px !important;
        max-width: 100% !important;
    }

    /* Fix clipping on mobile - game controls */
    #stuffedanimalwarform {
        overflow-x: hidden !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    #stuffedanimalwarformtable {
        width: 100% !important;
        table-layout: fixed !important;
    }

    #stuffedanimalwarformtable td {
        overflow: hidden !important;
        word-wrap: break-word !important;
    }

    /* Direction + color container - stack vertically on mobile */
    .direction-color-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
        width: 100% !important;
    }

    /* Direction buttons grid - constrain and center */
    .direction-buttons-grid {
        width: 100% !important;
        max-width: 100% !important;
        grid-template-columns: auto 60px auto !important;
        gap: 3px !important;
        overflow: hidden !important;
    }

    /* Direction button labels - smaller on mobile */
    .direction-label {
        padding: 6px 8px !important;
        font-size: 12px !important;
        margin: 0 1px !important;
    }

    .direction-label-vertical {
        width: 50px !important;
    }

    /* Color preview - thin full-width strip on mobile */
    .direction-color-container > div:last-child {
        width: 100vw !important;
        margin-left: calc(-50vw + 50%) !important;
        padding: 0 !important;
    }

    #colorPickerButton {
        width: 100% !important;
        height: 20px !important;
        max-width: none !important;
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
    }

    #colorPickerButton .color-picker-button-sample {
        border-radius: 0 !important;
    }

    /* Hide the COLOR label on mobile since the swatch is self-explanatory */
    .direction-color-container > div:last-child > label {
        display: none !important;
    }
}