/* THUMB OVERLAY — top-left, fills, white text, More at bottom-right */
.game-card .thumb-wrap{ position:relative; overflow:hidden; }
.game-card .thumb-wrap img{ display:block; width:100%; height:auto; }

.game-card .thumb-wrap .overlay{
  position:absolute; inset:0;
  background:rgba(0,0,0,.72);
  color:rgba(255,255,255,.92);
  text-shadow:0 1px 2px rgba(0,0,0,.6);
  display:flex; flex-direction:column;          /* stack: snippet (flex:1) then actions */
  justify-content:flex-start; align-items:stretch;
  padding:.55rem .6rem;
  opacity:0; transition:opacity .12s ease-in-out;
  z-index:3;
  pointer-events:none;                           /* keep hover reveal clean… */
}
.game-card .thumb-wrap:hover .overlay,
.game-card .thumb-wrap:focus-within .overlay{ opacity:1; }

/* Make description fill the overlay (no mid-cut), but don’t overflow button row */
.game-card .overlay .snippet{
  margin:0;
  font-size:.9rem; line-height:1.35;
  color:rgba(255,255,255,.92);
  flex:1 1 auto;
  overflow:hidden;
  /* allow many lines by removing the clamp */
  display:block; /* (remove any -webkit-line-clamp usage) */
  max-height:calc(100% - 30px);                  /* leaves room for the More link row */
}

/* Bottom row with the More link aligned right */
.game-card .overlay .actions{
  display:flex; justify-content:flex-end; align-items:center;
  margin-top:.35rem;
}

/* Force white links/buttons inside overlay (fixes blue link) */
.game-card .thumb-wrap .overlay a,
.game-card .thumb-wrap .overlay .btn{
  color:rgba(255,255,255,.95) !important;
  text-decoration:none;
  pointer-events:auto;                           /* …but still clickable */
}
.game-card .thumb-wrap .overlay a:hover{ text-decoration:underline; }

/* Optional: keep thumbnails tidy */
.card-img-top{ width:100%; height:180px; object-fit:cover; display:block; }


/* Only the grid game cards */
.card.game-card {
  background-color: #f3f4f6;      /* light gray */
  border: 1px solid #e5e7eb;      /* subtle border */
}

/* Make the body match if Bootstrap overrides it */
.card.game-card .card-body {
  background-color: #f3f4f6;
}

/* (optional) rounder look */
.card.game-card {
  border-radius: .5rem;
  overflow: hidden;
}
/* vote results in home.php */

  /* thin result bar at bottom of thumbnail */
  .thumb-wrap .vote-line{
    position:absolute; left:0; right:0; bottom:0; height:5px;   /* thin */
    display:flex; z-index:5; pointer-events:none;               /* above overlay */
  }
  .thumb-wrap .vote-line .seg{display:block; height:100%;}
  .thumb-wrap .vote-line .seg.up{background:#198754;}   /* green */
  .thumb-wrap .vote-line .seg.down{background:#dc3545;} /* red   */


  /* Light theme for this block */
  .gm-card{background:#f5f6f8;border:1px solid #e3e6ec;border-radius:.9rem;color:#1f2937;box-shadow:0 8px 24px rgba(0,0,0,.08);}
  .gm-title{margin:0;font-weight:700;}
  .gm-main-thumb{width:100%;height:auto;border-radius:.6rem;box-shadow:0 6px 18px rgba(0,0,0,.12);}
  .gm-subtle{color:#6b7280;}
  .gm-badges .badge{background:#e5e7eb;color:#111;border:1px solid #d1d5db;}
  .gm-votes{display:flex;justify-content:center;gap:.5rem;margin-top:.5rem;}
  .gm-vote{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:999px;border:1px solid #cbd5e1;background:#fff;cursor:pointer}
  .gm-vote:hover{background:#eef2f7}
  .gm-vote.active{background:#0d6efd;border-color:#0d6efd}
  .gm-vote svg{width:20px;height:20px;fill:#334155}
  .gm-vote.active svg{fill:#fff}
  @media (min-width:768px){.gm-divide-md{border-right:1px solid #e5e7eb!important;}}
  .gm-sep{height:1px;background:linear-gradient(90deg,transparent,#d1d5db,transparent);}

  /* Related cards (uniform 16:9, no squish) */
  .gm-rel-card{background:#ffffff;border:1px solid #e5e7eb;border-radius:.6rem;overflow:hidden;transition:transform .18s ease, box-shadow .18s ease;}
  .gm-rel-card:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.12);}
  .gm-rel-thumb{position:relative; width:100%; padding-top:56.25%; /* 16:9 */ overflow:hidden;}
  .gm-rel-thumb img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;}
  .gm-rel-title{padding:.5rem .55rem .6rem; font-size:.9rem; line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#111827;}

/* more line-height + block spacing inside the description */
.gm-desc, .gm-desc * { line-height: 1.75 !important; }

.gm-desc p,
.gm-desc ul,
.gm-desc ol,
.gm-desc blockquote {
  margin: 0 0 .9rem !important;
}

/* if the HTML doesn’t use <p>, still add gap between siblings */
.gm-desc > * + * { margin-top: .9rem !important; }


.gm-votes{display:flex;justify-content:center;gap:.75rem;margin:.25rem 0}
.gm-vote{border:0;background:transparent;cursor:pointer;padding:.25rem;line-height:1}
.gm-vote svg{width:28px;height:28px;fill:#6c757d;transition:transform .12s,fill .12s}
.gm-vote:hover svg{transform:translateY(-1px);fill:#0d6efd}
.gm-vote.active svg{fill:#198754}                 /* up = green */
.gm-vote[data-vote="down"].active svg{fill:#dc3545}/* down = red */


/*        */

    /* --- 3D ELEGANT CAROUSEL (move to your CSS file later) --- */
    .hp-carousel {
      --hp-thumb-h: 120px; /* tweak size */
      --hp-gap: .65rem;
      --hp-radius: .6rem;
      --hp-bg: radial-gradient(1200px 500px at 15% -10%, #ffffff 0%, #7f7b73 42%, #b5b2aa 100%);
      --hp-item-shadow: 0 6px 18px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.04) inset;
      --hp-nav-shadow: 0 10px 20px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08);
      --hp-nav-grad: linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.25));
      background: var(--hp-bg);
      border-radius: var(--hp-radius);
      padding: .75rem .75rem 1rem;
      margin-bottom: 1rem;
      position: relative;
      overflow: hidden;
    }
    .hp-carousel .h4 { letter-spacing: .2px; }

    .hp-viewport { position: relative; overflow: hidden; }
    .hp-track {
      overflow-x: auto; overflow-y: hidden;
      white-space: nowrap; scroll-behavior: smooth;
      -ms-overflow-style: none; scrollbar-width: none;
      padding: .125rem .75rem .25rem;
      mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
      -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
    }
    .hp-track::-webkit-scrollbar { display: none; }

    .hp-item {
      display: inline-block;
      width: 180px; margin-right: var(--hp-gap);
      vertical-align: top; text-decoration: none;
      transform-style: preserve-3d;
      transition: transform .35s cubic-bezier(.2,.75,.25,1), filter .2s;
      will-change: transform;
    }
    .hp-item:focus { outline: none; }
    .hp-card {
      position: relative;
      background: rgba(255,255,255,.02);
      border-radius: var(--hp-radius);
      box-shadow: var(--hp-item-shadow);
      overflow: hidden;
      transform: translateZ(0); /* new layer */
    }
    .hp-thumb {
      width: 100%; height: var(--hp-thumb-h);
      display: block; object-fit: cover;
      filter: saturate(1.02) contrast(1.04);
    }
    /* moving light streak */
    .hp-thumb-wrap { position: relative; }
    .hp-thumb-wrap::after {
      content: ""; position: absolute; inset: 0;
      background: linear-gradient(120deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,0) 25% 75%, rgba(255,255,255,.06) 100%);
      mix-blend-mode: screen; pointer-events: none;
      opacity: .0; transition: opacity .2s;
    }
    .hp-item.is-tilting .hp-thumb-wrap::after { opacity: .65; }

    .hp-title {
      display: block; font-size: .9rem; line-height: 1.1;
      margin: .45rem .5rem .55rem; color: #e9eef7;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      text-shadow: 0 1px 0 rgba(0,0,0,.35);
    }



    /* hover pop / tilt fallback */
    .hp-item:hover { transform: translateY(-3px) scale(1.015); }

    /* edge nav — centered to middle of thumbs */
    .hp-nav {
      position: absolute; z-index: 5;
      top: calc(var(--hp-thumb-h) / 2 - 18px);
      width: 36px; height: 36px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      color: #eaf1ff; background: var(--hp-nav-grad);
      border: 1px solid rgba(255,255,255,.08);
      box-shadow: var(--hp-nav-shadow);
      cursor: pointer; user-select: none;
      transition: transform .15s, background .15s;
      backdrop-filter: blur(2px);
    }
    .hp-prev { left: 6px; }
    .hp-next { right: 6px; }
    .hp-nav:hover { transform: scale(1.07); }
    .hp-nav:active { transform: scale(.97); }

    @media (prefers-reduced-motion: reduce) {
      .hp-item, .hp-nav, .hp-track { transition: none !important; }
    }
	
/*         */
  /* Netplay rooms — smaller thumbs + heartbeat */
  #roomsGrid { --np-thumb-h: 96px; } /* tweak: 56–96px looks good */

  #roomsGrid .np-card{
    background:#111; border:1px solid #222; border-radius:10px; overflow:hidden;
  }
  #roomsGrid .np-thumbwrap{
    position:relative; overflow:hidden; will-change:transform;
    transform-origin:center center;
    animation: np-cardbeat 1.6s ease-in-out infinite;
  }
  #roomsGrid .np-thumb{
    display:block; width:100%; height:var(--np-thumb-h); object-fit:cover;
  }
  #roomsGrid .np-live{
    position:absolute; top:6px; right:6px; width:10px; height:10px; border-radius:50%;
    background:#dc3545; box-shadow:0 0 0 0 rgba(220,53,69,.5);
    animation: np-heart 1.25s ease-in-out infinite;
  }
  #roomsGrid .np-body{ padding:6px; }
  #roomsGrid .np-title{
    font-size:.82rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#eaeaea;
  }
  #roomsGrid .np-room{ font-size:.72rem; color:#9aa0a6; }

  @keyframes np-cardbeat {
    0%,100%{ transform:scale(1); }
    15%   { transform:scale(1.02); }
    30%   { transform:scale(1); }
    45%   { transform:scale(1.02); }
    60%   { transform:scale(1); }
  }
  @keyframes np-heart {
    0%   { transform:scale(1);   box-shadow:0 0 0 0 rgba(220,53,69,.50); }
    20%  { transform:scale(1.25); box-shadow:0 0 0 4px rgba(220,53,69,.25); }
    40%  { transform:scale(1);   box-shadow:0 0 0 8px rgba(220,53,69,0); }
    60%  { transform:scale(1.25); box-shadow:0 0 0 4px rgba(220,53,69,.20); }
    100% { transform:scale(1);   box-shadow:0 0 0 10px rgba(220,53,69,0); }
  }