/* /jatekok: a Játékgyűjtemény. Telefonon egy oszlop, gépen kártyarács. */
.jk-lead { max-width: 40em; margin: 8px 0 22px; }
.jk-list { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .jk-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .jk-list { grid-template-columns: repeat(3, 1fr); } }

.jk-card { display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); background: var(--night2); }
.jk-shot { position: relative; display: block; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; padding: 0; border: 0; cursor: pointer; background: #2a1f55; color: inherit; }
.jk-shot img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }
.jk-shot:hover img { transform: scale(1.03); }
.jk-shot .jk-blur { position: absolute; inset: 0; filter: blur(18px) brightness(.6); transform: scale(1.2); }
.jk-shot:hover .jk-blur { transform: scale(1.2); }
.jk-shot .jk-fg { position: relative; width: auto; margin: 0 auto; object-fit: contain; }
.jk-ph { display: grid; place-items: center; width: 100%; height: 100%; font: 700 4rem var(--serif); color: rgba(255, 255, 255, .85); }
.jk-tr { position: absolute; left: 12px; bottom: 12px; padding: 5px 12px; border-radius: 999px; background: rgba(10, 6, 30, .72); color: var(--ink); font: 800 .82rem var(--sans); }

.jk-body { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; flex: 1; }
.jk-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.jk-badges:empty { display: none; }
.jk-body h2 { font-size: 1.3rem; }
.jk-ver { font: 700 .78rem var(--sans); color: var(--mute); vertical-align: middle; letter-spacing: .02em; }
.jk-pitch { margin: 0; color: var(--ink2); }
.jk-from { margin: 0; }
.jk-act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: auto; padding-top: 8px; }
.jk-act .btn:first-child { flex: 1 1 auto; min-height: 44px; padding: 0 18px; }
.jk-old { font-size: .88rem; color: var(--mute); }
.jk-old summary { cursor: pointer; padding: 6px 0; }
.jk-old ul { margin: 2px 0 0; padding-left: 18px; }
.jk-old li { margin: 2px 0; }
.jk-foot { margin-top: 28px; text-align: center; }

.jk-modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; background: rgba(8, 4, 24, .86); }
.jk-modal > div { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 100%; }
.jk-modal video { display: block; max-width: min(100%, 960px); max-height: calc(100vh - 120px); border-radius: 12px; background: #000; }
.jk-modal .row { justify-content: center; }
@media (prefers-reduced-motion: reduce) { .jk-shot img { transition: none; } }
.btn.jk-share { width: 38px; padding: 0; }
.jk-share svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* egy játék közelebbről (/jatekok/<id>) */
.jk-lock, .jk-lock body { overflow: hidden; }
.jk-dmodal { align-items: start; padding: 24px 16px; overflow-y: auto; backdrop-filter: blur(4px); animation: fade .2s; }
.jk-dmodal > .jk-detail { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 0; width: min(100%, 960px); align-items: stretch; background: var(--night2); border: 1px solid var(--line); border-radius: 24px; overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, .6); animation: pop-in .25s; margin: auto 0; }
.jk-x { position: absolute; top: 12px; right: 12px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(10, 6, 30, .7); color: #fff; font: 1.5rem/1 var(--sans); cursor: pointer; }
.jk-dshot { background: #120b2e; display: grid; place-items: center; min-height: 260px; }
.jk-dshot img, .jk-dshot video { display: block; width: 100%; height: 100%; object-fit: cover; }
.jk-dshot.portrait { align-self: start; max-height: min(70vh, 560px); }
.jk-dshot.portrait img, .jk-dshot.portrait video { object-fit: contain; max-height: min(70vh, 560px); }
.jk-dshot .jk-ph { aspect-ratio: 16 / 10; }
.jk-dbody { display: flex; flex-direction: column; gap: 10px; padding: 26px 26px 24px; }
.jk-dbody h2 { font-size: 1.7rem; }
.jk-desc { color: var(--ink2); }
.jk-desc p { margin: 0 0 10px; }
.jk-idea { display: flex; align-items: center; gap: 14px; margin-top: 6px; padding: 14px 16px; border-radius: 18px; text-decoration: none; color: var(--btn); background: linear-gradient(160deg, #ffe08a, var(--gold) 60%, var(--gold2)); box-shadow: 0 10px 26px rgba(245, 196, 81, .3); transition: transform .12s, box-shadow .12s; }
.jk-idea:hover { transform: translateY(-1px); box-shadow: 0 14px 32px rgba(245, 196, 81, .42); }
.jk-idea span { display: grid; gap: 2px; min-width: 0; }
.jk-idea b { font: 800 1.05rem var(--sans); }
.jk-idea small { font-size: .8rem; line-height: 1.35; opacity: .85; }
.jk-idea i { font-style: normal; font-weight: 800; font-size: 1.3rem; margin-left: auto; }
.jk-ilamp { flex: none; width: 46px; height: 46px; border-radius: 50%; background: rgba(42, 27, 0, .14); display: grid; place-items: center; }
.jk-ilamp svg { width: 30px; height: 18px; fill: var(--btn); }
.jk-ilamp .wisp { fill: none; stroke: var(--btn); stroke-width: 2; stroke-linecap: round; }
.jk-title { color: inherit; text-decoration: none; }
.jk-title:hover { color: var(--gold); }
@media (max-width: 760px) {
  .jk-dmodal { padding: 0; }
  .jk-dmodal > .jk-detail { grid-template-columns: 1fr; grid-template-rows: auto 1fr; border-radius: 0; border: 0; min-height: 100%; margin: 0; }
  .jk-dshot { min-height: 0; }
  .jk-dshot img, .jk-dshot video { aspect-ratio: 16 / 10; height: auto; }
  .jk-dbody { padding: 18px 16px calc(24px + env(safe-area-inset-bottom)); }
}