body,
html {
  margin: 0;
  padding: 0;
  height: 100vh;                /* exactly one viewport tall */
  font-family: "Segoe UI", sans-serif;
  background-color: #1e1e1e;
  color: white;

  display: grid;                /* grid instead of flex */
  grid-template-rows: auto 1fr auto; /* auto = header, 1fr = middle, auto = timeline */
}
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #2a2a2a;
  padding: 10px 20px;
  border-bottom: 2px solid #444;
  flex: 0 0 auto;
}
.header-left {
  display: flex;
  align-items: center;
  white-space: nowrap;
}
.app-name {
  margin-left: 8px;
  color: #ccc;
  font-weight: bold;
}
.title {
  flex: 1;
  text-align: center;
  font-size: 1.2rem;
  font-weight: bold;
}
.header-right {
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.youtube-input-container {
  display: flex;
  align-items: center;
  margin-left: auto; /* pushes it to the right */
}

.youtube-input-container input {
  width: 170px; /* adjust as needed */
  padding: 6px 10px;
  background: #333;
  border: 1px solid #555;
  /* border-right: none; */
  border-radius: 4px 0 0 4px;
  color: #eee;
  font-size: 0.7rem;
  outline: none;
  border-radius: 4px;
}

.youtube-input-container input::placeholder {
  color: #888;
}

.youtube-input-container button {
  width: 36px;
  padding: 6px;
  background: #444;
  border: 1px solid #555;
  border-radius: 4px;
  color: #eee;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 2%;
}
.nav-button {
  background: #444;
  color: white;
  border: 1px solid #555;
  padding: 6px 10px;
  cursor: pointer;
  border-radius: 4px;
}
.top-section {
  flex: 0 0 50vh;                /* exactly half the viewport */
  display: flex;
  padding: 10px;
  box-sizing: border-box;
  overflow: hidden;              /* prevent it from growing beyond 50vh */
}
.results-section,
.map-section {
  background: #2a2a2a;
  border: 2px solid #444;
  padding: 10px;
}
.results-section {
  display: flex;
  flex-direction: column;
  padding: 16px;
  box-sizing: border-box;
  /* fix its height if needed, e.g.: height: 50vh; */
}

.results-section {
  flex: 0 1 50%;                 /* max 50% of .top-section width */
  margin-right: 10px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;              /* if tiles grow too tall internally, scroll here */
  box-sizing: border-box;
  position:relative;
  padding:16px;
}

.map-section {
  flex: 1 1 auto;                /* fill remaining width */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
}
.results-section h2,
.map-section h2 {
  margin: 0 0 10px;
  color: #ccc;
}
.players-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;     /* Important: don’t stretch row items */
  gap: 8px;
  height: 100%;                /* fill its parent vertically */
  box-sizing: border-box;
}
.player-summary {
  flex: 0 0 calc((100% - 32px) / 5);
  align-self: flex-start;
  box-sizing: border-box;
  padding: 8px;
  background: #1f1f1f;
  border: 1px solid #444;
  border-radius: 4px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  
  /* transition: background 0.2s ease; */
  
}



.player-summary-header .player-score {
  flex: 0 0 auto;
  
}

.player-summary-header .player-name {
  flex: 1 1 auto;                /* take remaining space */
  overflow: hidden;
  text-overflow: ellipsis;
}


/* Details hidden by default */
.player-summary-details {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.3s ease, opacity 0.3s ease;
  font-size: small;
  margin-top: 0;
  display:grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 12px;  
  padding: 4px 0; 
  
}

/* Show details when expanded */
.player-summary.expanded .player-summary-details {
  max-height: 100px; /* enough to show all stats */
  opacity: 1;
}

.player-summary-details p {
  margin: 2px 0;                   /* smaller vertical margins */
  white-space: nowrap;             /* prevent wrapping inside a cell */
}

.player-name {
  font-size: 0.9rem;
  font-weight: bold;
  color: #e2b12a;
  text-align: center;
}

.player-score {
  font-size: 1.2rem;
  color: #eee;
  text-align: center;
}

.team-scores {
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
  font-size: 0.9rem;
}
.team-scores li {
  margin: 5px 0;
}
.map-placeholder {
  background: #1e1e1e;
  border: 1px dashed #555;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #777;
}
/* Overlay remains unchanged, bottom adjusted */
.overlay {
  position: absolute;
  top: 60px;
  left: 0;
  right: 0;
  bottom: 33%;
  background: rgba(30, 30, 30, 0.95);
  display: flex;
  align-items: flex-start;
  justify-content: space-around;
  padding: 10px;
}
.overlay.hidden {
  display: none;
}
.detail-panel {
  background: #2a2a2a;
  border: 2px solid #444;
  padding: 20px;
  color: #ccc;
  width: 60%;
  display: flex;
  flex-direction: column;
}
.close-button {
  align-self: flex-start;
  background: none;
  border: 1px solid #555;
  color: #ccc;
  padding: 5px;
  cursor: pointer;
  margin-bottom: 10px;
}
.detail-panel h2 {
  margin: 0 0 10px;
}
.detail-panel h3 {
  margin: 0 0 15px;
}
.detail-panel ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.detail-panel li {
  margin: 5px 0;
}
.detail-map {
  background: #1e1e1e;
  border: 1px dashed #555;
  flex: 1;
  margin-top: 10px;
}
.timeline-section {
  flex: 1 1 auto;                /* fill everything below .top-section */
  padding: 10px;
  box-sizing: border-box;
  background: #2a2a2a;
  border-top: 2px solid #444;
  overflow: hidden;              /* never let its content push it bigger */
}
.timeline-section h2 {
  margin: 0 0 10px;
  color: #ccc;
}
#scoreChart {
  flex: 1;
}
.chart-controls {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 5px;
}
.chart-controls button {
  background: #444;
  border: none;
  padding: 6px 12px;
  color: white;
  cursor: pointer;
  font-size: 1rem;
  border-radius: 4px;
}

/* ---------- Draggable Video Modal ---------- */
.video-modal {
  position: absolute;
  top: 100px;
  left: 100px;
  width: 600px;
  background: #2a2a2a;
  border: 2px solid #555;
  border-radius: 4px;
  display: none; /* hidden until loadButton clicked */
  z-index: 1000;
  user-select: none; /* prevent text selection while dragging */
}

.modal-header {
  background: #333;
  padding: 8px;
  cursor: move; /* show draggable cursor */
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #555;
  border-radius: 4px 4px 0 0;
}

.modal-title {
  color: #eee;
  font-weight: bold;
}

.modal-close {
  background: transparent;
  border: none;
  color: #eee;
  font-size: 1.2rem;
  cursor: pointer;
}

.modal-body {
  padding: 0;
}

.team-scores {
  display: flex;
  flex-direction: column;
  gap: 8px;                     /* space between teams */
  margin: 0;
  padding: 0;
  list-style: none;
}

.team-scores li {
  display: flex;
  flex-direction: column;
  justify-content: space-between;  /* name up, score down */
  padding: 4px 6px;
  background: rgba(0,0,0,0.4);
  border-radius: 4px;
  white-space: nowrap;}

.team-scores .team-name {
  font-weight: bold;
  margin-bottom: 4px;         /* a bit of breathing room above the score */
}
.team-scores .team-score {
  font-size: 1.1em;           /* or adjust to taste */
  text-align: right;          /* line up numbers on the right */
}


.results-content {
  display: flex;
  gap: 16px;
  flex: 1 1 auto;           /* take up all the space between header and bottom */
  overflow: hidden;         /* prevent internal overflow from growing it */
}

.grid-container {
  flex: 1 1 auto;           /* grows to fill left side */
  overflow: auto;           /* scroll if grid gets too tall */
}

.scores-sidebar {
  flex: 0 0 120px;          /* fixed width */
  display: flex;
  flex-direction: column;
  margin-top: auto;         /* pushes the sidebar to the bottom of results-content */
  gap: 8px;
}

.detail-bases {
  display: flex;
  gap: 4px;
  margin-top: 4px;
}

.base-box {
  width: 20px;
  height: 20px;
  border: 2px solid #888;      /* fallback border */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8em;
  line-height: 1;
  background: transparent;
  border-radius: 3px;
}

.base-box.filled {
  color: white;
}

.home-section {
  /* limit width to ~70% of the viewport and center it */
  width: 50%;
  max-width: 1200px;   /* optional hard cap */
  margin: 5vh auto;      /* center horizontally */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background: #181818;
  padding: 20px 0;     /* top & bottom padding */
}


.home-section .app-header {
  height:30vh;
  font-size: 5rem;
  justify-content: center; 
  text-align: center;
  position: relative;
  text-decoration: underline dotted #e2b12a;
}


.games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  grid-auto-rows: 1fr;
  gap: 12px 16px;
  padding: 16px;
  max-width: calc(4 * 140px + 3 * 16px);
  margin: 32px auto;
    justify-items: center;
  grid-auto-rows: auto;
  
}

.game-tile {
  background: #282828;
  border: 1px solid #444;
  border-radius: 0.5rem;
  color: #eee;
  font-size: 0.9rem;
  aspect-ratio: 2 / 1;
  padding: 1rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.25rem; 
}

.game-tile:hover, .player-summary:hover {
  background: #333;
  border-color: #e2b12a;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.25);
}

.game-tile span:first-child {
  font-size: 0.85rem;
  color: #666;
  font-weight: 500;
}

.game-tile:hover span:first-child {
  font-size: 0.85rem;
  color: #e2b12a;
  font-weight: 500;
}

.game-tile span:last-child {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
}

.home-section .app-header {
  z-index: 1;
  background: #1a1a1a;
  border-bottom: 1px solid #444;
}

.nav-button:hover, #loadButton:hover  {
  background: #282828;
  border-color: #e2b12a;
}

@media (max-width: 768px) {
  .home-section {
    width: 100%;
    padding: 12px 0;
  }
  .games-grid {
    /* auto-fit as many 140px tiles as will fit */
    
    gap: 12px;
    padding: 12px;
  }
}

@media (max-width: 480px) {
  .games-grid {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 8px;
  }
  .game-tile {
    font-size: 0.8rem;
    padding: 8px;
    width:90%;
    margin: 2% 0;
  }
}

*::before,
*::after {
  box-sizing: border-box;
}

.app-logo {
  width: 48px;          /* or whatever fits your design */
  height: auto;
  margin-right: 12px;   /* space before the title */
  flex-shrink: 0;       /* prevent it from squishing */
}

@media (min-width: 600px) {
  .home-section .app-logo {
    width: 64px;
  }
}

/* 1) define the dance */
@keyframes dance1 {
  0%,100% { transform: translateY(0) rotate(0deg); }
  25%     { transform: translateY(-8px) rotate(10deg); }
  50%     { transform: translateY(0)   rotate(-10deg); }
  75%     { transform: translateY(-4px) rotate(5deg); }
}

@keyframes dance2 {
  0%,100% { transform: scale(1)   rotate(0deg);    }
  20%     { transform: scale(1.2) rotate(5deg);    }
  40%     { transform: scale(1)   rotate(-5deg);   }
  60%     { transform: scale(1.2) rotate(-5deg);   }
  80%     { transform: scale(1)   rotate(5deg);    }
}

@keyframes dance3 {
  0%,100% { transform: translateX(0)    rotate(0deg); }
  15%     { transform: translateX(-6px) rotate(-5deg); }
  30%     { transform: translateX(6px)  rotate(5deg);  }
  45%     { transform: translateX(-6px) rotate(-5deg); }
  60%     { transform: translateX(6px)  rotate(5deg);  }
  75%     { transform: translateX(-3px) rotate(-3deg); }
}

/* 2) trigger it when you hover */
.app-logo:hover {
  animation: dance 0.8s ease-in-out 1; /* 1 run per hover */
}

/* 3) optional: infinite dancing if you add a class */
.app-logo.dance-on-load {
  animation: dance 1s ease-in-out infinite;
}

@keyframes wiggle {
  0%, 100% { transform: rotate(0deg); }
   15%      { transform: rotate(5deg); }
   30%      { transform: rotate(-5deg); }
   45%      { transform: rotate(5deg); }
   60%      { transform: rotate(-5deg); }
   75%      { transform: rotate(5deg); }
}

.app-logo.wiggle-on-load {
  animation: wiggle 0.8s ease-in-out forwards;
}