/* ================================================================
   GALLERY — 3-row infinite marquee + Steam click modal
================================================================ */
.gallery{
  padding:80px 0 20px;
  display:flex;
  flex-direction:column;
  overflow:hidden !important;
}
.gallery .section-head{
  padding-left:36px;padding-right:36px;
  margin-bottom:28px;
}

.g-rows{
  display:flex;flex-direction:column;
  gap:10px;
  flex:1;
  overflow:visible;
  padding:14px 0 8px;  /* 14px top gives first-row tiles room to lift */
}

.g-row{
  overflow-x:clip;
  overflow-y:visible;
  position:relative;
  flex:1;
  min-height:0;
}
/* rows keep scrolling on hover — pause only on individual tile hover */
.g-row .g-track{ }

.g-track{
  display:flex;
  gap:10px;
  width:max-content;
  animation:marqueeLeft var(--dur,40s) linear infinite;
}
.g-row[data-dir="right"] .g-track{
  animation-name:marqueeRight;
}

@keyframes marqueeLeft{
  0%  { transform:translateX(0) }
  100%{ transform:translateX(-50%) }
}
@keyframes marqueeRight{
  0%  { transform:translateX(-50%) }
  100%{ transform:translateX(0) }
}

/* ── tile ── */
.g-tile{
  flex:0 0 auto;
  width:clamp(180px,16vw,260px);
  height:clamp(140px,17vh,220px);
  position:relative;
  overflow:hidden;
  border:1px solid var(--line);
  background:#0c0c0f;
  border-radius:3px;
  cursor:pointer !important;

  transform-origin:center;
  transition:
    transform    .35s cubic-bezier(.2,.7,.2,1),
    border-color .3s,
    box-shadow   .35s cubic-bezier(.2,.7,.2,1);
  z-index:0;
}

.g-tile .g-ph{
  position:absolute;inset:0;
  background:repeating-linear-gradient(135deg,#0e0e12 0 10px,#141418 10px 20px);
  display:grid;place-items:center;
  font-family:'JetBrains Mono',monospace;
  font-size:9px;letter-spacing:.25em;
  color:#2a2a2e;text-transform:uppercase;
  transition:opacity .3s;
}
.g-tile img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;display:block;
  transition:transform .45s cubic-bezier(.2,.7,.2,1);
}

/* Steam hover */
.g-tile:hover{
  transform:translateY(-6px) scale(1.05);
  border-color:var(--accent);
  box-shadow:
    0 12px 32px rgba(0,0,0,.7),
    0 0 0 1px var(--accent),
    0 0 18px rgba(212,255,0,.2);
  z-index:10;
}
.g-tile:hover img{ transform:scale(1.07) }
.g-tile:hover .g-ph{ opacity:.6 }
.g-tile:hover::after{ opacity:1 }

/* top accent bar */
.g-tile::after{
  content:"";
  position:absolute;left:0;right:0;top:0;
  height:2px;
  background:linear-gradient(90deg,transparent,var(--accent) 40%,var(--accent-2) 60%,transparent);
  opacity:0;transition:opacity .3s;
  z-index:5;
}

/* info overlay — slides up on hover */
.g-info{
  position:absolute;inset:0;z-index:4;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:10px 10px 8px;
  background:linear-gradient(180deg,transparent 30%,rgba(0,0,0,.88) 100%);
  opacity:0;
  transform:translateY(6px);
  transition:opacity .3s, transform .3s cubic-bezier(.2,.7,.2,1);
  pointer-events:none;
}
.g-tile:hover .g-info{ opacity:1; transform:translateY(0) }
.g-title{
  font-family:'JetBrains Mono',monospace;
  font-size:9px;letter-spacing:.18em;color:#fff;
  text-transform:uppercase;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
}
.g-tags{
  display:flex;gap:4px;margin-top:4px;flex-wrap:wrap;
}
.g-tag{
  font-family:'JetBrains Mono',monospace;
  font-size:7px;letter-spacing:.15em;
  padding:2px 5px;
  background:rgba(212,255,0,.15);
  border:1px solid rgba(212,255,0,.3);
  color:var(--accent);border-radius:2px;
  text-transform:uppercase;
}
.g-num{
  position:absolute;top:7px;left:8px;
  font-family:'JetBrains Mono',monospace;
  font-size:8px;letter-spacing:.2em;
  color:rgba(255,255,255,.35);z-index:3;
}

/* ════════════════════════════════════════════════════════════════
   STEAM CLICK MODAL
════════════════════════════════════════════════════════════════ */
#g-modal{
  position:fixed;inset:0;z-index:2000;
  pointer-events:none;
  display:flex;align-items:center;justify-content:center;
}
#g-modal.open{ pointer-events:all }

/* dark backdrop */
#g-modal-bg{
  position:absolute;inset:0;
  background:rgba(0,0,0,.88);
  backdrop-filter:blur(12px);
  opacity:0;
  transition:opacity .4s ease;
}
#g-modal.open #g-modal-bg{ opacity:1 }

/* card panel */
#g-modal-card{
  position:relative;
  width:min(820px,92vw);
  background:#0d0d10;
  border:1px solid var(--line);
  display:grid;
  grid-template-columns:1fr 1fr;
  overflow:hidden;
  border-radius:4px;
  box-shadow:0 40px 100px rgba(0,0,0,.8), 0 0 0 1px rgba(212,255,0,.15);

  /* start small → expand */
  opacity:0;
  transform:scale(0.82) translateY(20px);
  transition:
    opacity  .45s cubic-bezier(.16,1,.3,1),
    transform .45s cubic-bezier(.16,1,.3,1);
}
#g-modal.open #g-modal-card{
  opacity:1;
  transform:scale(1) translateY(0);
}

/* accent top bar */
#g-modal-top-bar{
  position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--accent) 30%,var(--accent-2) 70%,transparent);
  z-index:10;
}

/* image pane */
#g-modal-img{
  aspect-ratio:4/3;
  background:#0a0a0c
    repeating-linear-gradient(135deg,#0e0e12 0 14px,#141418 14px 28px);
  background-size:cover;
  background-position:center;
  overflow:hidden;
  position:relative;
}
#g-modal-img::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(270deg,rgba(13,13,16,.6),transparent 60%);
}
#g-modal-img img{
  width:100%;height:100%;
  object-fit:cover;display:block;
  transform:scale(1.04);
  transition:transform 1s cubic-bezier(.16,1,.3,1);
}
#g-modal.open #g-modal-img img{ transform:scale(1) }

/* info pane */
#g-modal-body{
  padding:36px 32px 32px;
  display:flex;flex-direction:column;
  gap:16px;
  justify-content:center;
}
#g-modal-num{
  font-family:'JetBrains Mono',monospace;
  font-size:10px;letter-spacing:.35em;color:var(--accent);
  text-transform:uppercase;
}
#g-modal-title{
  font-size:clamp(20px,2.8vw,36px);
  font-weight:500;letter-spacing:-.03em;
  color:#fff;line-height:1.1;
}
#g-modal-tags{
  display:flex;gap:6px;flex-wrap:wrap;margin-top:-6px;
}
#g-modal-tags .g-tag{
  font-size:9px;padding:3px 8px;
}
#g-modal-meta{
  font-family:'JetBrains Mono',monospace;
  font-size:10px;letter-spacing:.2em;color:#555;
  text-transform:uppercase;border-top:1px solid var(--line);
  padding-top:14px;
}
#g-modal-close{
  margin-top:8px;
  width:fit-content;
  padding:12px 22px;
  border:1px solid var(--line);
  font-family:'JetBrains Mono',monospace;
  font-size:10px;letter-spacing:.28em;text-transform:uppercase;
  color:#888;background:transparent;
  transition:color .3s, border-color .3s;
  cursor:pointer !important;
}
#g-modal-close:hover{ color:var(--accent); border-color:var(--accent) }

@media(max-width:640px){
  #g-modal-card{ grid-template-columns:1fr }
  #g-modal-img{ aspect-ratio:16/9 }
  #g-modal-body{ padding:24px 20px }
}