/* Presentation View. The position of the content is CRITICAL at it needs to fit in the foreseen area in the provided background image. Do not change it without explicit confirmation of the user */
.presentation-view {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-image: url('../img/background.jpg');
    background-size: cover;
    background-position: center;
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Align content to the top */
    padding: 37vh 1rem 1rem; /* Start content at 37% screen height */
}

#presentation-content-wrapper {
    width: 100%;
    max-width: 720px;
    max-height: calc(63vh - 1rem); /* Max height relative to new start position */
    overflow-y: auto;
    cursor: default;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem; /* Reduced space between header/list/footer */
}

.presentation-header {
    font-size: 2.5rem;
    font-weight: 700;
    color: #8f1111;
    margin-bottom: 1rem; /* Reduced space after header */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
    text-align: center;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 8px;
    transition: background-color 0.2s;
}

.presentation-header:hover {
    background-color: rgba(255, 255, 255, 0.5);
}

#participant-list-container {
    width: 100%;
    display: grid;
    gap: 0; /* Dramatically reduced vertical spacing */
    justify-items: center; /* Center items within grid columns */
}

#participant-list-container.two-columns {
    grid-template-columns: repeat(2, 1fr);
    max-width: 700px; /* Reduced total width for 2-col view */
}

.participant-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0.2rem 0.2rem;
    width: fit-content; /* Adjust width to content for centering */
    text-decoration: none;
    color: inherit;
    border-radius: 8px;
    background-color: transparent;
    border: 1px solid transparent;
    cursor: pointer;
}

.participant-item:hover .participant-name {
    color: #3733ad;
    text-shadow: none;
}

.participant-item.selected {
    border: 1px solid var(--subtle-text-color);
    background-color: rgba(238, 242, 255, 0.9);
}

.participant-item.launched .participant-name {
    color: #15803d; /* dark green */
}

.participant-icon {
    width: 40px;
    height: 40px;
    margin-right: 1rem;
    flex-shrink: 0;
}

.participant-name {
    font-size: 1.8rem;
    font-weight: 600;
    color: #1f2937; /* --text-color */
    text-shadow: 1px 1px 1px #fff;
    transition: color 0.2s;
}

.presentation-empty-message {
    text-align: center;
    padding: 2rem;
    font-size: 1.5rem;
    font-weight: 500;
    color: #6b7280; /* --subtle-text-color */
    width: 100%;
    grid-column: 1 / -1;
}

.presentation-footer {
    font-size: 2rem;
    font-weight: 500;
    color: #1f2937;
    margin-top: 1rem; /* Reduced space before footer */
    background-color: rgba(255, 255, 255, 0.9);
    padding: 0.5rem 1rem;
    border-radius: 99px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    text-align: center;
    word-break: break-all;
}

.presentation-footer .presentation-footer-link {
    color: #25529c;
    font-weight: 700;    
}

/* Admin Context Menu */
.context-menu {
    position: absolute;
    z-index: 2200;
    background-color: white;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    padding: 0.5rem 0;
    min-width: 340px;
    font-size: 0.95rem;
    animation: fadeIn 0.1s ease-out;
}

.context-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.context-menu li {
    padding: 0.6rem 1rem;
    cursor: pointer;
    transition: background-color 0.2s;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.context-menu li:hover {
    background-color: var(--background-color);
}

.context-menu li.disabled {
    color: var(--subtle-text-color);
    cursor: not-allowed;
}

.context-menu li.disabled:hover {
    background-color: transparent;
}

.context-menu li svg {
    flex-shrink: 0;
    color: var(--subtle-text-color);
}

.context-menu .filename-text {
    font-family: monospace;
    display: inline-block;
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    white-space: nowrap;
}

.context-menu-info {
    padding: 0.5rem 1rem !important;
    font-size: 0.85rem;
    color: var(--subtle-text-color);
    border-top: 1px solid var(--border-color);
    cursor: default !important;
    background-color: transparent !important;
    white-space: pre-wrap;
    line-height: 1.3;
}
.context-menu-info:hover {
    background-color: transparent !important;
}


/* Time Change Popup Styles */
#time-change-popup {
    z-index: 2100; /* Ensure it's on top of the presentation view (z-index: 2000) */
}

.time-popup-content {
    max-width: 500px;
}

.time-adjuster {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin: 1.5rem 0;
}

.time-display {
    font-size: 2.5rem;
    font-weight: 700;
    font-family: monospace;
    color: var(--primary-color);
    padding: 0.5rem 1rem;
    background-color: #eef2ff;
    border-radius: 8px;
    min-width: 120px;
    text-align: center;
}

.time-btn {
    width: 48px;
    height: 48px;
    font-size: 2rem;
    font-weight: bold;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background-color: #f9fafb;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.time-btn:hover {
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.time-btn:active {
    transform: scale(0.95);
}

#btn-time-close {
    width: auto;
    min-width: 120px;
}

/* Participant Details Popup Styles */
#participant-details-popup {
    z-index: 2100;
}
.participant-popup-content {
    max-width: 450px;
    text-align: left;
}
.participant-popup-content h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.75rem;
    word-break: break-all;
}
#participant-popup-details, #participant-popup-no-details {
    margin-bottom: 1.5rem;
}
#participant-popup-details p {
    margin-bottom: 0.5rem;
    color: var(--subtle-text-color);
}
#participant-popup-no-details p {
     color: var(--subtle-text-color);
}
.participant-popup-content .button-group {
    justify-content: flex-end;
}

/* Award Screen Overlay */
.award-screen-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    overflow: hidden;
}

.award-screen-overlay img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    width: 100%;
    height: 100%;
}

.award-screen-overlay .award-text {
    position: absolute;
    padding: 2rem;
    text-align: center;
    font-size: clamp(2rem, 8vw, 10rem);
    font-weight: 900;
    line-height: 1.1;
    text-shadow: 3px 3px 10px rgba(0,0,0,0.8);
    white-space: pre-wrap; /* To respect \n */
    -webkit-text-stroke: 1px black; /* For better visibility */
    /* Ensure horizontal centering for all positions */
    left: 0;
    right: 0;
}

.award-text.position-top {
    top: 5vh;
}

.award-text.position-center {
    top: 50%;
    transform: translateY(-50%);
}

.award-text.position-bottom {
    bottom: 5vh;
}

/* Camera Screen Overlay */
.camera-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9998; /* Just below award screen */
    overflow: hidden;
    cursor: pointer;
}

.camera-overlay video {
    width: 100%;
    height: 100%;
    object-fit: contain; /* 'contain' is better than 'cover' to see the whole frame */
}