:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --card: 0 0% 100%;
  --muted: 210 40% 96.1%;
  --muted-foreground: 215.4 16.3% 46.9%;
  --primary: 262 83% 58%;
  --primary-foreground: 210 40% 98%;
  --accent: 210 40% 96.1%;
  --border: 214.3 31.8% 91.4%;
  --destructive: 0 84.2% 60.2%;
}

.dark {
  --background: 222.2 84% 4.9%;
  --foreground: 210 40% 98%;
  --card: 222.2 84% 7%;
  --muted: 217.2 32.6% 17.5%;
  --muted-foreground: 215 20.2% 65.1%;
  --primary: 263 70% 58%;
  --primary-foreground: 210 40% 98%;
  --accent: 217.2 32.6% 17.5%;
  --border: 217.2 32.6% 17.5%;
  --destructive: 0 62.8% 30.6%;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-width: 320px;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

img { max-width: 100%; }

/* The desktop search control is absolutely positioned, so center it against
   the 40px input instead of relying on its inline static position. */
.site-search-submit {
  top: 50%;
  transform: translateY(-50%);
}

/* The card link sits under the tag links. Images must not intercept its tap. */
.resource-card-media > img,
.resource-card-media > .resource-card-placeholder { pointer-events: none; }

/* A tag keeps the same color everywhere by receiving a deterministic hue from
   the server. Variants preserve contrast on cards, images and dark mode. */
.game-tag {
  border-color: hsl(var(--tag-hue) 72% 45% / 0.34);
  background-color: hsl(var(--tag-hue) 76% 48% / 0.11);
  color: hsl(var(--tag-hue) 66% 35%);
}
.game-tag:hover,
.game-tag--selected {
  border-color: hsl(var(--tag-hue) 74% 45% / 0.55);
  background-color: hsl(var(--tag-hue) 78% 48% / 0.18);
  color: hsl(var(--tag-hue) 70% 31%);
}
.game-tag--overlay {
  border-color: hsl(var(--tag-hue) 92% 82% / 0.7);
  background-color: hsl(var(--tag-hue) 76% 45% / 0.84);
  color: white;
  text-shadow: 0 1px 1px rgb(0 0 0 / 0.22);
}
.game-tag--overlay:hover {
  border-color: hsl(var(--tag-hue) 95% 88% / 0.9);
  background-color: hsl(var(--tag-hue) 80% 40% / 0.94);
  color: white;
}
.game-tag-text { color: hsl(var(--tag-hue) 64% 37%); }
.game-tag-text:hover { color: hsl(var(--tag-hue) 72% 29%); }
.dark .game-tag {
  border-color: hsl(var(--tag-hue) 72% 63% / 0.38);
  background-color: hsl(var(--tag-hue) 70% 52% / 0.17);
  color: hsl(var(--tag-hue) 82% 75%);
}
.dark .game-tag-text { color: hsl(var(--tag-hue) 78% 72%); }

.image-fallback {
  display: flex;
  min-height: 42px;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  border: 1px solid hsl(var(--border) / 0.5);
  border-radius: inherit;
  background: hsl(var(--muted) / 0.65);
  color: hsl(var(--muted-foreground));
  font-size: 12px;
  line-height: 1.35;
  overflow: hidden;
  text-align: center;
  padding: 8px;
}

/* Match the reference detail-page canvas: roomy on wide screens without forcing
   a fixed oversized gutter that makes the main content too narrow. */
.detail-page-shell { max-width: 1840px; }
.detail-layout { display: flex; flex-direction: column; gap: 1rem; }
.detail-main, .detail-resource, .detail-comments, .detail-download { min-width: 0; }
#screenshots-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.detail-download { display: flex; flex-direction: column; gap: 0.75rem; }
.detail-sidebar-panel {
  border: 1px solid hsl(var(--border) / 0.6);
  border-radius: 0.5rem;
  background: hsl(var(--card) / 0.8);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
  padding: 1rem;
}
.detail-sidebar-heading {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-bottom: 0.625rem;
  color: hsl(var(--foreground));
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.25rem;
}
.detail-sidebar-heading svg { flex: 0 0 auto; color: hsl(var(--primary)); }
.detail-latest-list { display: flex; flex-direction: column; gap: 0.375rem; }
.detail-latest-item { display: flex; align-items: flex-start; gap: 0.5rem; min-width: 0; }
.detail-latest-rank {
  display: flex;
  width: 1rem;
  height: 1rem;
  flex: 0 0 1rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.125rem;
  background: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1;
}
.detail-latest-rank.is-top,
.detail-popular-rank.is-top { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.detail-latest-title {
  min-width: 0;
  overflow: hidden;
  color: hsl(var(--foreground));
  font-size: 0.75rem;
  line-height: 1rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 0.15s ease;
}
.detail-latest-item:hover .detail-latest-title,
.detail-popular-item:hover .detail-popular-title { color: hsl(var(--primary)); }
.detail-popular-list { display: flex; flex-direction: column; gap: 0.75rem; }
.detail-popular-item { display: flex; gap: 0.625rem; min-width: 0; }
.detail-popular-cover {
  position: relative;
  width: 7rem;
  height: 3.9375rem;
  flex: 0 0 7rem;
  overflow: hidden;
  border-radius: 0.375rem;
  background: hsl(var(--muted));
}
.detail-popular-cover > img,
.detail-random-card > img { width: 100%; height: 100%; object-fit: cover; }
.detail-popular-rank {
  position: absolute;
  left: 0.25rem;
  top: 0.25rem;
  border-radius: 0.25rem;
  background: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
  padding: 0.125rem 0.375rem;
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1rem;
}
.detail-popular-copy { display: flex; min-width: 0; flex: 1 1 auto; flex-direction: column; padding: 0.125rem 0; }
.detail-popular-title {
  display: -webkit-box;
  overflow: hidden;
  color: hsl(var(--foreground));
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.25rem;
  transition: color 0.15s ease;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.detail-popular-meta { margin-top: 0.25rem; color: hsl(var(--muted-foreground)); font-size: 0.6875rem; line-height: 1rem; }
.detail-random-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.detail-random-card {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 0.5rem;
  background: hsl(var(--muted));
}
.detail-random-card > img { transition: transform 0.3s ease; }
.detail-random-card:hover > img { transform: scale(1.05); }
.detail-random-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgb(0 0 0 / 0.9), rgb(0 0 0 / 0.4), rgb(0 0 0 / 0.1)); }
.detail-random-title {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  padding: 0.5rem;
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1rem;
  text-overflow: ellipsis;
  text-shadow: 0 1px 3px rgb(0 0 0 / 0.6);
  white-space: nowrap;
}
.detail-sidebar-image-placeholder {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, hsl(var(--primary) / 0.22), hsl(var(--muted)));
  color: hsl(var(--muted-foreground));
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
}

@media (min-width: 1024px) {
  .detail-layout { flex-direction: row; align-items: flex-start; gap: 1.875rem; }
  .detail-main { flex: 1 1 0%; }
  .detail-resource { margin-bottom: 1rem; }
  .detail-download { flex: 0 0 25rem; width: 25rem; }
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: hsl(var(--muted-foreground) / 0.2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: hsl(var(--muted-foreground) / 0.4); }

/* Theme toggle icons */
.dark .sun-icon { display: none; }
.dark .moon-icon { display: block !important; }

/* Line clamp utilities */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Prose */
.prose { max-width: none; }
.prose p { margin-bottom: 0.75em; }
.prose, .prose code, .prose pre, main code, main li { overflow-wrap: anywhere; word-break: break-word; }

@media (max-width: 639px) {
  #comment-form button[type="submit"] { width: 100%; }
  .mobile-search-open main { padding-top: 7.5rem !important; }
  header [class*="backdrop-blur"] { background-color: hsl(var(--background) / 0.96); }
  .image-fallback { min-height: 72px; }
  .detail-download .sticky { position: static; }
}

@media (max-width: 430px) {
  .resource-card-media { min-height: 116px; }
  #screenshots-gallery { gap: 0.375rem; }
  .detail-popular-cover { width: 6rem; height: 3.375rem; flex-basis: 6rem; }
}

/* Backdrop blur support */
@supports (backdrop-filter: blur(1px)) {
  .backdrop-blur-md { backdrop-filter: blur(12px); }
  .backdrop-blur-xl { backdrop-filter: blur(24px); }
  .backdrop-blur-sm { backdrop-filter: blur(8px); }
}