body {
    background-color: #8e8e8e;
    background: radial-gradient(ellipse at center, rgba(226,226,226,1) 0%, rgba(230,230,230,1) 50%, rgba(184,182,184,1) 51%, rgba(254,254,254,1) 100%);
    margin: 0px;
    font-family: 'Arial', 'Helvetica', sans-serif;
}

h1 {
		color: rgb(234 234 234);
}

.container
{
    /* z-index: 0; */
    filter: grayscale() contrast(0.43) brightness(2.5) blur(2px);
    background-attachment: fixed;
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0px;
}

/* Your container for the image viewer */
.viewer {
  z-index: 99;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.60) 100%);
  background-attachment: fixed;
  backdrop-filter: blur(4px);
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* NEW: Basic styling for the metadata container */
.metadata-container {
	display: none; /* Hidden by default */
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.7);
	color: #fff;
	padding: 10px;
	font-family: monospace;
	white-space: pre-wrap;
	z-index: 200;
	box-shadow: inset 0px 0px 8px 0px rgba(0,0,0,1.0);
	backdrop-filter: blur(4px);
	overflow: scroll;
}
.metadata-container h2 {
	margin-top: 0;
	font-size: 1.2em;
}

.metadata-viewer {
	display: none; /* Hidden by default */
	margin: 8px;
	font-size: 0.9em;
}

.metadata-viewer.json {

}
.metadata-viewer.prompt {
	font-family: "Arial";
    font-size: 16px;
}

.overMenu {
  z-index: 50;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.40) 0%, rgba(0,0,0,0.80) 100%);
  box-shadow: inset 0px 0px 16px 0px rgba(255,255,255,0.5);
  background-attachment: fixed;
  backdrop-filter: blur(4px);
  height: 100%;
  width: 50vmin;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
	
  padding-top: 36px;
}

.MenuItem {
	-webkit-user-select: none;
    z-index: 99;
    font-family: 'arial';
    font-style: 'bold';
    font-size: 16px;
	background: linear-gradient(180deg,rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.53) 25%, rgba(0, 0, 0, 0.67) 75%, rgba(0, 0, 0, 1) 100%);
	width: 80%;
    padding: 4px;
    margin: 4px;
    padding-left: 16px;
    padding-right: 16px;
    border-radius: 8px;
    cursor:pointer;
    font-weight: bold;
    
    color: rgb(255 255 255);
    opacity: 0.85;

    text-decoration: none;
	
	box-shadow: inset 0px 0px 8px 0px rgba(255,255,255,0.5);

    transition: transform .2s; /* Animation */
}

.MenuItem.Active{
    background: linear-gradient(180deg,rgba(0, 96, 0, 1) 0%, rgba(0, 96, 0, 0.53) 25%, rgba(0, 96, 0, 0.67) 75%, rgba(0, 96, 0, 1) 100%);
}

.MenuItem.Inactive{
    background: linear-gradient(180deg,rgba(96, 32, 0, 1) 0%, rgba(96, 32, 0, 0.53) 25%, rgba(96, 32, 0, 0.67) 75%, rgba(96, 32, 0, 1) 100%);
}

.MenuItem:hover{
    box-shadow: inset 0px 0px 8px 0px rgba(255,255,255,0.70);
}

/* The actual image element inside the viewer */
.viewerImg {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain; /* The key property */
}

.hiddenViewer
{
    display: none !important;
}

.hide-in-game {
    display: none !important;
}

.ViewerButton
{
	-webkit-user-select: none;
    z-index: 99;
    font-family: 'arial';
    font-style: 'bold';
    font-size: 16px;
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.60) 100%);
    padding: 4px;
    margin: 4px;
    padding-left: 16px;
    padding-right: 16px;
    border-radius: 24px;
    cursor:pointer;
    font-weight: bold;
    
    color: rgb(255 255 255);
    opacity: 0.85;

    text-decoration: none;
	
	box-shadow: inset 0px 0px 8px 0px rgba(0,0,0,0.5);

    transition: transform .2s; /* Animation */
}

.ViewerButton:hover
{
    /*transform: scale(1.075);*/
	box-shadow: inset 0px 0px 8px 0px rgba(255,255,255,1.0);
    opacity: 1;
}

.ViewerButton.Close
{
    color: rgba(255,0,0);
}

.ButtonPanel
{
	display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
	position: absolute;
	list-style-type: none;
	padding: 0px;
	
	background: radial-gradient(ellipse at center, rgba(172,172,172,0.25) 0%, rgba(0,0,0,0.60) 100%);
    border-radius: 24px;
}

.ButtonPanel.Rating
{
	bottom: 0px;
	left: 16px;
}

.ButtonPanel.Info
{
	top: 0px;
	left: 16px;
}

.ButtonPanel.OverMenu
{
	z-index: 70;
	position: fixed;
	margin: 0px;
	top: 0px;
	left: 0px;
}

.ButtonPanel.BasicActions
{
    right: 16px;
    top: 0px;
}

.ViewerButton.OverMenu
{
    color: rgba(255,255,255);
}

.ViewerButton.Yah
{
    color: rgba(148,212,0);
}

.ViewerButton.Nah
{
    color: rgba(255,96,0);
}

.ViewerButton.Meh
{
    color: rgba(0,96,255);
}

.ViewerButton.Reset
{
    color: rgba(172,96,212);
}

.ViewerButton.Download
{
    color: rgb(0,60,255);
}

.ViewerButton.Info
{
    color: rgb(0,182,255);
}


.DISABLED-zoom
{
    z-index: 0;
    height: 100%;
    width: 100%;
    position: absolute;
    top: -96px;
    left: 0px;
}

.ins-imgs-li
{
    z-index: 9;
    padding: 1vmin;
    margin: 1vmin;
    width: 44vmin;

    border-radius: 1vmin;
    box-shadow: 1vmin 1vmin 1.5vmin 0px rgba(0,0,0,0.75);

    list-style-type: none;
    font-family: "Arial";
    font-size: 1vmax;
    color: rgb(234 234 234);

    background: linear-gradient(to bottom, 
                                rgba(76,76,76,0.80) 0%, 
                                rgba(89,89,89,0.80) 12%, 
                                rgba(102,102,102,0.80) 25%, 
                                rgba(71,71,71,0.80) 39%, 
                                rgba(44,44,44,0.80) 50%, 
                                rgba(0,0,0,0.80) 51%, 
                                rgba(17,17,17,0.80) 60%, 
                                rgba(43,43,43,0.80) 76%, 
                                rgba(28,28,28,0.80) 91%, 
                                rgba(19,19,19,0.80) 100%);
    
    backdrop-filter: blur(4px);

    transition: transform .2s; /* Animation */
}

.ins-imgs-li:hover {
  transform: scale(1.025); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

.ins-imgs
{
    width: 100%;
    padding: 0px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.imgThumb
{
		width: 100%;
		cursor: pointer;
}

.ins-imgs-img
{
    
}

/* --- TITLE SCREEN --- */
.title-screen {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: 1000;
    overflow: hidden;
    background: #000;
}
.title-screen.hiddenViewer { display: none; }

.ts-mosaic-wrapper {
    position: absolute;
    top: -100%; left: -100%; width: 300%; height: 300%;
    transform: rotate(45deg);
    z-index: 1001;
}

.ts-mosaic {
    display: flex; flex-direction: column; width: 100%; height: auto;
    animation: panMosaic 90s linear infinite;
}
.ts-mosaic-grid {
    display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-start;
    width: 100%; gap: 8px; padding-bottom: 8px;
}
@keyframes panMosaic {
    0% { transform: translateY(0); }
    100% { transform: translateY(-50%); }
}
.ts-mosaic-grid img { width: 200px; height: 200px; object-fit: cover; border-radius: 8px; opacity: 0.6; }

.ts-overlay {
    position: absolute; inset: 0; z-index: 1002;
    background: radial-gradient(ellipse at center, rgba(31,43,66,0.6) 0%, rgba(13,21,34,0.9) 100%);
    backdrop-filter: blur(3px);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}

.ts-logo { width: 150px; margin-bottom: 20px; filter: drop-shadow(0 0 20px rgba(255,255,255,0.2)); }
.ts-title { width: min(96vw, 1200px); max-width: 96vw; object-fit: contain; margin-bottom: 40px; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.5)); }
.ts-player-info { text-align: center; color: white; margin-bottom: 30px; font-family: 'Arial', sans-serif; }
.ts-player-info h2 { font-size: 28px; margin: 0 0 10px 0; color: #5bc0de; }
.ts-player-info h3 { font-size: 20px; margin: 0; color: #5eff7a; }
#TsNameInputContainer { display: flex; gap: 10px; margin-bottom: 15px; }
#TsNameInputContainer input { padding: 10px; border-radius: 6px; border: 1px solid #555; background: rgba(34,34,34,0.8); color: white; font-size: 16px; }
#TsNameInputContainer button { padding: 10px 15px; background: #007bff; color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: bold; }
.ts-buttons { display: flex; flex-direction: column; gap: 10px; width: 250px; }
.ts-buttons button { padding: 10px; font-size: 16px; font-weight: bold; cursor: pointer; border-radius: 10px; border: none; font-family: 'Arial', sans-serif; transition: transform 0.2s, background 0.2s; box-shadow: 0 4px 15px rgba(0,0,0,0.4); }
.ts-buttons button:nth-child(1) { background: linear-gradient(145deg, #27ae60, #2ecc71); color: white; border: 2px solid #5eff7a; }
.ts-buttons button:nth-child(2) { background: linear-gradient(145deg, #2980b9, #3498db); color: white; border: 2px solid #5bc0de; }
.ts-buttons button:nth-child(3) { background: linear-gradient(145deg, #f39c12, #e67e22); color: white; border: 2px solid #f9d71c; }
.ts-buttons button:hover { transform: scale(1.05); filter: brightness(1.2); }

/* --- SETTINGS MODAL --- */
.settings-modal {
    background-color: rgba(43, 48, 59, 0.95);
    backdrop-filter: blur(10px);
    color: white; display: flex; flex-direction: column; z-index: 1200;
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    padding: 30px; border-radius: 12px; width: 350px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-family: 'Arial', sans-serif;
}
.settings-modal.hiddenViewer { display: none !important; }
.settings-modal h3 { margin-top: 0; text-align: center; font-size: 24px; }
.settings-modal button { margin-top: 10px; padding: 12px; background: #444; color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 16px; transition: background 0.2s; font-weight:bold; }
.settings-modal button:hover { background: #555; }

/* --- REVIEW OVERLAY --- */
.review-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.9) 100%); z-index: 2000;
    display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px);
}
.review-overlay.hiddenViewer { display: none !important; }

/* --- SCOREBOARD BG --- */
.gsm-bg {
    position: absolute; inset: 0; z-index: -1;
    background: url('Media/Title Large.png') center/contain no-repeat;
    opacity: 0.1; filter: blur(2px) grayscale(50%);
}

#MobilePuBtn { display: none; margin-right: 5px; }

.final-prompt-display {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.65) !important;
    color: #5eff7a;
    padding: 15px 30px;
    font-size: clamp(14px, 2.2vw, 26px) !important;
    font-weight: bold;
    border-radius: 12px;
    z-index: 70;
    border: 2px solid #5eff7a;
    text-align: center;
    max-width: 80%;
    backdrop-filter: blur(5px);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.6);
}

/* --- MOBILE RESPONSIVE --- */
@media (max-width: 768px) {
    .viewer {
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: stretch !important;
        height: 100dvh !important;
        overflow: hidden !important;
    }

    .viewerImg.in-game {
        position: relative !important;
        top: auto !important; left: auto !important;
        width: 100vw !important;
        height: auto !important; 
        flex: 0 0 auto !important; /* Retain implicit height */
        max-height: 50dvh !important; /* Prevent it from taking the whole screen vertically */
        margin: 0 !important;
        padding: 0 !important;
        object-fit: contain !important; 
        order: 1 !important;
    }

    .word-game-side {
        position: relative !important; 
        top: auto !important; bottom: auto !important; 
        height: auto !important;
        max-height: none !important;
        flex: 1 1 auto !important; /* Grow to fill gap exactly */
        width: 100vw !important; 
        left: 0 !important; right: 0 !important; 
        border-radius: 0;
        background: rgba(0,0,0,0.6); backdrop-filter: blur(5px);
        padding: 5px; gap: 4px; box-sizing: border-box;
        order: 2 !important;
        overflow-y: auto !important;
        align-content: flex-start !important;
    }
    
    .game-score-bar {
        position: relative !important;
        bottom: auto !important; left: auto !important; right: auto !important;
        padding: 6px !important; flex-wrap: nowrap !important; overflow-x: auto; white-space: nowrap;
        min-height: auto !important; height: auto !important; 
        font-size: 11px;
        z-index: 100 !important;
        box-sizing: border-box;
        order: 3 !important;
        flex: 0 0 auto !important; /* Fix to bottom */
        flex-direction: row !important;
        justify-content: flex-start !important;
        gap: 6px !important;
    }
    
    .game-score-bar > div:not(#TimerBar) {
        gap: 4px !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
    }

    .word-bubble {
        padding: 4px 8px !important;
        font-size: 11px !important;
        border-radius: 8px !important;
        border-width: 1px !important;
    }

    .final-prompt-display {
        width: 95%; max-width: none; font-size: clamp(12px, 3.6vw, 18px) !important; padding: 4px 8px; top: 2%;
        line-height: 1.2;
        background: rgba(0, 0, 0, 0.65) !important;
    }
    
    /* Duplicate .game-score-bar removed for cleanliness */
    
    #PowerupBar {
        position: fixed; top: 50%; left: 50%;
        transform: translate(-50%, -50%);
        bottom: auto; right: auto;
        flex-direction: column; background: rgba(30,30,40,0.98); box-shadow: 0 0 30px rgba(0,0,0,0.8);
        padding: 20px; border-radius: 12px; display: none !important; 
        border: 1px solid rgba(255,255,255,0.2);
        z-index: 1000 !important;
        width: 80vw; max-width: 300px; align-items: stretch; gap: 8px;
    }
    #PowerupBar.pu-menu-open {
        display: flex !important;
    }
    
    .pu-modal-title { display: block !important; text-align: center; font-size: 18px; font-weight: bold; margin-bottom: 10px; color: white; border-bottom: 1px solid rgba(255,255,255,0.2); padding-bottom: 10px; }
    .pu-modal-close { display: block !important; margin-top: 10px; padding: 12px; background: #eb5757; color: white; border: none; border-radius: 6px; font-weight: bold; cursor: pointer; text-align: center; font-size: 16px; transition: background 0.2s; }
    .pu-modal-close:hover { background: #c94646; }
    .powerup-btn { padding: 12px !important; font-size: 16px !important; justify-content: center; margin: 0; }


    .hide-mobile { display: none !important; }
    .show-mobile { display: inline-block !important; }
    .player-name { font-size: 14px !important; }
    .score-line { font-size: 10px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; display: inline-block; vertical-align: middle; }


    #MobilePuBtn {
        display: block;
        padding: 4px 8px; background: linear-gradient(135deg, #f39c12, #e67e22);
        color: white; border: none; border-radius: 6px; font-size: 12px; font-weight: bold; cursor: pointer;
    }
    
    .points-bubble { font-size: 28px; }
    .action-btn { padding: 4px 10px !important; font-size: 14px !important; border-radius: 6px !important; line-height: 1.2 !important; }
    .pause-btn { padding: 4px 10px !important; font-size: 14px !important; border-radius: 6px !important; line-height: 1.2 !important; }
    .game-timer-text { font-size: 16px !important; min-width: auto !important; }
    #MobilePuBtn { padding: 4px 10px !important; font-size: 14px !important; border-radius: 6px !important; line-height: 1.2 !important; margin: 0 !important; }
    .setup-modal { width: 90vw !important; max-width: 400px !important; box-sizing: border-box; padding: 20px !important; }
}

/* --- APP VERSION DISPLAY --- */
#AppVersionDisplay {
    position: fixed;
    bottom: 5px;
    right: 5px;
    color: rgba(255, 255, 255, 0.25);
    font-size: 10px;
    z-index: 10000;
    pointer-events: none;
    font-family: 'Arial', sans-serif;
}