/* games.css · "משחקי גיבורי על": מרכז המשחקים של הקלפים, בסגנון קומיקס. מובייל קודם */
.games-page { background: #1b2470 radial-gradient(rgba(10, 11, 34, .28) 1.4px, transparent 1.8px) 0 0 / 10px 10px; }
.gh { padding-block: 96px 64px; overflow-x: clip; }
.gh__top { display: grid; gap: 10px; justify-items: start; padding-block: 8px 22px; }
.gh__back { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 999px; background: rgba(255, 255, 255, .12); border: 2px solid rgba(255, 255, 255, .28); color: #fff; font: 800 .9rem var(--f-brand); text-decoration: none; }
.gh__back:hover { background: rgba(255, 255, 255, .2); }
.gh__title { display: grid; gap: 4px; margin: 6px 0 0; line-height: 1; }
.gh__small { font: 800 clamp(1rem, .9rem + .5vw, 1.3rem) var(--f-brand); color: var(--gold); }
.gh__pop { font: 900 clamp(2.5rem, 1.6rem + 4.4vw, 4.8rem)/1 var(--f-brand); color: #fff; -webkit-text-stroke: .05em var(--ink); paint-order: stroke fill; text-shadow: .05em .07em 0 var(--ink); transform: rotate(-2deg); transform-origin: right; text-wrap: balance; }
.gh__lead { margin: 4px 0 0; max-width: 46ch; font: 600 clamp(1rem, .95rem + .3vw, 1.2rem)/1.5 var(--f-text); color: rgba(255, 255, 255, .9); text-wrap: pretty; }

.gh__list { display: grid; gap: 22px; }
@media (min-width: 900px) { .gh__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; } }

.g { position: relative; display: grid; grid-template-rows: auto 1fr; background: var(--paper); color: var(--ink); border: 4px solid var(--ink); border-radius: 18px; box-shadow: 7px 8px 0 var(--ink); overflow: hidden; }
.g:nth-child(1) { rotate: -.6deg; } .g:nth-child(2) { rotate: .5deg; }
.g__art { position: relative; height: 230px; overflow: hidden; border-bottom: 4px solid var(--ink); background: #e8323c radial-gradient(rgba(10, 11, 34, .22) 1.4px, transparent 1.8px) 0 0 / 9px 9px; display: grid; place-items: center; }
.g--city .g__art { background-color: #2f7fe0; } .g--codes .g__art { background-color: #5b5f7a; }
.g__c { width: 104px; height: auto; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 8px; border: 3px solid var(--ink); box-shadow: 4px 5px 0 var(--ink); background: #222; }

/* קרב בפאנלים: שני קלפים, VS, ואבן/נייר/מספריים */
.g__vs { position: relative; display: flex; align-items: center; gap: 34px; }
.g__vs .g__c { width: 120px; } .g__vs .g__c:first-child { rotate: 8deg; } .g__vs .g__c:nth-child(2) { rotate: -8deg; }
.g__badge { position: absolute; left: 50%; top: 42%; translate: -50% -50%; display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; background: var(--gold); border: 4px solid var(--ink); box-shadow: 3px 4px 0 var(--ink); font: 900 1.4rem 'Rubik', system-ui, sans-serif; rotate: -8deg; }
.g__rps { position: absolute; left: 50%; bottom: -16px; translate: -50% 0; display: flex; gap: 2px; }
.g__rps img { width: 46px; height: 46px; filter: drop-shadow(0 0 1.5px #fff) drop-shadow(2px 3px 0 rgba(10, 11, 34, .6)); }
.g__rps img:nth-child(2) { translate: 0 -8px; } .g__rps .g__sup { width: 52px; height: 52px; translate: 0 -2px; }

/* מי מציל את העיר: מניפה של 5 גיבורים מעל קו רקיע */
.g__fan { position: relative; z-index: 1; display: flex; }
.g__fan .g__c { width: 86px; margin-inline: -14px; rotate: calc((var(--i) - 2) * 9deg); translate: 0 calc(((var(--i) - 2) * (var(--i) - 2)) * 6px); }
.g__sky { position: absolute; inset: auto 0 0; height: 46px; background: #0a0b22; clip-path: polygon(0 100%, 0 40%, 8% 40%, 8% 10%, 16% 10%, 16% 55%, 24% 55%, 24% 0, 30% 0, 30% 45%, 40% 45%, 40% 20%, 50% 20%, 50% 60%, 58% 60%, 58% 5%, 66% 5%, 66% 50%, 74% 50%, 74% 25%, 84% 25%, 84% 55%, 92% 55%, 92% 15%, 100% 15%, 100% 100%); opacity: .75; }

/* גיבורי קוד: רשת קלפים אפורה */
.g__grid { display: grid; grid-template-columns: repeat(3, 58px); gap: 6px; rotate: -4deg; filter: grayscale(1) contrast(.9) brightness(.85); }
.g__grid .g__c { width: 58px; border-width: 2px; box-shadow: 2px 3px 0 var(--ink); }
.g__stamp { position: absolute; top: 18px; inset-inline-start: 14px; padding: 4px 14px; background: var(--gold); border: 3px solid var(--ink); box-shadow: 3px 4px 0 var(--ink); font: 900 1.2rem var(--f-brand); rotate: -10deg; }

.g__body { display: grid; align-content: start; gap: 10px; padding: 16px 18px 20px; }
.g__name { margin: 0; font: 900 clamp(1.7rem, 1.4rem + 1.2vw, 2.2rem)/1.05 var(--f-brand); }
.g__pitch { margin: 0; font: 600 1.02rem/1.45 var(--f-text); text-wrap: pretty; }
.g__meta { list-style: none; margin: 2px 0 4px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.g__meta li { padding: 3px 10px; border-radius: 999px; background: rgba(10, 11, 34, .08); border: 2px solid var(--ink); font: 800 .82rem var(--f-brand); }
.g__meta .g__time { background: var(--gold); }
.g__play { justify-self: start; display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 26px; border-radius: 14px; background: #e8323c; color: #fff; border: 4px solid var(--ink); box-shadow: 4px 5px 0 var(--ink); font: 900 1.25rem var(--f-brand); text-decoration: none; text-shadow: 1px 1px 0 var(--ink); transition: transform .3s cubic-bezier(.2, 1.4, .4, 1), box-shadow .2s; }
.g__play:hover { transform: translateY(-3px) rotate(-1deg); box-shadow: 6px 8px 0 var(--ink); }
.g__play:active { transform: translateY(2px); box-shadow: 1px 2px 0 var(--ink); }
.g--city .g__play { background: #2f7fe0; }
.g__play.is-soon { background: #8a8da3; cursor: default; transform: none; box-shadow: 2px 3px 0 var(--ink); }
.g.is-soon { filter: saturate(.55); }
.g.is-soon .g__name, .g.is-soon .g__pitch { opacity: .8; }

@media (max-width: 420px) {
  .g__art { height: 210px; }
  .g__vs { gap: 24px; } .g__vs .g__c { width: 104px; }
  .g__fan .g__c { width: 74px; }
}
@media (prefers-reduced-motion: reduce) { .g__play { transition: none; } }