/* Game pages: big cards with a song list and player under each picture.
   Each game sets its own colors at the bottom of this file. */

.player-page {
  --accent: #e9c873;
  --accent-hover: #f3d88f;
  --on-accent: #1a140a;
  --panel: #0e1613;
  --line: #1f2b25;
  --hover: #16211c;
  --track-bg: #2a3630;
  --subtle: #d6e2d8;
  --frame: #000;
  background: var(--bg);
}

.player-page nav,
.player-page main { max-width: 1680px; }

.player-page main { padding: 12px 32px 64px; }

.player-page .page-head { margin-bottom: 36px; }

.player-page .page-head h1 {
  font-size: clamp(1.8rem, 3.6vw, 3rem);
  text-wrap: balance;
  color: var(--accent);
}

.player-page .page-head p { font-size: 17px; color: var(--subtle); }

.fav-key {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -16px 0 14px;
  font-size: 15px;
  color: var(--subtle);
}

.fav-key .heart { display: block; width: 18px; height: 18px; }

/* ---------- Cards: 4 per row, centered when a game has fewer ---------- */

.player-page .cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 28px;
}

.player-page .card { flex: 0 1 calc((100% - 3 * 28px) / 4); }

@media (max-width: 1200px) {
  .player-page .card { flex-basis: calc((100% - 28px) / 2); }
}

@media (max-width: 640px) {
  .player-page main { padding: 8px 16px 48px; }
  .player-page .card { flex-basis: 100%; }
}

/* ---------- Card ---------- */

.player-page .card {
  gap: 0;
  overflow: hidden;
  background: var(--panel);
  border: 4px solid var(--frame);
}

.player-page .card.playing { border-color: var(--accent); }

.art {
  position: relative;
  display: block;
  aspect-ratio: 4 / 4.2;
  overflow: hidden;
}

.player-page .art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: 0;
  border-radius: 0;
  transform: none;
}

.art h2 {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 12px;
  z-index: 1;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
  /* dark outline so the title stays readable on bright pictures */
  text-shadow: 0 0 2px #000, 0 1px 3px #000, 0 2px 8px rgba(0, 0, 0, 0.7);
}

/* ---------- Song list ---------- */

.tracks { list-style: none; border-top: 1px solid var(--line); }

.tracks button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 12px 18px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 15px;
  text-align: left;
  cursor: pointer;
}

.tracks button:hover { background: var(--hover); color: var(--text); }

.tracks button:focus-visible,
.play:focus-visible,
.bar:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.tracks .heart { flex: none; width: 16px; height: 16px; }

.tracks button.current { color: var(--accent); font-weight: 600; }

/* ---------- Player ---------- */

.player {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: auto;
  padding: 16px 18px 18px;
}

.play {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  cursor: pointer;
}

.play:hover { background: var(--accent-hover); }

.play svg { width: 20px; height: 20px; fill: currentColor; }
.play .i-pause { display: none; }
.card.playing .play .i-play { display: none; }
.card.playing .play .i-pause { display: block; }

.progress { flex: 1; min-width: 0; }

.bar {
  position: relative;
  height: 5px;
  background: var(--track-bg);
  cursor: pointer;
}

/* bigger area to click on */
.bar::before { content: ''; position: absolute; inset: -8px 0; }

.fill { height: 100%; width: 0; background: var(--accent); }

.times {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.times .status { color: var(--accent); text-align: center; flex: 1; padding: 0 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* ---------- Collection page: game covers, 5 per row ---------- */

.collection .card { flex-basis: calc((100% - 4 * 28px) / 5); text-decoration: none; }

@media (max-width: 1200px) {
  .collection .card { flex-basis: calc((100% - 2 * 28px) / 3); }
}

@media (max-width: 640px) {
  .collection .card { flex-basis: 100%; }
}

/* Wide logos: show the whole picture instead of cropping it */
.player-page .art img.fit { object-fit: contain; background: #000; }

.game-name {
  padding: 14px 18px;
  border-top: 1px solid var(--line);
  color: var(--text);
  font-size: 17px;
  font-weight: 600;
}

.collection .card:hover,
.collection .card:focus-visible { border-color: var(--accent); outline: none; }

.collection .card:hover .game-name,
.collection .card:focus-visible .game-name { color: var(--accent); }

/* ---------- Colors for each game ---------- */

.player-page.collection {
  --bg: #23262f;
  --accent: #8fe3e8;
  --panel: #16181f;
  --line: #2c303b;
  --subtle: #d4d8e2;
}

.player-page.zelda {
  --bg: #1c3b25;
}

.player-page.mario {
  --bg: #1a2147;
  --accent: #ff7272;
  --accent-hover: #ff9494;
  --on-accent: #2a0d0d;
  --panel: #0f1430;
  --line: #222a52;
  --hover: #171e42;
  --track-bg: #2a3260;
  --subtle: #d4d9f0;
}

.player-page.mc {
  --bg: #233024;
  --accent: #8fd65a;
  --accent-hover: #a8e57a;
  --on-accent: #142010;
  --panel: #111811;
  --line: #222e22;
  --hover: #18221a;
  --track-bg: #2c3a2c;
  --subtle: #d4e2d0;
}

.player-page.hk {
  --bg: #161b27;
  --accent: #d8e1ff;
  --accent-hover: #ffffff;
  --on-accent: #10131c;
  --panel: #0b0e15;
  --line: #1e2433;
  --hover: #131826;
  --track-bg: #252c3d;
  --subtle: #c9d0e3;
}

.player-page.ut {
  --bg: #000;
  --accent: #ffd800;
  --accent-hover: #ffe44d;
  --on-accent: #000;
  --panel: #000;
  --line: #333;
  --hover: #151515;
  --track-bg: #333;
  --subtle: #ddd;
  --frame: #fff;
}

/* Fill the empty space around a wide logo with a blurred copy of the same picture */
.art:has(img.fit)::before {
  content: '';
  position: absolute;
  inset: -20px;
  background: var(--art) center / cover;
  filter: blur(14px) brightness(0.6);
}

.player-page .art img.fit { position: relative; background: transparent; }

/* Home and Collection share white titles; teal stays for small highlights */
.player-page.collection .page-head h1 { color: var(--text); }

/* Toad pointing at the games with a speech bubble */
.toad-tip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 16px;
}

.toad-tip img { width: 78px; height: auto; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5)); }

.player-page .page-head .bubble {
  position: relative;
  margin: 0;
  padding: 10px 18px;
  border-radius: 14px;
  background: #fff;
  color: #1a1c24;
  font-size: 16px;
  font-weight: 600;
}

.player-page .page-head .bubble p { margin: 0; font-size: inherit; color: inherit; }

/* "= My favorites!" note inside Toad's bubble */
.player-page .page-head .bubble .fav-key { margin-top: 6px; font-size: 14px; color: #4a4d5a; }

/* little tail pointing back at Toad */
.bubble::before {
  content: '';
  position: absolute;
  left: -9px;
  top: 50%;
  margin-top: -9px;
  border: 9px solid transparent;
  border-left: 0;
  border-right-color: #fff;
}

/* ---------- Blog: comments people left ---------- */

.comments {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 640px;
  margin: 0 auto;
}

.comment {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 20px;
  background: var(--panel);
  border: 4px solid var(--frame);
  border-radius: 6px;
}

.avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--c);
  color: #111;
  font-weight: 700;
  font-size: 18px;
}

.comment .who { font-size: 14px; font-weight: 600; color: var(--muted); }
.comment .said { margin-top: 4px; font-size: 18px; color: var(--text); }

/* ---------- YouTube songs: the player is invisible, only the sound plays ---------- */

.yt-frame {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: -1;
  width: 200px;
  height: 200px;
  opacity: 0;
  pointer-events: none;
}

.yt-frame p { display: none; }

.yt-frame iframe { display: block; width: 100%; height: 100%; border: 0; }

/* ---------- Seek bar: round handle you can drag ---------- */

.bar { touch-action: none; }

.fill { position: relative; }

.fill::after {
  content: '';
  position: absolute;
  right: -7px;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--panel);
  opacity: 0;
  transition: opacity 0.15s;
}

.card.playing .fill::after,
.bar:hover .fill::after,
.bar:active .fill::after { opacity: 1; }

/* Genshin Impact: sky teal, like the Anemo color */
.player-page.genshin {
  --bg: #14262c;
  --accent: #6fdcc8;
  --accent-hover: #93e8d8;
  --on-accent: #0b1f1b;
  --panel: #0c1a1e;
  --line: #1d3238;
  --hover: #13252a;
  --track-bg: #234047;
  --subtle: #cfe4e4;
}

/* Collection: 4 games per row (the last row is centered); smaller screens get 3, then 2 per row */
.player-page.collection main { max-width: 1600px; }
.collection .cards { gap: 44px; }
.collection .card { flex-basis: calc((100% - 3 * 44px) / 4); }

@media (max-width: 1000px) {
  .collection .cards { gap: 28px; }
  .collection .card { flex-basis: calc((100% - 2 * 28px) / 3); }
}

@media (max-width: 760px) {
  .collection .card { flex-basis: calc((100% - 28px) / 2); }
}

/* Heart next to a favorite game's name on the Collection page */
.game-name { display: flex; align-items: center; gap: 8px; }
.game-name .hearts { display: inline-flex; flex: none; gap: 2px; }
.game-name .heart { flex: none; width: 18px; height: 18px; }

/* phones: smaller hearts and padding so three hearts still fit on a narrow card */
@media (max-width: 600px) {
  .game-name { padding: 12px 12px; gap: 6px; }
  .game-name .heart { width: 13px; height: 13px; }
}

/* Several hearts and a little note after a song name */
.tracks .hearts { display: inline-flex; gap: 2px; }
.song-note { margin-left: 2px; font-size: 13px; font-weight: 700; color: var(--accent); }

/* Collection: each game's name strip uses the same color as that game's page */
.collection .card .game-name { background: var(--game, var(--panel)); border-top-color: rgba(255, 255, 255, 0.08); }
.collection .card[href="Minecraft.html"]    { --game: #233024; }
.collection .card[href="Genshin.html"]      { --game: #14262c; }
.collection .card[href="BOTW.html"]         { --game: #1c3b25; }
.collection .card[href="Mario.html"]        { --game: #1a2147; }
.collection .card[href="HollowKnight.html"] { --game: #161b27; }
.collection .card[href="Undertale.html"]    { --game: #000; }