/* HandyCafe game catalog page — sits on top of landing.css + features-showcase.css.
   The game wall, shelves, client chips and account pool are drawn in CSS rather
   than shipped as screenshots, so they stay legible in both themes and at every
   width without a second set of images to keep current. */

/* Hero: the player-facing game wall */
.hc-game-wall {
  border: 1px solid var(--hc-line);
  border-radius: var(--hc-radius);
  background: linear-gradient(160deg, #0c1524, #080e18);
  box-shadow: 0 34px 90px rgba(2, 6, 15, .5);
  overflow: hidden;
}
/* Four across keeps the poster ratio honest without the wall growing taller
   than the hero copy beside it. The second row is faded at the bottom edge so
   the wall reads as a shelf that continues, which is what the app does. */
.hc-game-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 13px;
  padding: 18px;
  mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
}
.hc-game-card { display: flex; flex-direction: column; gap: 8px; }
.hc-game-poster {
  position: relative;
  aspect-ratio: 2 / 3;
  border: 1px solid var(--hc-line);
  border-radius: 12px;
  background: linear-gradient(150deg, rgba(45, 212, 191, .22), rgba(139, 92, 246, .16));
  overflow: hidden;
}
.hc-game-poster::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 40% at 30% 22%, rgba(255, 255, 255, .16), transparent 70%),
    linear-gradient(to top, rgba(3, 7, 13, .58), transparent 55%);
}
.hc-game-card-2 .hc-game-poster { background: linear-gradient(150deg, rgba(251, 191, 36, .22), rgba(239, 68, 68, .16)); }
.hc-game-card-3 .hc-game-poster { background: linear-gradient(150deg, rgba(96, 165, 250, .24), rgba(45, 212, 191, .14)); }
.hc-game-card-4 .hc-game-poster { background: linear-gradient(150deg, rgba(167, 139, 250, .24), rgba(59, 130, 246, .14)); }
.hc-game-card-5 .hc-game-poster { background: linear-gradient(150deg, rgba(52, 211, 153, .22), rgba(14, 165, 233, .14)); }
.hc-game-card-6 .hc-game-poster { background: linear-gradient(150deg, rgba(244, 114, 182, .2), rgba(139, 92, 246, .16)); }
.hc-game-card-7 .hc-game-poster { background: linear-gradient(150deg, rgba(251, 146, 60, .2), rgba(217, 70, 239, .14)); }
.hc-game-card-8 .hc-game-poster { background: linear-gradient(150deg, rgba(148, 163, 184, .24), rgba(45, 212, 191, .12)); }
.hc-game-flag {
  position: absolute;
  z-index: 1;
  inset-inline-start: 8px;
  top: 8px;
  padding: 3px 7px;
  border-radius: 6px;
  font: 500 8px/1.4 'IBM Plex Mono', ui-monospace, monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.hc-game-flag-depot { background: rgba(45, 212, 191, .9); color: #04231f; }
.hc-game-flag-queue { background: rgba(251, 191, 36, .92); color: #2a1c02; }
.hc-game-card strong { font-size: 12px; font-weight: 600; letter-spacing: -.01em; color: var(--hc-text); }
.hc-game-meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.hc-game-meta span { color: var(--hc-muted); font-size: 10px; }
.hc-game-meta b { color: var(--hc-teal); font: 500 10px/1 'IBM Plex Mono', ui-monospace, monospace; }

/* Building the list */
.hc-game-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  border: 1px solid var(--hc-line);
  border-radius: 20px;
  overflow: hidden;
  background: var(--hc-line);
}
.hc-game-steps article { padding: 30px 26px 32px; background: #080e18; }
.hc-game-step-index {
  display: inline-block;
  margin-bottom: 32px;
  color: var(--hc-teal);
  font: 500 11px/1 'IBM Plex Mono', ui-monospace, monospace;
  letter-spacing: .14em;
}
.hc-game-steps h3 { font-size: 18px; letter-spacing: -.02em; }
.hc-game-steps p { margin-top: 10px; color: var(--hc-muted); font-size: 13px; line-height: 1.65; }

.hc-landing .hc-game-note { margin-top: 24px; color: #718196; font-size: 12px; line-height: 1.6; max-width: 58ch; }

/* Discovery shelves */
.hc-game-shelf {
  padding: 26px;
  border: 1px solid var(--hc-line);
  border-radius: var(--hc-radius);
  background: linear-gradient(160deg, #0c1524, #080e18);
}
.hc-game-shelf-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.hc-game-shelf-chips span {
  padding: 7px 13px;
  border: 1px solid var(--hc-line);
  border-radius: 99px;
  color: var(--hc-muted);
  font-size: 11px;
}
.hc-game-shelf-chips span.is-active { border-color: rgba(45, 212, 191, .45); background: rgba(45, 212, 191, .08); color: var(--hc-teal); }
.hc-game-shelf-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 10px; }
.hc-game-shelf-tile {
  display: block;
  aspect-ratio: 2 / 3;
  border: 1px solid var(--hc-line);
  border-radius: 9px;
  background: linear-gradient(150deg, rgba(45, 212, 191, .2), rgba(139, 92, 246, .12));
}
.hc-game-shelf-tile-2 { background: linear-gradient(150deg, rgba(251, 191, 36, .2), rgba(239, 68, 68, .12)); }
.hc-game-shelf-tile-3 { background: linear-gradient(150deg, rgba(96, 165, 250, .22), rgba(45, 212, 191, .12)); }
.hc-game-shelf-tile-4 { background: linear-gradient(150deg, rgba(167, 139, 250, .22), rgba(59, 130, 246, .12)); }
.hc-game-shelf-tile-5 { background: linear-gradient(150deg, rgba(52, 211, 153, .2), rgba(14, 165, 233, .12)); }

/* Metadata grid: single-line cards, no body copy */
.hc-gaming .hc-outcome-card strong { font-size: 15px; }

/* Deployment */
.hc-game-deploy-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.hc-game-clients { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 24px; }
.hc-game-client {
  padding: 6px 11px;
  border: 1px solid var(--hc-line);
  border-radius: 8px;
  color: var(--hc-muted);
  font: 500 10px/1.3 'IBM Plex Mono', ui-monospace, monospace;
}
.hc-game-client-ok { border-color: rgba(45, 212, 191, .4); background: rgba(45, 212, 191, .07); color: var(--hc-teal); }
.hc-game-client-busy { border-color: rgba(251, 191, 36, .4); background: rgba(251, 191, 36, .07); color: #fbbf24; }
.hc-game-client-off { opacity: .45; }
.hc-game-depot { display: grid; gap: 10px; margin-top: 26px; }
.hc-game-depot-bar { height: 8px; border-radius: 4px; background: rgba(148, 163, 184, .16); overflow: hidden; }
.hc-game-depot-bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--hc-teal-deep), var(--hc-teal)); }

/* Shared account pool */
.hc-game-pool {
  display: grid;
  gap: 8px;
  padding: 26px;
  border: 1px solid var(--hc-line);
  border-radius: var(--hc-radius);
  background: linear-gradient(160deg, #0c1524, #080e18);
}
.hc-game-pool-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--hc-line);
  border-radius: 12px;
  background: rgba(3, 7, 13, .42);
  font: 500 12px/1 'IBM Plex Mono', ui-monospace, monospace;
}
.hc-game-pool-row span { color: var(--hc-muted); }
.hc-game-pool-busy b { color: #fbbf24; }
.hc-game-pool-free { border-color: rgba(45, 212, 191, .32); }
.hc-game-pool-free b { color: var(--hc-teal); }

/* Player screen */
.hc-game-player-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 44px; align-items: start; }
.hc-game-player-list { display: grid; gap: 0; border-top: 1px solid var(--hc-line); }
.hc-game-player-list article { padding: 22px 0; border-bottom: 1px solid var(--hc-line); }
.hc-game-player-list h3 { font-size: 16px; letter-spacing: -.02em; }
.hc-game-player-list p { margin-top: 8px; color: var(--hc-muted); font-size: 13px; line-height: 1.65; }

/* Light theme */
html:not(.dark) .hc-game-wall,
html:not(.dark) .hc-game-shelf,
html:not(.dark) .hc-game-pool { background: linear-gradient(160deg, #fff, #f2f6f9); box-shadow: 0 24px 60px rgba(15, 23, 42, .07); }
/* The dark scrim under each poster reads as grey wash on a light page, so the
   light theme drops it and lets the artwork tint carry the card instead. */
html:not(.dark) .hc-game-poster::after,
html:not(.dark) .hc-game-shelf-tile::after { background: radial-gradient(60% 40% at 30% 22%, rgba(255, 255, 255, .5), transparent 70%); }
html:not(.dark) .hc-game-poster,
html:not(.dark) .hc-game-shelf-tile { filter: saturate(1.5) contrast(1.05); border-color: rgba(15, 23, 42, .1); }
html:not(.dark) .hc-game-card strong { color: #172033; }
html:not(.dark) .hc-game-meta span { color: #64748b; }
html:not(.dark) .hc-game-steps article { background: #fff; }
html:not(.dark) .hc-game-steps p { color: #536276; }
html:not(.dark) .hc-game-shelf-chips span { color: #64748b; border-color: rgba(15, 23, 42, .12); }
/* Acik mod override (0,2,2) .is-active kuralindan (0,2,1) daha guclu geliyor,
   aktif raf cipinin secili hali gorunmez oluyordu. */
html:not(.dark) .hc-game-shelf-chips span.is-active { color: #0f766e; border-color: rgba(13, 148, 136, .4); }
html:not(.dark) .hc-game-depot-bar { background: rgba(15, 23, 42, .09); }
html:not(.dark) .hc-game-pool-row { background: rgba(255, 255, 255, .82); border-color: rgba(15, 23, 42, .1); }
html:not(.dark) .hc-game-pool-row span { color: #64748b; }
html:not(.dark) .hc-game-client { color: #64748b; border-color: rgba(15, 23, 42, .12); }
html:not(.dark) .hc-game-player-list p { color: #536276; }

@media (max-width: 980px) {
  .hc-game-steps { grid-template-columns: 1fr 1fr; }
  .hc-game-deploy-grid { grid-template-columns: 1fr; }
  .hc-game-player-grid { grid-template-columns: 1fr; gap: 34px; }
}
@media (max-width: 700px) {
  .hc-game-steps { grid-template-columns: 1fr; }
  .hc-game-grid { grid-template-columns: repeat(3, 1fr); }
  .hc-game-card-7,
  .hc-game-card-8 { display: none; }
  .hc-game-shelf-row { grid-template-columns: repeat(4, 1fr); }
  .hc-game-shelf-tile-5 { display: none; }
}

/* Acik mod kontrast duzeltmesi: kehribar #fbbf24 beyaz uzerinde 1.67:1 kaliyordu,
   #b45309 ile 4.9:1'e cikti. Kucuk gri notlar #536276 ile 4.5:1 uzerinde. */
html:not(.dark) .hc-landing .hc-game-note { color: #536276; }
html:not(.dark) .hc-game-client-busy { color: #b45309; border-color: rgba(180, 83, 9, .38); background: rgba(180, 83, 9, .07); }
html:not(.dark) .hc-game-pool-busy b { color: #b45309; }

/* 320px ekranda uc sutun kart basina 75px birakiyordu: baslik iki satira
   sariyor, tur adi ile puan yan yana sigmayip cakisiyordu. */
@media (max-width: 480px) {
  .hc-game-grid { grid-template-columns: repeat(2, 1fr); }
  .hc-game-card:nth-child(n+5) { display: none; }
  .hc-game-meta { flex-direction: column; align-items: flex-start; gap: 2px; }
}