/* ---------- Design tokens & layout constants ---------- */
:root{
  /* theme */
  --bg:#0b0b0b; --card:#151515; --text:#f2f2f2; --muted:#b8b8b8;
  --accent:#1db954; --accent-2:#2a2a2a;
  /* radii & spacing */
  --radius:14px; --radius-sm:10px;
  --space-1:8px; --space-2:12px; --space-3:16px; --space-4:20px; --space-5:24px;
  /* table row height (mobile overrides below) */
  --guess-row-h: 64px;
}

/* ---------- Base ---------- */
html,body{background:var(--bg); color:var(--text);}
body{
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Inter, Arial, sans-serif;
  line-height: 1.4;
  margin: 0;
  padding: var(--space-3);
  text-align: center;
}

/* Header */
header{
  padding: 20px;
  display: flex; flex-direction: column; align-items: center;
  border-bottom: 1px solid #333;
}
header h1{ margin: 0; text-align: center; font-size: clamp(1.4rem, 3.5vw, 2.2rem); }
.header-controls{ display: flex; align-items: center; gap: 20px; margin-top: 10px; }

/* Inputs & buttons */
input{ padding: 8px; font-size: 16px; }
button{
  padding: 8px 12px; font-size: 16px; margin-left: 4px; cursor: pointer;
  background-color: var(--accent); border: none; border-radius: 5px; color: #fff;
}

/* ---------- Table (desktop defaults) ---------- */
table{ margin: 20px auto; border-collapse: collapse; width: 90%; }
th, td{
  padding: 10px; border: 1px solid #333; text-align: center; font-weight: bold; vertical-align: middle;
}
th img, td img{ vertical-align: middle; }

/* Stable layout for the guesses table */
#guessesTable{ table-layout: fixed; width: 90%; }
#guessesTable th, #guessesTable td{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#guessesTable .col-guess   { width: 4%; }
#guessesTable .col-song    { width: 36%; }
#guessesTable .col-album   { width: 30%; }
#guessesTable .col-track   { width: 8%; }
#guessesTable .col-duration{ width: 10%; }
#guessesTable .col-streams { width: 12%; }
#guessesTable th:first-child, #guessesTable td:first-child{ padding-left: 4px; padding-right: 4px; }

/* Album cell (cover + text) */
#guessesTable tbody tr{ height: var(--guess-row-h); }
#guessesTable td.album-cell{
  padding-top: 0; padding-bottom: 0; padding-left: 0;
  display: grid; grid-template-columns: var(--guess-row-h) 1fr; align-items: center; gap: 8px;
}
#guessesTable td.album-cell img{
  width: var(--guess-row-h); height: var(--guess-row-h);
  object-fit: cover; display: block; justify-self: start; margin-left: 0; border-radius: 10px;
}
.album-text{ flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Autocomplete ---------- */
.autocomplete{ position: relative; display: inline-block; }
.autocomplete-items{
  position: absolute; z-index: 30; top: 100%; left: 0; right: 0;
  background:#121212; border:1px solid #232323; max-height: 45vh; overflow:auto;
  border-radius: var(--radius); box-shadow: 0 10px 30px rgba(0,0,0,.5); margin-top:6px;
}
.autocomplete-items div{ padding: 14px var(--space-3); cursor: pointer; color: #fff; border-bottom: 1px solid #1f1f1f; }
.autocomplete-items div:last-child{ border-bottom: 0; }
.autocomplete-active{ background:#1c1c1c !important; color:#fff; }

/* ---------- Feedback colors ---------- */
td.green { background: rgba(0, 230, 38, 0.815); border-radius: 10px; color:#fff; }
td.yellow{ background: rgba(239, 191, 17, 0.86);  border-radius: 10px; color:#111; }
td.gray  { background: rgba(255,255,255,.06);     border-radius: 10px; color:#fff; }

/* Highlight entire winning row */
#guessesTable tr.win-row td{ background-color:#4CAF50 !important; color:#fff !important; }

/* ---------- Overlays ---------- */
.overlay{
  position: fixed; display: none; inset: 0; background: rgba(0,0,0,0.85);
  justify-content: center; align-items: center; z-index: 1000; padding: var(--space-3);
}
.overlay-card{
  background:#222; color:#fff; text-align:center;
  width: min(680px, 92vw); max-height: 90vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 20px; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.6);
}
img#albumCover, img#lossAlbumCover{
  width: 80%; max-width: 400px; height: auto; display: block; margin: 15px auto; border-radius: 10px;
}

/* How To Play modal */
#howToPlayOverlay .overlay-card{
  width: 960px; max-width: 95vw; max-height: 90vh; overflow-y: auto; text-align: left; padding: 30px;
}
.how-to-directions{ margin-bottom: 20px; }
.how-to-directions ul{ padding-left: 20px; }
.how-to-albums{ display:flex; flex-wrap:nowrap; justify-content:center; gap:10px; }
.how-to-albums img{ width:60px; height:60px; object-fit:cover; border-radius:5px; border:1px solid #333; }

/* Guess distribution */
.gd-heading{ margin: 16px 0 8px; font-size: 1.1em; font-weight: 600; }
#guessDist .gd-row{ display:flex; align-items:center; gap:8px; margin:4px 0; }
#guessDist .gd-num{ width:20px; text-align:right; opacity:.8; }
#guessDist .gd-bar{ flex:1; height:14px; background:#333; border-radius:6px; overflow:hidden; }
#guessDist .gd-bar > div{ height:100%; background:#1db954; text-align:right; padding-right:6px; font-size:12px; line-height:14px; }

/* Scroll lock when any modal is open */
body.modal-open{ overflow: hidden; }

/* Footer links (bottom-right stack) */
#footerLinks{
  position: fixed; right: 14px; bottom: 14px;
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
  font-size: 14px; z-index: 10;
}
#footerLinks a{ color:#aab8af; text-decoration:none; opacity:.9; }
#footerLinks a:hover{ text-decoration: underline; opacity: 1; }

/* ---------- Mobile adjustments (desktop unchanged) ---------- */

/* Slightly smaller album row height on narrower phones */
@media (max-width: 480px){ :root{ --guess-row-h: 52px; } }

/* Mobile-only typography scaling */
@media (max-width: 700px){
  html{ font-size: 13px !important; }
  body, p, li, td, th, input, button{ font-size: 0.9rem !important; line-height: 1.25 !important; }
  h1{ font-size: 1.2rem !important; margin: 12px 0 6px !important; }
  h2{ font-size: 1.05rem !important; margin: 10px 0 6px !important; }

  /* Compact table that still reads like desktop */
  #guessesTable{ table-layout: fixed; width: 100%; margin: 12px auto; border-collapse: collapse; }
  #guessesTable th{ font-size: 0.78rem !important; padding: 6px 6px !important; text-transform: uppercase; letter-spacing: .02em; }
  #guessesTable td{ font-size: 0.86rem !important; padding: 6px 6px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* Artwork-only album column on phones */
  .album-cell .album-text{
    position: absolute !important; width:1px !important; height:1px !important;
    margin:-1px !important; padding:0 !important; overflow:hidden !important;
    clip: rect(0 0 0 0) !important; white-space: nowrap !important; border:0 !important;
  }
  td.album-cell{
    display:grid !important; grid-template-columns: 1fr !important;
    align-items:center !important; justify-items:center !important;
    padding-top:4px !important; padding-bottom:4px !important;
  }
  td.album-cell img{
    display:block !important; width:32px !important; height:32px !important;
    object-fit:cover !important; border-radius:6px !important; border:1px solid #242424 !important;
  }

  /* Column rebalance to fit on phones */
  #guessesTable .col-song     { width: 50% !important; }
  #guessesTable .col-album    { width: 12% !important; }
  #guessesTable .col-track    { width: 10% !important; }
  #guessesTable .col-duration { width: 14% !important; }
  #guessesTable .col-streams  { width: 14% !important; }
}

/* Small phones */
@media (max-width: 480px){
  html{ font-size: 12px !important; }
  #guessesTable th{ font-size: 0.72rem !important; }
  #guessesTable td, .album-cell .album-text{ font-size: 0.8rem !important; }
  #guessInput, #guessBtn, #seeResultsBtn{ font-size: 0.85rem !important; }
}

/* Very small phones */
@media (max-width: 400px){
  html{ font-size: 11px !important; }
  #guessesTable th{ font-size: 0.68rem !important; }
  #guessesTable td, .album-cell .album-text{ font-size: 0.76rem !important; }
  #guessInput, #guessBtn, #seeResultsBtn{ font-size: 0.8rem !important; }
}

/* Ultra narrow */
@media (max-width: 360px){
  html{ font-size: 10px !important; }
  #guessesTable th{ font-size: 0.62rem !important; }
  #guessesTable td, .album-cell .album-text{ font-size: 0.72rem !important; }
  #guessInput, #guessBtn, #seeResultsBtn{ font-size: 0.76rem !important; }
}

/* Tiniest devices */
@media (max-width: 320px){
  html{ font-size: 9px !important; }
  #guessesTable th{ font-size: 0.58rem !important; }
  #guessesTable td, .album-cell .album-text{ font-size: 0.68rem !important; }
  #guessInput, #guessBtn, #seeResultsBtn{ font-size: 0.72rem !important; }
}

/* Make sure album art never gets hidden on very narrow phones */
@media (max-width: 380px){
  td.album-cell img{ display:block !important; }
}

/* Optional: hide Streams on ultra-narrow phones to keep layout tidy */
@media (max-width: 340px){
  #guessesTable thead th:nth-child(6),
  #guessesTable tbody td:nth-child(6){ display: none; }
}