/* Gamedesign-Seite: Spiele in Entwicklung (großes Feature) + veröffentlichte Apps.
   Nutzt ausschließlich die Tokens aus neonpulse.css. */

.game {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
  padding: 32px;
  margin-top: 32px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-xl);
}
.game + .game { margin-top: 28px; }

.game__media { display: grid; gap: 12px; }
.game__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-lg);
  border: 1px solid var(--line-1);
}
.game__thumbs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.game__status {
  display: inline-block;
  padding: 5px 12px;
  border-radius: var(--r-full);
  font: var(--mono-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--neon-magenta);
  background: rgba(255, 45, 155, 0.12);
  border: 1px solid rgba(255, 45, 155, 0.35);
}
.game__status--live {
  color: var(--success);
  background: var(--success-fill);
  border-color: rgba(24, 240, 160, 0.35);
}

.game__title { font: var(--display-l); color: var(--fg-1); margin: 16px 0 6px; }
.game__meta {
  font: var(--mono-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fg-3);
  margin: 0 0 18px;
}
.game__desc { font: var(--body-lg); color: var(--fg-2); margin: 0 0 20px; }

.game__facts { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 10px; }
.game__facts li {
  position: relative;
  padding-left: 22px;
  font: var(--body);
  color: var(--fg-2);
}
.game__facts li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--neon-cyan);
  box-shadow: var(--glow-soft);
}
.game__facts strong { color: var(--fg-1); font-weight: 600; }
.game__platform { font: var(--body-sm); color: var(--fg-3); margin: 0; }

/* Veröffentlichte Apps: Screenshot hochkant + Text */
.releases { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 32px; }
.release {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 22px;
  padding: 22px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-xl);
}
.release__shot { width: 100%; height: auto; border-radius: var(--r-md); border: 1px solid var(--line-1); }
.release__head { display: flex; align-items: center; gap: 12px; margin: 14px 0 6px; }
.release__icon { width: 44px; height: 44px; border-radius: 10px; }
.release__title { font: 700 22px/1.2 var(--font-display); color: var(--fg-1); margin: 0; }
.release__desc { font: var(--body-sm); color: var(--fg-2); margin: 10px 0 16px; }
.release__link { font: 600 15px/1.3 var(--font-display); color: var(--neon-cyan); text-decoration: none; }
.release__link:hover, .release__link:focus-visible { text-decoration: underline; }

/* Veröffentlichung der Videos (Transparenz für TikTok-Nutzer) */
.publish {
  margin-top: 32px;
  padding: 32px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-xl);
}
.publish p { font: var(--body); color: var(--fg-2); margin: 0 0 16px; max-width: 72ch; }
.publish .game__facts { max-width: 72ch; }
.publish__links { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 8px; }
.publish__links a { font: 600 15px/1.3 var(--font-display); color: var(--neon-cyan); }

@media (max-width: 900px) {
  .game { grid-template-columns: 1fr; padding: 20px; gap: 24px; }
  .game__title { font: var(--display-m, 700 36px/1.1 var(--font-display)); }
  .releases { grid-template-columns: 1fr; }
  .publish { padding: 22px; }
}
@media (max-width: 480px) {
  .release { grid-template-columns: 1fr; }
  .release__shot { max-width: 220px; }
}