/* dreyer shared styles. Built on Unfold's color variables so light/dark mode follow the theme. */

:root {
  --gg-surface: var(--color-white);
  --gg-border: var(--color-base-200);
  --gg-text: var(--color-base-900);
  --gg-muted: var(--color-base-500);
  --gg-track: var(--color-base-200);
  --gg-radius: 10px;

  /* One accent per kind of media. */
  --gg-game: var(--color-primary-500);
  --gg-movie: var(--color-red-500);
  --gg-show: var(--color-blue-500);
  --gg-book: var(--color-orange-500);
  --gg-album: var(--color-green-500);
}

.dark {
  --gg-surface: var(--color-base-900);
  --gg-border: var(--color-base-800);
  --gg-text: var(--color-base-100);
  --gg-muted: var(--color-base-400);
  --gg-track: var(--color-base-800);
}

.gg-muted { color: var(--gg-muted); }

/* ---------- Progress bar ---------- */

.gg-progress { display: flex; flex-direction: column; gap: 4px; min-width: 120px; }
.gg-progress__row { display: flex; align-items: center; gap: 10px; }
.gg-progress__track {
  position: relative;
  flex: 1;
  height: 8px;
  border-radius: 999px;
  background: var(--gg-track);
  overflow: hidden;
}
.gg-progress__fill {
  position: relative;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--color-primary-400), var(--color-primary-600));
  box-shadow: 0 0 12px color-mix(in oklab, var(--color-primary-500) 55%, transparent);
  transition: width 0.6s cubic-bezier(.2, .8, .2, 1);
  overflow: hidden;
}
.gg-progress__fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / .35) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: gg-sheen 2.8s ease-in-out infinite;
}
.gg-progress--complete .gg-progress__fill {
  background: linear-gradient(90deg, var(--color-green-400), var(--color-green-600));
  box-shadow: 0 0 12px color-mix(in oklab, var(--color-green-500) 55%, transparent);
}
.gg-progress--complete .gg-progress__fill::after { animation: none; }
.gg-progress__label {
  min-width: 3.2em;
  text-align: right;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--gg-muted);
}
.gg-progress__caption { font-size: 11.5px; color: var(--gg-muted); font-variant-numeric: tabular-nums; }
.gg-progress--sm .gg-progress__track { height: 6px; }
.gg-progress--lg { max-width: 560px; }
.gg-progress--lg .gg-progress__track { height: 14px; }
.gg-progress--lg .gg-progress__label { font-size: 15px; color: var(--gg-text); }
.gg-progress--lg .gg-progress__caption { font-size: 13px; }

@keyframes gg-sheen {
  0%, 40% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
  .gg-progress__fill::after { animation: none; }
  .gg-progress__fill { transition: none; }
}

/* ---------- Score, critic and kind badges ---------- */

.gg-score {
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  padding: 2px 8px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.gg-score__max { font-size: 10px; font-weight: 500; opacity: .7; }
.gg-score--high { background: color-mix(in oklab, var(--color-green-500) 16%, transparent); color: var(--color-green-700); }
.gg-score--mid { background: color-mix(in oklab, var(--color-orange-500) 16%, transparent); color: var(--color-orange-700); }
.gg-score--low { background: color-mix(in oklab, var(--color-red-500) 16%, transparent); color: var(--color-red-700); }
.dark .gg-score--high { color: var(--color-green-400); }
.dark .gg-score--mid { color: var(--color-orange-400); }
.dark .gg-score--low { color: var(--color-red-400); }

.gg-meta {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 26px;
  border-radius: 5px;
  font-weight: 700;
  font-size: 12px;
  color: #fff;
}
.gg-meta--high { background: var(--color-green-600); }
.gg-meta--mid { background: var(--color-orange-500); }
.gg-meta--low { background: var(--color-red-600); }

.gg-kind {
  --gg-accent: var(--gg-game);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px 2px 6px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--gg-accent) 14%, transparent);
  color: color-mix(in oklab, var(--gg-accent) 80%, var(--gg-text));
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}
.gg-kind .material-symbols-outlined { font-size: 15px !important; }
.gg-kind--movie, .gg-kind-tile--movie { --gg-accent: var(--gg-movie); }
.gg-kind--show, .gg-kind-tile--show { --gg-accent: var(--gg-show); }
.gg-kind--book, .gg-kind-tile--book { --gg-accent: var(--gg-book); }
.gg-kind--album, .gg-kind-tile--album { --gg-accent: var(--gg-album); }

.gg-fav { color: var(--color-red-500); font-size: 18px !important; font-variation-settings: "FILL" 1; }

/* ---------- Cover art: any shape, fitted over a blurred copy of itself ---------- */

.gg-art {
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
  background: var(--gg-track);
  isolation: isolate;
}
.gg-art::before {
  content: "";
  position: absolute;
  inset: -16px;
  z-index: -1;
  background: var(--art) center / cover no-repeat;
  filter: blur(14px) saturate(1.4) brightness(.85);
}
.gg-art img { display: block; width: 100%; height: 100%; object-fit: contain; }
.gg-art--empty {
  background: linear-gradient(135deg, var(--gg-track), color-mix(in oklab, var(--color-primary-500) 20%, var(--gg-track)));
}
.gg-art--thumb { width: 72px; height: 44px; border-radius: 5px; }
.gg-art--thumb::before { filter: blur(6px) saturate(1.4) brightness(.85); }
.gg-art--card { width: 100%; aspect-ratio: 16 / 9; }
.gg-art--hero {
  width: 100%;
  max-width: 560px;
  aspect-ratio: 16 / 9;
  border-radius: var(--gg-radius);
  box-shadow: 0 12px 32px -12px rgb(0 0 0 / .45);
}

/* ---------- Dashboard ---------- */

.gg-dash { display: flex; flex-direction: column; gap: 32px; padding-bottom: 32px; }
.gg-dash h2, .gg-find h2 { font-size: 17px; font-weight: 650; color: var(--gg-text); }

.gg-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.gg-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-primary-600);
}
.dark .gg-link { color: var(--color-primary-400); }
.gg-link .material-symbols-outlined { font-size: 18px; }
.gg-link:hover { text-decoration: underline; }

.gg-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); gap: 14px; }
.gg-stat {
  position: relative;
  padding: 18px 20px;
  border: 1px solid var(--gg-border);
  border-radius: var(--gg-radius);
  background: var(--gg-surface);
  overflow: hidden;
}
.gg-stat__icon {
  position: absolute;
  right: 14px;
  top: 14px;
  font-size: 22px !important;
  color: var(--color-primary-500);
  opacity: .85;
}
.gg-stat__value { font-size: 30px; font-weight: 700; line-height: 1.1; color: var(--gg-text); font-variant-numeric: tabular-nums; }
.gg-stat__label { margin-top: 4px; font-size: 13px; color: var(--gg-muted); }

.gg-kinds { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 12px; margin-top: -16px; }
.gg-kind-tile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--gg-border);
  border-radius: var(--gg-radius);
  background: var(--gg-surface);
  transition: border-color .15s, transform .15s;
}
.gg-kind-tile:hover { border-color: var(--gg-accent, var(--gg-game)); transform: translateY(-1px); }
.gg-kind-tile__icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: color-mix(in oklab, var(--gg-accent, var(--gg-game)) 16%, transparent);
  color: var(--gg-accent, var(--gg-game));
}
.gg-kind-tile strong { display: block; color: var(--gg-text); font-weight: 600; }
.gg-kind-tile .gg-muted { font-size: 12px; }

.gg-now-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 16px; }
.gg-now-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--gg-border);
  border-radius: var(--gg-radius);
  background: var(--gg-surface);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.gg-now-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in oklab, var(--color-primary-500) 50%, var(--gg-border));
  box-shadow: 0 16px 32px -16px color-mix(in oklab, var(--color-primary-600) 60%, transparent);
}
.gg-now-card__fav {
  position: absolute;
  top: 10px;
  right: 10px;
  color: var(--color-red-500);
  font-variation-settings: "FILL" 1;
  filter: drop-shadow(0 1px 3px rgb(0 0 0 / .6));
}
.gg-now-card__body { display: flex; flex-direction: column; flex: 1; padding: 12px 16px 16px; }
.gg-now-card__meta { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 12px; }
.gg-now-card__body h3 { font-size: 16px; font-weight: 650; color: var(--gg-text); }
.gg-now-card__note {
  margin: 2px 0 12px;
  font-size: 13px;
  color: var(--gg-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gg-now-card .gg-progress { margin-top: auto; }

.gg-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 32px; }

.gg-list {
  border: 1px solid var(--gg-border);
  border-radius: var(--gg-radius);
  background: var(--gg-surface);
  overflow: hidden;
}
.gg-list li + li { border-top: 1px solid var(--gg-border); }
.gg-list__row { display: flex; align-items: center; gap: 14px; padding: 12px 16px; transition: background .15s; }
.gg-list__row:hover { background: color-mix(in oklab, var(--color-primary-500) 6%, transparent); }
.gg-list__icon { color: var(--gg-muted); }
.gg-list__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gg-list__main strong { color: var(--gg-text); font-weight: 600; }
.gg-list__main .gg-muted { font-size: 12.5px; }
.gg-list__excerpt { margin-top: 4px; font-size: 13px; color: var(--gg-muted); }

.gg-mood {
  flex-shrink: 0;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.gg-mood--loving { background: color-mix(in oklab, var(--color-green-500) 16%, transparent); color: var(--color-green-600); }
.gg-mood--enjoying { background: color-mix(in oklab, var(--color-primary-500) 16%, transparent); color: var(--color-primary-600); }
.gg-mood--mixed { background: color-mix(in oklab, var(--color-blue-500) 16%, transparent); color: var(--color-blue-600); }
.gg-mood--frustrated { background: color-mix(in oklab, var(--color-orange-500) 16%, transparent); color: var(--color-orange-600); }
.gg-mood--bored { background: color-mix(in oklab, var(--color-red-500) 16%, transparent); color: var(--color-red-600); }
.dark .gg-mood--loving { color: var(--color-green-400); }
.dark .gg-mood--enjoying { color: var(--color-primary-400); }
.dark .gg-mood--mixed { color: var(--color-blue-400); }
.dark .gg-mood--frustrated { color: var(--color-orange-400); }
.dark .gg-mood--bored { color: var(--color-red-400); }

.gg-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 36px 20px;
  border: 1px dashed var(--gg-border);
  border-radius: var(--gg-radius);
  text-align: center;
  color: var(--gg-muted);
}
.gg-empty .material-symbols-outlined { font-size: 36px; color: var(--color-primary-500); }
.gg-empty a { color: var(--color-primary-600); font-weight: 500; }
.dark .gg-empty a { color: var(--color-primary-400); }
.gg-empty--small { padding: 20px; font-size: 13px; }

/* ---------- Find & add ---------- */

.gg-find { display: flex; flex-direction: column; gap: 4px; padding-bottom: 32px; }

.gg-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.gg-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px 7px 10px;
  border: 1px solid var(--gg-border);
  border-radius: 999px;
  background: var(--gg-surface);
  color: var(--gg-muted);
  font-size: 13.5px;
  font-weight: 500;
  transition: color .15s, border-color .15s, background .15s;
}
.gg-tab .material-symbols-outlined { font-size: 19px; }
.gg-tab:hover { color: var(--gg-text); border-color: var(--color-base-300); }
.gg-tab--active,
.gg-tab--active:hover {
  border-color: var(--color-primary-500);
  background: color-mix(in oklab, var(--color-primary-500) 12%, var(--gg-surface));
  color: var(--color-primary-600);
}
.dark .gg-tab--active { color: var(--color-primary-300); }

.gg-search {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 640px;
  margin-bottom: 20px;
  padding: 6px 6px 6px 14px;
  border: 1px solid var(--gg-border);
  border-radius: 999px;
  background: var(--gg-surface);
  transition: border-color .15s, box-shadow .15s;
}
.gg-search:focus-within {
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--color-primary-500) 18%, transparent);
}
.gg-search .material-symbols-outlined { color: var(--gg-muted); }
.gg-search input,
.gg-search input:focus {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--gg-text);
  font-size: 15px;
  outline: none !important;
  box-shadow: none !important;
}

.gg-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 7px 16px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--color-primary-600);
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.gg-button:hover { background: var(--color-primary-700); }
.gg-button .material-symbols-outlined { font-size: 18px; color: inherit; }
.gg-button--ghost { background: transparent; border-color: var(--gg-border); color: var(--gg-muted); }
.gg-button--ghost:hover { background: var(--gg-track); color: var(--gg-text); }

.gg-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: 16px; }
.gg-result {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--gg-border);
  border-radius: var(--gg-radius);
  background: var(--gg-surface);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.gg-result:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -16px rgb(0 0 0 / .45); }
.gg-result__body { flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; }
.gg-result__body h3 { font-size: 15px; font-weight: 650; color: var(--gg-text); }
.gg-result__subtitle { font-size: 13px; color: var(--gg-text); opacity: .85; }
.gg-result__detail {
  font-size: 12.5px;
  color: var(--gg-muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gg-result form { margin-top: auto; padding-top: 10px; }
.gg-result .gg-button { width: 100%; }
.gg-credit { margin-top: 20px; font-size: 12px; }
.gg-credit a { text-decoration: underline; }

.gg-alert {
  padding: 12px 16px;
  border-radius: var(--gg-radius);
  background: color-mix(in oklab, var(--color-red-500) 12%, transparent);
  color: var(--color-red-700);
  font-size: 14px;
}
.dark .gg-alert { color: var(--color-red-400); }