/* Base styles */
body {
  margin: 0;
  font-family: 'VT323', monospace;
  background-color: black;
  color: white;
  user-select: none; /* Prevent text selection globally */
  -webkit-user-select: none; /* For Safari */
  -moz-user-select: none; /* For Firefox */
  -ms-user-select: none; /* For IE/Edge */
}

/* Prevent link dragging */
a {
  -webkit-user-drag: none; /* Disable dragging for links in WebKit browsers */
  user-drag: none; /* Disable dragging for links in other browsers */
  text-decoration: none; /* Remove underline from links */
  color: inherit; /* Inherit text color */
}

/* Prevent text selection for all elements */
* {
  -webkit-touch-callout: none; /* Disable touch callouts */
  -webkit-user-select: none; /* Disable text selection in Safari */
  -moz-user-select: none; /* Disable text selection in Firefox */
  -ms-user-select: none; /* Disable text selection in IE/Edge */
  user-select: none; /* Disable text selection globally */
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0;
  padding: 0;
}

.grid-item {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: black;
}

.grid-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none; /* Prevent image selection */
  pointer-events: none; /* Prevent dragging */
}

/* Radial Progress Bar Styles */
.walk-progress-block {
  border: 2px solid white; /* White border for walk progress block */
  text-decoration: none; /* Remove underline from link */
  color: inherit; /* Inherit text color */
}

.radial-progress {
  position: relative;
  width: 80%;
  height: 80%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.progress-circle {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: conic-gradient(
    #4caf50 var(--progress, 0%),
    #333 var(--progress, 0%) 100%
  );
  z-index: 1;
}

.progress-circle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80%;
  height: 80%;
  background: black;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.progress-content {
  position: relative;
  z-index: 3;
  text-align: center;
}

.progress-value {
  font-size: 1.5em;
  font-weight: bold;
  color: white;
}

.progress-text {
  font-size: 0.9em;
  color: #ccc;
  text-align: center;
  margin-top: 5px;
}

.progress-text .title {
  font-size: 1.2em;
  font-weight: bold;
  color: white;
  margin-bottom: 5px;
}

.progress-text .subtitle {
  font-size: 0.8em;
  color: #ccc;
}

/* Time and Date Block Styles */
.time-block {
  cursor: pointer; /* Show pointer cursor on hover */
  text-decoration: none; /* Remove underline */
  color: white; /* Ensure text is white */
  border: 2px solid white; /* White border for time block */
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  user-select: none; /* Prevent text selection */
}

/* Remove link styling for time block */
.time-block:hover,
.time-block:active,
.time-block:focus {
  text-decoration: none; /* Remove underline */
  color: white; /* Ensure text stays white */
}

.time-line {
  text-decoration: none;
  font-size: 1.2em;
  margin: 5px 0;
  text-align: center;
}

.time-block .time-line {
  color: white; /* Ensure text is white */
}

/* Story Block Styles */
.story-block {
  border: 2px solid white; /* White border for story block */
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  user-select: none; /* Prevent text selection */
}

.story-content {
  width: 90%;
  height: 90%;
  overflow-y: auto; /* Scrollable area for long text */
  text-align: center;
}

.story-title {
  font-size: 1.5em;
  font-weight: bold;
  margin-bottom: 10px;
}

.story-text {
  font-size: 1em;
  line-height: 1.4;
}

/* Minigames Block Styles */
.minigames-block {
  border: 2px solid white; /* White border for minigames block */
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  user-select: none; /* Prevent text selection */
}

.minigames-title {
  font-size: 1.5em;
  font-weight: bold;
  margin-top: -2px; /* Move text down */
}

.minigames-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 columns */
  grid-template-rows: repeat(2, 1fr); /* 2 rows */
  gap: 10px; /* Space between images */
  width: 100%;
  height: 100%;
}

.minigame-item {
  text-decoration: none; /* Remove underline from links */
  color: inherit; /* Inherit text color */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  user-select: none; /* Prevent text selection */
}

.minigame-item img {
  width: 60px; /* 25% smaller */
  height: 60px; /* 25% smaller */
  object-fit: cover;
  user-select: none; /* Prevent image selection */
  pointer-events: none; /* Prevent dragging */
}

.minigame-label {
  font-size: 1em;
  margin-top: 10px; /* Move text down */
  color: white; /* Ensure text is white */
}

/* Drawing Block Styles */
.drawing-block {
  border: 2px solid white; /* White border for drawing block */
  text-decoration: none; /* Remove underline from link */
  color: inherit; /* Inherit text color */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  user-select: none; /* Prevent text selection */
}

.drawing-block img {
  max-width: 100%; /* Fit within the block */
  max-height: 100%; /* Fit within the block */
  object-fit: contain; /* Maintain aspect ratio */
  user-select: none; /* Prevent image selection */
  pointer-events: none; /* Prevent dragging */
}

.drawing-label {
  font-size: 1.5em;
  font-weight: bold;
  margin-top: 10px;
  color: white; /* Ensure text is white */
}

/* Responsive adjustments */
@media (max-width: 600px) {
  .grid-container {
    grid-template-columns: repeat(2, 1fr);
  }
}