* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background: #000;
    color: #fff;
    overflow: hidden;
}

#slideshow-container {
    width: 100vw;
    height: 100vh;
    position: relative;
}

#loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
    color: #ccc;
}

#slideshow {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

#image-container {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: pinch-zoom;
}

#current-image {
    width: 100vw;
    height: 100vh;
    object-fit: contain;
    transition: opacity 0.5s ease-in-out;
}

#image-caption {
    position: absolute;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 20px);
    left: calc(env(safe-area-inset-left, 0px) + 20px);
    background: rgba(0, 0, 0, 0.8);
    padding: 20px;
    border-radius: 8px;
    max-width: calc(100% - 40px);
    width: fit-content;
}

#image-title {
    font-size: 28px;
    margin-bottom: 10px;
    color: #fff;
}

#image-date {
    font-size: 18px;
    color: #ccc;
}

#controls {
    position: absolute;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 20px);
    right: calc(env(safe-area-inset-right, 0px) + 20px);
    display: flex;
    gap: 10px;
    align-items: center;
    background: rgba(0, 0, 0, 0.4);
    padding: 8px 12px;
    border-radius: 8px;
}

#controls button {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: #fff;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 18px;
    transition: background 0.3s;
}

#controls button:hover {
    background: rgba(255, 255, 255, 0.4);
}

#image-counter {
    color: #ccc;
    font-size: 14px;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 4px;
    transition: background-color 0.2s;
}

#image-counter:hover {
    background: rgba(70, 110, 160, 0.55);
    color: #fff;
}

#position-bar {
    width: 150px;
    height: 10px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 5px;
    cursor: pointer;
    position: relative;
    touch-action: none;
}

#position-fill {
    height: 100%;
    width: 0%;
    background: rgba(120, 180, 255, 0.9);
    border-radius: 5px;
    pointer-events: none;
}

#paused-indicator {
    background: rgba(255, 235, 60, 0.95);
    color: #000;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
    white-space: nowrap;
}

#detail-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

#detail-content, #help-content, #about-content {
    background: #222;
    padding: 40px;
    border-radius: 10px;
    max-width: 80%;
    max-height: 80%;
    overflow-y: auto;
}

#help-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

#about-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
}

#about-content {
    text-align: center;
    width: 92%;
    max-width: 760px;
    max-height: 94%;
    padding: 28px 36px;
}

#about-content h2 {
    font-size: 32px;
    margin-bottom: 15px;
    color: #fff;
}

#about-tagline {
    font-size: 16px;
    line-height: 1.5;
    color: #ccc;
    margin-bottom: 25px;
}

#about-info {
    background: rgba(0, 0, 0, 0.3);
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 25px;
    border-left: 4px solid #4CAF50;
    display: inline-block;
}

#about-info p {
    font-size: 16px;
    line-height: 1.6;
    color: #fff;
}

#about-appname {
    font-weight: bold;
    font-size: 18px;
}

#about-copyright {
    color: #ccc;
    margin-top: 8px;
}

#about-contact {
    font-size: 15px;
    color: #ccc;
    margin-bottom: 10px;
}

#about-quality {
    text-align: left;
    background: rgba(0, 0, 0, 0.3);
    border-left: 4px solid #87CEEB;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 25px;
}

#about-quality h3 {
    color: #87CEEB;
    font-size: 20px;
    margin-bottom: 12px;
}

#about-quality p {
    font-size: 15px;
    line-height: 1.6;
    color: #ddd;
    margin-bottom: 10px;
}

#about-quality p:last-child {
    margin-bottom: 0;
}

/* Introduction / welcome screen and periodic reminder */
#intro-overlay, #reminder-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
}

#intro-content, #reminder-content {
    background: #222;
    padding: 30px 45px;
    border-radius: 15px;
    max-width: 1100px;
    width: 98%;
    max-height: 98%;
    overflow-y: auto;
    text-align: center;
}

#intro-content h1 {
    font-size: 32px;
    color: #fff;
    margin-bottom: 18px;
    line-height: 1.3;
}

.intro-lead, .reminder-lead {
    font-size: 19px;
    line-height: 1.55;
    color: #ddd;
    margin-bottom: 14px;
}

.intro-section {
    background: rgba(0, 0, 0, 0.3);
    border-left: 4px solid #4CAF50;
    border-radius: 8px;
    padding: 18px 24px;
    margin: 22px 0;
    text-align: left;
}

.intro-section h2 {
    color: #4CAF50;
    font-size: 22px;
    margin-bottom: 14px;
}

.intro-section p {
    font-size: 18px;
    line-height: 1.55;
    color: #eee;
}

.intro-steps {
    margin: 0 0 10px 22px;
    font-size: 18px;
    line-height: 1.6;
    color: #eee;
}

.intro-steps li {
    margin-bottom: 8px;
}

.intro-note {
    font-size: 16px;
    color: #bbb;
    font-style: italic;
    margin-top: 5px;
}

#intro-start, #reminder-continue {
    background: #4CAF50;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 18px 40px;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    margin-top: 22px;
    transition: background-color 0.3s;
}

#intro-start:hover, #reminder-continue:hover {
    background: #45a049;
}

#intro-autostart, #reminder-autostart {
    margin-top: 18px;
    color: #888;
    font-size: 15px;
    font-style: italic;
}

/* "Don't show again" checkbox on the reminder */
#reminder-hide-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 22px;
    font-size: 17px;
    color: #ccc;
    cursor: pointer;
}

#reminder-hide {
    width: 22px;
    height: 22px;
    cursor: pointer;
}

/* Smaller screens (e.g., iPhone) */
@media (max-width: 600px) {
    #intro-content, #reminder-content {
        padding: 25px 20px;
        width: 96%;
        max-height: 96%;
    }
    #intro-content h1 {
        font-size: 24px;
    }
    .intro-lead, .reminder-lead {
        font-size: 16px;
    }
    .intro-section {
        padding: 14px 16px;
        margin: 16px 0;
    }
    .intro-section h2 {
        font-size: 18px;
    }
    .intro-section p,
    .intro-steps {
        font-size: 15px;
    }
    #intro-start, #reminder-continue {
        padding: 14px 28px;
        font-size: 17px;
        width: 100%;
    }
    #reminder-hide-label {
        font-size: 15px;
    }
}

#detail-title {
    font-size: 32px;
    margin-bottom: 5px;
    color: #fff;
}

#detail-id-subtitle {
    font-size: 14px;
    color: #888;
    margin-bottom: 20px;
    font-style: italic;
}

#help-content h2 {
    font-size: 32px;
    margin-bottom: 20px;
    color: #fff;
}

#detail-info p, #help-info p {
    margin-bottom: 15px;
    font-size: 16px;
    line-height: 1.5;
}

#detail-info strong, #help-info strong {
    color: #ccc;
}

#detail-instructions, #help-instructions, #about-instructions {
    text-align: center;
    margin-top: 30px;
    color: #888;
    font-style: italic;
}

.help-mobile-note {
    display: none;
    background: rgba(200, 140, 0, 0.2);
    border: 1px solid rgba(255, 190, 60, 0.5);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 20px;
    color: #ffd479;
    font-size: 15px;
    line-height: 1.5;
    text-align: center;
}

/* --- Keyboard vs. touch wording -----------------------------------------
   Hints that name physical keys (SPACEBAR, arrows, +/-, etc.) make no sense
   on a phone or tablet that has no keyboard. Text marked ".kbd-only" is the
   default (keyboard) wording; ".touch-only" text is shown instead on touch
   devices. Detection is done entirely in CSS with a "no hover + coarse
   pointer" media query, which matches phones and tablets while leaving
   touchscreen laptops (which do have a keyboard) on the keyboard wording.
   Explicit display values are used (rather than "revert") so this works on
   older mobile browsers too. */
.touch-only { display: none; }

@media (hover: none) and (pointer: coarse) {
    .kbd-only { display: none; }
    .touch-only { display: inline; }             /* inline spans within sentences */
    p.touch-only, div.touch-only { display: block; }

    /* Friendly touch intro on the help screen */
    .help-mobile-note { display: block; }
}

.help-key {
    display: inline-block;
    background: rgba(100, 150, 255, 0.25);
    border: 1px solid rgba(100, 150, 255, 0.55);
    border-radius: 6px;
    padding: 8px 14px;
    margin: 2px 6px 2px 0;
    font-family: monospace;
    font-weight: bold;
    font-size: 16px;
    color: #cfe6ff;
    cursor: pointer;
    box-shadow: 0 0 8px rgba(100, 150, 255, 0.3);
    min-width: 44px;
    min-height: 40px;
    text-align: center;
    vertical-align: middle;
    transition: background-color 0.2s, transform 0.1s;
}

.help-key:hover {
    background: rgba(100, 150, 255, 0.5);
    color: #fff;
}

.help-key:active {
    transform: scale(0.94);
}

.key-highlight {
    display: inline-block;
    background: rgba(100, 150, 255, 0.2);
    border: 1px solid rgba(100, 150, 255, 0.4);
    border-radius: 4px;
    padding: 2px 6px;
    margin-right: 8px;
    font-family: monospace;
    font-weight: bold;
    color: #87CEEB;
    box-shadow: 0 0 8px rgba(100, 150, 255, 0.3);
    min-width: 20px;
    text-align: center;
}

#instructions {
    position: absolute;
    top: calc(env(safe-area-inset-top, 0px) + 10px);
    left: calc(env(safe-area-inset-left, 0px) + 20px);
    right: calc(env(safe-area-inset-right, 0px) + 20px);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 14px;
    color: #ccc;
}

#instructions .cmd {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(0, 0, 0, 0.4);
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s, transform 0.1s;
}

#instructions .cmd:hover {
    background: rgba(70, 110, 160, 0.55);
}

#instructions .cmd:active {
    transform: scale(0.95);
}

#instructions kbd {
    display: inline-block;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-bottom-width: 2px;
    border-radius: 4px;
    padding: 1px 7px;
    font-family: monospace;
    font-weight: bold;
    font-size: 13px;
    color: #fff;
    line-height: 1.4;
}

#instructions .cmd-icon {
    display: block;
    flex: none;
}

/* Gentle pulse to draw attention on the first few slides */
@keyframes instructions-pulse {
    0%   { transform: scale(1);    background-color: rgba(0, 0, 0, 0.4);    box-shadow: 0 0 0 0 rgba(100, 170, 255, 0); }
    50%  { transform: scale(1.13); background-color: rgba(70, 130, 220, 0.95); box-shadow: 0 0 20px 7px rgba(120, 180, 255, 0.9); }
    100% { transform: scale(1);    background-color: rgba(0, 0, 0, 0.4);    box-shadow: 0 0 0 0 rgba(100, 170, 255, 0); }
}

#instructions.pulsing .cmd {
    animation: instructions-pulse 1s ease-in-out 3;
}

/* On touch devices the command bar is tapped, not typed. Hide the key
   glyphs and give each command chip the same "keycap" border the glyphs
   use, so the whole label reads as a button. This block is placed after the
   base #instructions rules on purpose so it wins the (equal-specificity)
   cascade. */
@media (hover: none) and (pointer: coarse) {
    #instructions kbd { display: none; }

    #instructions .cmd {
        gap: 0;
        padding: 9px 14px;
        background: rgba(255, 255, 255, 0.12);
        border: 1px solid rgba(255, 255, 255, 0.35);
        border-bottom-width: 2px;
        color: #fff;
        font-weight: bold;
    }
}

#timing-notification {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.8);
    padding: 20px 30px;
    border-radius: 10px;
    z-index: 500;
    transition: opacity 0.3s;
}

#timing-text {
    color: #fff;
    font-size: 24px;
    text-align: center;
    margin: 0;
}

#feedback-prompt {
    margin-top: 20px;
    padding: 15px;
    background: rgba(0, 100, 0, 0.3);
    border-radius: 8px;
    border: 2px solid rgba(0, 150, 0, 0.5);
    cursor: pointer;
    transition: background-color 0.3s;
}

#feedback-prompt:hover {
    background: rgba(0, 120, 0, 0.4);
}

#feedback-prompt p {
    margin: 0;
    font-size: 18px;
    color: #90EE90;
    text-align: center;
}

#feedback-overlay, #feedback-success-overlay, #jump-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
}

#feedback-content, #feedback-success-content {
    background: #333;
    padding: 40px;
    border-radius: 15px;
    max-width: 900px;
    width: 90%;
    max-height: 90%;
    overflow-y: auto;
    color: #fff;
}

#jump-content {
    background: #333;
    padding: 35px 40px;
    border-radius: 15px;
    max-width: 420px;
    width: 90%;
    color: #fff;
    text-align: center;
}

#jump-content h2 {
    font-size: 26px;
    margin-bottom: 15px;
}

#jump-content p {
    font-size: 16px;
    color: #ccc;
    margin-bottom: 18px;
}

#jump-input {
    width: 140px;
    padding: 12px;
    border: 2px solid #555;
    border-radius: 6px;
    background: #222;
    color: #fff;
    font-size: 22px;
    text-align: center;
    box-sizing: border-box;
}

#jump-input:focus {
    outline: none;
    border-color: #4CAF50;
    background: #2a2a2a;
}

#jump-go {
    background: #4CAF50;
    color: #fff;
}

#jump-go:hover {
    background: #45a049;
}

#jump-cancel {
    background: #666;
    color: #fff;
}

#jump-cancel:hover {
    background: #555;
}

#feedback-content h2, #feedback-success-content h2 {
    color: #fff;
    margin-bottom: 20px;
    font-size: 28px;
}

#current-info {
    background: rgba(0, 0, 0, 0.3);
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 25px;
    border-left: 4px solid #4CAF50;
}

#current-info h3 {
    color: #4CAF50;
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 18px;
}

#optional-contact {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #555;
}

#optional-contact h3 {
    color: #87CEEB;
    margin-bottom: 10px;
    font-size: 18px;
}

#optional-contact p {
    color: #ccc;
    font-size: 14px;
    margin-bottom: 20px;
    font-style: italic;
}

.image-id-ref {
    font-size: 12px;
    color: #666;
    font-style: italic;
    margin-top: 15px;
    border-top: 1px solid #444;
    padding-top: 10px;
}

/* Brief highlight to guide the user to the next field (or submit) */
@keyframes field-pulse-anim {
    0%, 100% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0); }
    50%      { box-shadow: 0 0 0 4px rgba(76, 175, 80, 0.75); }
}

.field-pulse {
    animation: field-pulse-anim 0.6s ease-in-out 2;
    border-color: #4CAF50 !important;
}

.highlighted-section {
    background: rgba(0, 0, 0, 0.3);
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 25px;
    border-left: 4px solid #4CAF50;
}

.highlighted-section label {
    color: #4CAF50 !important;
    font-size: 18px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: #ccc;
}

.form-group input, .form-group textarea {
    width: 100%;
    padding: 12px;
    border: 2px solid #555;
    border-radius: 6px;
    background: #222;
    color: #fff;
    font-size: 16px;
    font-family: inherit;
    box-sizing: border-box;
}

.form-group input:focus, .form-group textarea:focus {
    outline: none;
    border-color: #4CAF50;
    background: #2a2a2a;
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

.form-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 30px;
}

.form-buttons button, #feedback-continue {
    padding: 12px 30px;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s;
}

#feedback-submit {
    background: #4CAF50;
    color: white;
}

#feedback-submit:hover {
    background: #45a049;
}

#feedback-submit:disabled {
    opacity: 0.6;
    cursor: default;
}

#feedback-cancel {
    background: #666;
    color: white;
}

#feedback-cancel:hover {
    background: #555;
}

#feedback-continue {
    background: #4CAF50;
    color: white;
    display: block;
    margin: 20px auto 0;
}

#feedback-continue:hover {
    background: #45a049;
}

.fade-out {
    opacity: 0 !important;
}

.fade-in {
    opacity: 1 !important;
}