html,body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; }
#map { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; }

#logo-panel { position: absolute; bottom: 24px; left: 24px; width: 150px; height: 150px; z-index: 1001; cursor: pointer; border: none; border-radius: 8px; overflow: hidden; transition: transform 0.15s ease; }
#logo-panel img { width: 100%; height: 100%; object-fit: contain; display: block; }
#logo-panel:active { transform: translateY(1px); }
#logo-panel:focus-visible { outline: 2px solid #ff3333; outline-offset: 2px; }
#logo-panel:hover {  border-color: #ff3333;transform: scale(1.02);cursor: pointer;}

#hud {  position: absolute;bottom: 24px;left: 50%;transform: translateX(-50%);z-index: 1000;display: flex;flex-direction: column;align-items: center;gap: 12px;}
#timestamp-overlay { font-family: 'FreeSans', sans-serif;font-weight: bold;font-size: 48px;color: #ffffff;letter-spacing: 2px;pointer-events: none;white-space: nowrap;}
#control-bar { opacity: 1;pointer-events: auto;transition: opacity 0.25s ease;background: rgba(0, 0, 0, 0.7);padding: 10px;border-radius: 0;border: 4px solid #ff0000;color: #ff3333;font-family: 'FreeSans', sans-serif;font-weight: bold;text-transform: uppercase;max-width: calc(100vw - 48px);box-sizing: border-box;}
#control-bar.hidden { opacity: 0;pointer-events: none;}
.controls-group { display: flex;flex-wrap: wrap;justify-content: center;align-items: center;gap: 10px;}
.controls-cluster { display: flex;align-items: center;gap: 10px;}
#control-bar button { background: #333;color: #ff3333;border: 2px solid #ff0000;border-radius: 0;padding: 5px 10px;cursor: pointer;font-family: inherit;font-weight: bold;text-transform: uppercase;}
#control-bar button:hover { background: #555;border-color: #ff0000;}
#control-bar button.active { background: #7a1010;color: #fff;}
#control-bar input[type="range"] { width: 150px;}
#control-bar label.checkbox-label { display: flex;align-items: center;gap: 5px;cursor: pointer;}
#prev-btn, #play-btn, #next-btn { font-size: 24px !important;line-height: 0.8 !important;padding: 8px 10px !important;overflow: visible;}
#speed-btn { background: #ff0000 !important; color: #fff !important; border: 2px solid #ff0000; }
#speed-btn, #save-image-btn, #save-video-btn, #fullscreen-btn { background: #ff0000 !important;color: #fff;border: 2px solid #000;}
#speed-btn.active { background: #ff0000 !important;color: #fff;}
#save-image-btn, #save-video-btn, #fullscreen-btn { font-size: 20px !important;padding: 6px 10px !important;}

#control-bar input[type="range"] { width: 150px;}

#control-bar label.checkbox-label { display: flex;align-items: center;gap: 5px;cursor: pointer;}

#menu-btn { display: none; }

#menu-btn { font-size: 14px !important; padding: 6px 10px !important; }


#calendar-panel { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1100; background: rgba(0, 0, 0, 0.92); border: 4px solid #ff0000; padding: 16px; color: #ff3333; font-family: 'FreeSans', sans-serif; font-weight: bold; text-transform: uppercase; display: flex; flex-direction: column; gap: 10px; min-width: 300px; box-sizing: border-box; }
#calendar-panel.hidden { display: none; }
.cal-row { display: flex; flex-direction: column; gap: 4px; font-size: 12px; letter-spacing: 1px; }
.cal-row.buttons { flex-direction: row; }
#archive-site-select, #archive-datetime { background: #333; color: #ff3333; border: 2px solid #ff0000; border-radius: 0; padding: 6px; font-family: inherit; font-weight: bold; }
#archive-site-select option { background: #333; }
#archive-go-btn { background: #ff0000; color: #fff; border: 2px solid #000; border-radius: 0; padding: 6px 16px; cursor: pointer; font-family: inherit; font-weight: bold; text-transform: uppercase; }
#archive-close-btn { background: #333; color: #ff3333; border: 2px solid #ff0000; border-radius: 0; padding: 6px 16px; cursor: pointer; font-family: inherit; font-weight: bold; text-transform: uppercase; }


@media (max-width: 600px) {
  #menu-btn { font-size: 14px !important; padding: 4px 8px !important; }
}

@media (max-width: 600px) {
  #menu-btn { display: inline-block; }
  #control-bar { position: relative; }
  #options-cluster {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    flex-direction: row;
    background: rgba(0, 0, 0, 0.85);
    border: 2px solid #ff0000;
    padding: 8px;
    gap: 8px;
    white-space: nowrap;
  }
  #control-bar.menu-open #options-cluster { display: flex; }
}

@media (max-width: 800px) {
  #logo-panel { width: 96px;height: 96px;bottom: 12px;left: 12px;}
  #hud { bottom: 12px;}
  #timestamp-overlay { font-size: 36px;letter-spacing: 1.5px;}
  #control-bar { padding: 8px;max-width: calc(100vw - 108px);}
  #control-bar button { padding: 4px 8px;font-size: 12px;}
  #control-bar input[type="range"] { width: 110px;}
  .controls-group { gap: 8px;}
  .controls-cluster { gap: 8px;}
  #control-bar label.checkbox-label { font-size: 12px;gap: 4px;}
}

@media (max-width: 600px) {
  #logo-panel { width: 64px; height: 64px; bottom: 8px; left: 8px; }
  #timestamp-overlay { font-size: 18px; letter-spacing: 1px; top: 8px; bottom: auto; }
  #control-bar { bottom: 8px; padding: 3px; border-width: 2px; max-width: calc(100vw - 140px); }
  #control-bar button { padding: 2px 5px; font-size: 10px; }
  #prev-btn, #play-btn, #next-btn { font-size: 16px !important; padding: 4px 6px !important; }
  #save-image-btn, #save-video-btn, #fullscreen-btn { font-size: 14px !important; padding: 3px 5px !important; }
  #control-bar input[type="range"] { width: 80px; }
  .controls-group { flex-wrap: nowrap; gap: 3px; }
  .controls-cluster { gap: 3px; }
  #control-bar label.checkbox-label { font-size: 9px; gap: 2px; }
}