/* Import the Roboto font from Google Fonts */
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Cookie&display=swap");
/* --- Farb- und Font-Definitionen, angelehnt an das vorherige Design --- */
:root {
  --primary-color: #008080; /* Teal */
  --primary-color-dark: #006666;
  --secondary-color: #f9a602; /* Orange */
  --secondary-color-dark: #ce8900; /* Orange */
  --light-gray: #f6f6f6;
  --font-color: #333;
  --font-color-light: #666;
  --font-sans: "Poppins", sans-serif;

  /* Beispiel-Farben für verschiedene Feldtypen */
  --tile-fairway: #a0d1bc;
  --tile-green: #c1ebd8;
  --tile-rough: #f0f7f4;
  --tile-bunker: #f3e6ac;
  --tile-water: #7db9da;
  --tile-tree: #006666;
}

/* -------------------- 
   Global Reset & Base Styles
----------------------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Overpass", sans-serif;
  background-color: var(--light-gray);
  color: var(--font-color);
  line-height: 1.6;
}

/* -------------------- 
   Main Container & Header
----------------------- */
#main-container {
  width: 100%;
  max-width: 650px;
  margin: 0 auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

#header {
  background-color: #fff;
  padding: 16px 20px;
  border-bottom: 2px solid var(--light-gray);
}

#header h1 {
  font-size: 22px;
  color: #4caf50;
  font-weight: 500;
}

#logo {
  text-align: center; /* Optional: Zentriert den Text */
  margin-top: 3rem;
  margin-bottom: 2rem;
}

#logo-text {
  /* Ersetze 'YourFontName' durch den gewünschten Font */
  font-family: "Cookie", serif;
  color: var(--primary-color);
  /* Die Schriftgröße passt sich mit der Viewport-Breite an */
  font-size: clamp(72px, 12vw, 120px);
  font-weight: 550;
  line-height: 1;
}

#controls {
  margin-top: 1rem;
  margin-bottom: 2rem;
}

#freeplay-daily-btn {
  width: 100%;
  padding: 12px;
  font-size: 16px;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  background-color: var(--primary-color);
}

#freeplay-daily-btn:hover {
  background-color: var(--secondary-color-dark);
}

#index-imprint {
  text-align: center;
  color: var(--font-color-light);
  font-size: 12px;
  margin-top: 10px;
}

#imprint-link {
  color: var(--primary-color);
  text-decoration: none;
}
/* -------------------- 
   Game Section: Grid
----------------------- */
#game-section {
  flex-direction: column;
  gap: 20px;
}

#game-container {
  display: flex;
  flex-direction: column;
}

/* Status & Course Info */
#status {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}

#course-name {
  font-size: 48px;
  color: var(--primary-color);
  line-height: 1;
  font-weight: 500;
  text-align: center;
  font-family: "Cookie", serif;
  font-style: normal;
}

#course-hole {
  font-size: 16px;
  color: var(--font-color-light);
  text-align: center;
}

#course-info {
  text-align: start;
  margin-top: 20px;
}

/* -------------------- 
   Status Table Styling
----------------------- */
.status-table {
  border-collapse: collapse;
  width: 100%;
  max-width: 600px;
  margin-top: 1rem;
  background-color: var(--light-gray);
  font-size: 14px;
}

.status-table th,
.status-table td {
  padding: 0.2rem;
  text-align: center;
  border-bottom: 1px solid #ddd;
}

.status-table thead {
  background-color: var(--light-gray);
}

.status-table thead th {
  font-weight: 600;
  color: var(--font-color-light);
}

.status-table tbody tr:nth-child(even),
.status-table tbody tr:nth-child(odd) {
  background-color: #fff;
}

.status-table .total-column {
  font-weight: bold;
  background-color: var(--light-gray);
}

.active-hole {
  color: var(--secondary-color);
}

@media (max-width: 600px) {
  .grid-container {
    grid-template-columns: repeat(
      10,
      1fr
    ); /* weniger Spalten bei schmalen Screens */
  }
}

/* -------------------- 
   Buttons (Shared Styles)
----------------------- */
button {
  width: 100%;
  font-family: inherit;
  font-size: 1em;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin-top: 10px;
}

#share-result-final {
  background-color: var(--secondary-color);
  width: 100%;
  padding: 12px;
  font-size: 16px;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

#share-result-final:hover {
  background-color: var(--secondary-color-dark);
}

#random-seed-btn {
  background-color: var(--primary-color);
  color: #fff;
  width: 100%;
  padding: 12px;
  font-size: 16px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

#random-seed-btn:hover {
  background-color: var(--primary-color-dark);
}

#index-streak {
  text-align: center;
  margin-bottom: 1rem;
  color: var(--secondary-color);
  font-size: 18px;
}

.primary-btn {
  background-color: var(--secondary-color);
  width: 100%;
  padding: 12px;
  font-size: 16px;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.primary-btn:hover {
  background-color: var(--secondary-color-dark);
}

.primary-btn.disabled-btn {
  background-color: #f3debe;
  cursor: not-allowed;
}

.secondary-btn {
  background-color: var(--primary-color);
  width: 100%;
  padding: 12px;
  font-size: 16px;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.secondary-btn:hover {
  background-color: var(--primary-color-dark);
}

/* -------------------- 
   Responsive Grid Container
----------------------- */
#grid-container {
  position: relative;
  width: 100%;
  max-width: 650px;
  margin: 0 auto;
}

#grid {
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  gap: 2px;
  padding: 1.5rem 0;
}

/* -------------------- 
   Grid Cells
----------------------- */
.cell {
  background-color: #f9f9f9;
  border: 1px solid #e0e0e0;
  border-radius: 2px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
}

/* -------------------- 
   Field Types
----------------------- */
/* Fairway */
.cell.fairway {
  background-color: var(--tile-fairway);
  color: #fff;
}

/* Rough */
.cell.rough {
  background-color: var(--tile-rough);
  color: #666;
}

/* Sand */
.cell.sand {
  background-color: var(--tile-bunker);
  color: #333;
}

/* Green */
.cell.green {
  background-color: var(--tile-green);
  color: #333;
}

/* Water */
.cell.water {
  background-color: var(--tile-water);
  color: #fff;
}
.cell.water::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80%;
  height: 80%;
  transform: translate(-50%, -50%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cline x1='2' y1='2' x2='8' y2='8' stroke='white' stroke-width='0.5'/%3E%3Cline x1='8' y1='2' x2='2' y2='8' stroke='white' stroke-width='0.5'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Tree */
.cell.tree {
  background-color: var(--tile-tree);
  color: #fff;
}
.cell.tree::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80%;
  height: 80%;
  transform: translate(-50%, -50%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cline x1='2' y1='2' x2='8' y2='8' stroke='white' stroke-width='0.5'/%3E%3Cline x1='8' y1='2' x2='2' y2='8' stroke='white' stroke-width='0.5'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.cell.green.slope {
  background-color: var(--tile-green);
}

.cell.fairway.slope {
  background-color: var(--tile-fairway);
}
.cell.slope::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-style: solid;
}
.cell.slope.slopeS::after {
  border-width: 8px 5px 0 5px;
  border-color: #fff transparent transparent transparent;
}
.cell.slope.slopeN::after {
  border-width: 0 5px 8px 5px;
  border-color: transparent transparent #fff transparent;
}
.cell.slope.slopeE::after {
  border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent #fff;
}
.cell.slope.slopeW::after {
  border-width: 5px 8px 5px 0;
  border-color: transparent #fff transparent transparent;
}

/* Goal Cell */
.cell.goal {
  background-color: var(--tile-green);
  color: #333;
}
.cell.goal::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect x='8' y='8' width='4' height='48' fill='%23444'/%3E%3Cpolygon points='16,8 56,20 16,32' fill='red'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Ball Marker – standardmäßig nicht anklickbar */
.cell.ball {
  position: relative;
  cursor: default; /* Standard-Cursor, wenn noch kein Ziel ausgewählt */
}

.cell.ball::after {
  content: "";
  position: absolute;
  top: 10%;
  left: 10%;
  width: 80%;
  height: 80%;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #ffffff, #6e6e6e);
  box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.3);
  transform: scale(1.2); /* Ausgangszustand */
  transition: transform 0.2s ease; /* Sanfte Animation */
}

/* Wenn der Ball anklickbar ist (nach Auswahl eines Zielfeldes) */
.cell.ball.clickable::after {
  cursor: pointer;
  animation: pulse 0.8s infinite ease-in-out;
}

/* Definition der Pulse-Animation */
@keyframes pulse {
  0% {
    transform: scale(1.2);
  }
  50% {
    transform: scale(1.4); /* leicht vergrößern */
  }
  100% {
    transform: scale(1.2);
  }
}

/* Styling für den fliegenden Ball (wird während der Animation verwendet) */
.flying-ball {
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #ffffff, #6e6e6e);
  pointer-events: none;
  z-index: 1000;
}

/* -------------------- 
   Highlighting für Zielzellen
----------------------- */
/* Alle targetable Felder erhalten eine graue, solide Umrandung */
.cell.targetable {
  cursor: pointer;
  outline: 2px dashed #707070;
  z-index: 1;
}

/* Bereits ausgewählte Felder */
.cell.selected-target {
  outline: 3px solid var(--secondary-color);
  z-index: 2;
}

/* -------------------- 
   Rules and Info Section
----------------------- */
#header-section {
  background-color: #fff;
  padding: 20px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
}

#header-section-index {
  background-color: #fff;
  padding: 40px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
}

#daily-section {
  display: none;
  padding: 0 20px 20px;
}

#rules-section {
  padding: 20px;
}

#rules-section h2 {
  margin-bottom: 12px;
  color: #3b9e9e;
}

.box {
  margin-bottom: 20px;
}

.info-text {
  font-size: 16px;
  color: #666;
  font-weight: 100;
  line-height: 1.3;
}

.legend {
  list-style: none;
  margin: 10px 0;
  padding: 0;
}

.legend li {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-bottom: 6px;
}

.legend li img {
  width: 24px;
  height: 24px;
}

.steps {
  list-style: disc;
  margin: 10px 0;
  padding: 0;
}

.steps li {
  margin-left: 20px;
  align-items: center;
  gap: 2px;
  margin-bottom: 6px;
}

/* --- Intro Section --- */
#intro-section {
  text-align: center;
  margin-bottom: 20px;
}

#intro-section .info-text {
  font-size: 16px;
  color: #555;
  line-height: 1.6;
  margin-bottom: 20px;
}

/* History Link */

#stat-heading {
  margin-bottom: 10px;
  color: #333;
  font-weight: 500;
}

#stat-item {
  margin-bottom: 10px;
  color: #333;
  line-height: 1;
}

#stat-started {
  color: #2c6645;
  font-weight: 500;
}

#stat-number {
  color: #ff9100;
  font-weight: 500;
}

#history-item {
  margin-bottom: 10px;
  line-height: 1;
}
#history-date {
  color: #999;

  font-size: 12px;
}

.history-link {
  text-decoration: none;
  color: #333;
}

.history-link:hover {
  color: #3b9e9e;
}

#back-p {
  margin-top: 1.5rem;
  display: flex;
  justify-content: space-around;
  text-align: center;
}

#back-link,
#back-link2 {
  text-decoration: none;
  line-height: 1;
  border-radius: 4px;
  padding: 0.8rem 1.4rem;
  font-size: 1rem;
  margin: 4px;
  width: 100%;
}

#back-link {
  background-color: var(--light-gray);
  color: var(--primary-color);
}

#back-link2 {
  background-color: var(--primary-color);
  color: var(--light-gray);
  margin-bottom: 1rem;
}

#back-link:hover {
  background-color: var(--primary-color); /* dunklere Nuance */
  color: var(--light-gray);
  transform: translateY(-2px);
}

#back-link2:hover {
  background-color: var(--primary-color-dark); /* dunklere Nuance */
  color: var(--light-gray);
  transform: translateY(-2px);
}

#mode-text-freeplay {
  margin-top: 5px;
  margin-bottom: 15px;
  text-align: center;
  font-weight: 500;
  font-size: 14x;
  color: var(--primary-color);
}

#mode-text-daily {
  margin-top: 5px;
  margin-bottom: 15px;
  text-align: center;
  font-weight: 500;
  font-size: 14x;
  color: var(--secondary-color);
}

#buymeacoffee {
  margin-top: 50px;
  text-align: center;
}
.field-icon {
  width: 20px;
  height: 20px;
  margin-right: 8px;
  border: 1px solid #ccc;
  vertical-align: middle;
}

/* Field type icons */
.field-icon.fairway {
  background-color: var(--tile-fairway);
}

.field-icon.rough {
  background-color: var(--tile-rough);
}

.field-icon.sand {
  background-color: var(--tile-bunker);
}

.field-icon.green {
  background-color: var(--tile-green);
}

.field-icon.water {
  background-color: var(--tile-water);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 10 10'%3E%3Cline x1='2' y1='2' x2='8' y2='8' stroke='white' stroke-width='1'/%3E%3Cline x1='8' y1='2' x2='2' y2='8' stroke='white' stroke-width='1'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

.field-icon.tree {
  background-color: var(--tile-tree);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 10 10'%3E%3Cline x1='2' y1='2' x2='8' y2='8' stroke='white' stroke-width='1'/%3E%3Cline x1='8' y1='2' x2='2' y2='8' stroke='white' stroke-width='1'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

.field-icon.slope {
  background-color: var(--tile-fairway);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 10 10'%3E%3Cpolygon points='3,3 7,5 3,7' fill='white'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

/* Example icon for the Ball marker */
.field-icon.ball {
  content: "";
  top: 10%;
  left: 10%;
  width: 80%;
  height: 80%;
  border: none;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #ffffff, #6e6e6e);
  box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.3);
  transform: scale(1); /* Ausgangszustand */
  transition: transform 0.2s ease; /* Sanfte Animation */
}

.field-description {
  margin-bottom: 16px;
}

.field-header {
  display: flex;
  align-items: center;
}

.field-header .field-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-right: 8px;
  /* Ensures the icon remains square */
}

.field-description p {
  margin: 4px 0 0 28px; /* Leaves a small left margin for readability without indenting too far */
}

.steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.step {
  align-items: center;
}

.step .icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-right: 8px;
}

/* Dashed cell icon: represents all possible target cells (shown with a dashed border) */
.icon.dashed-cell {
  border: 2px dashed #707070;
  background: transparent;
}

/* Selected cell icon: represents the chosen target cell (displayed in orange) */
.icon.selected-cell {
  background: transparent;
  border: 2px solid #dd8500;
}

/* Ball icon: represents your ball with its characteristic radial gradient */
.icon.ball-icon {
  content: "";
  top: 10%;
  left: 10%;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #ffffff, #6e6e6e);
  box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.3);
  transform: scale(1); /* Ausgangszustand */
  transition: transform 0.2s ease; /* Sanfte Animation */
}

.icon.goal-icon {
  content: "";
  top: 10%;
  left: 10%;
  width: 24px;
  height: 24px;
  border: none;
  background-color: var(--tile-green);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 64 64'%3E%3Crect x='8' y='8' width='4' height='48' fill='%23444'/%3E%3Cpolygon points='16,8 56,20 16,32' fill='red'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;

  box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.3);
  transform: scale(1); /* Ausgangszustand */
  transition: transform 0.2s ease; /* Sanfte Animation */
}

/* -------------------- 
   Responsive Adjustments
----------------------- */
@media (max-width: 600px) {
  #main-container {
    padding: 0;
  }
  #grid-container {
    max-width: 100%;
  }

  #header-section {
    padding: 10px;
    border-radius: 0px;
  }

  #header-section-index {
    padding: 40px;
    border-radius: 0px;
  }
  #course-info {
    margin-top: 0rem;
  }
  #course-name {
    font-size: 32px;
  }

  #rules-section {
    padding: 10px;
  }
  #grid {
    padding-top: 10px;
    padding-bottom: 10px;
    gap: 2px;
  }
  #back-p {
    margin-top: 1rem;
  }
}