/* /hub-splash.css
   Crisp /games-style cards INSIDE the home splash hub.
   Loads AFTER /style-test.css
*/

/* Ensure overlay panel can scroll if needed */
.gvSplash{
  background: rgba(6,10,14,.62);
  backdrop-filter: blur(10px);
}
:root[data-theme="light"] .gvSplash{
  background: rgba(248,250,255,.78);
}

/* Panel becomes a column layout: header + hero + scroll + footer */
.gvSplashPanel{
  width: min(1120px, 100%);
  max-height: min(88vh, 920px);
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid var(--line);
  background: var(--card);
  box-shadow: 0 30px 100px rgba(0,0,0,.36);
  display: flex;
  flex-direction: column;
}
:root[data-theme="light"] .gvSplashPanel{
  background: #fff;
  border-color: rgba(11,15,20,.12);
  box-shadow: 0 30px 100px rgba(12,18,28,.18);
}

/* Keep your header & hero crisp */
.gvSplashTop{
  border-bottom: 1px solid var(--line);
  flex: 0 0 auto;
}
:root[data-theme="light"] .gvSplashTop{
  border-bottom-color: rgba(11,15,20,.10);
}

.gvHero{
  margin: 14px 16px 0;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.04);
  padding: 12px 14px;
  flex: 0 0 auto;
}
:root[data-theme="light"] .gvHero{
  border-color: rgba(11,15,20,.12);
  background: #f6f8fc;
}

/* Hub content container (ONLY this scrolls) */
.gvHub{
  padding: 14px 16px 16px;
  overflow: auto;
  flex: 1 1 auto;
  min-height: 0;

  /* smoother + avoids bounce stealing clicks */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* Category boxes (3 across) */
.gvModeRow{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 12px;
}

.gvModeTile{
  text-decoration: none;
  color: var(--text);
  font-weight: 950;
  letter-spacing: .02em;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  padding: 10px 12px;
  position: relative;
  overflow:hidden;
}
:root[data-theme="light"] .gvModeTile{
  border-color: rgba(11,15,20,.12);
  background: #fff;
}

/* top accent strip like /games */
.gvModeTile::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height: 4px;
  opacity:.9;
}
.gvModeTile.daily::before{ background: rgba(74,160,255,.95); }
.gvModeTile.quick::before{ background: rgba(46,200,140,.95); }
.gvModeTile.skills::before{ background: rgba(255,120,130,.95); }

@media (max-width: 520px){
  .gvHub{ padding: 12px 12px 14px; }
  .gvModeRow{ gap: 8px; margin-bottom: 10px; }
  .gvModeTile{ padding: 9px 10px; border-radius: 15px; font-size: 13px; }
}

/* Grid */
.gvHubGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 980px){
  .gvHubGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .gvHubGrid{ grid-template-columns: 1fr; }
}

/* Card */
.gvCard{
  --acc: 74,160,255;
  text-decoration: none !important;
  color: var(--text);

  border-radius: 18px;
  border: 1px solid rgba(var(--acc), .22);
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.02));
  box-shadow:
    0 16px 34px rgba(0,0,0,.10),
    inset 0 1px 0 rgba(255,255,255,.22);

  display:flex;
  flex-direction: column;
  overflow:hidden;
  position: relative;

  transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
}

:root[data-theme="light"] .gvCard{
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,248,252,.90));
  border-color: rgba(var(--acc), .18);
  box-shadow:
    0 18px 44px rgba(12,18,28,.10),
    inset 0 1px 0 rgba(255,255,255,.85);
}

/* Accent bar */
.gvCard::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height: 4px;
  background: rgba(var(--acc), .95);
  opacity: .88;
}

/* Subtle shine */
.gvCard::after{
  content:"";
  position:absolute;
  inset:-40% -30%;
  background: linear-gradient(45deg,
    rgba(255,255,255,0) 40%,
    rgba(255,255,255,.20) 50%,
    rgba(255,255,255,0) 60%);
  transform: translateX(-42%) rotate(8deg);
  opacity: .22;
  pointer-events:none;
}
:root[data-theme="light"] .gvCard::after{ opacity: .16; }

/* Screenshot area */
.gvShot{
  height: 168px;
  background: rgba(255,255,255,.04);
  border-bottom: 1px solid rgba(255,255,255,.08);
  overflow:hidden;
}
:root[data-theme="light"] .gvShot{
  background: #f6f8fc;
  border-bottom-color: rgba(11,15,20,.08);
}
.gvShot img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display:block;
}

/* Body */
.gvCardBody{ padding: 12px 12px 14px; }

.gvCardName{
  margin: 0;
  font-size: 15px;
  font-weight: 950;
  line-height: 1.1;
  letter-spacing: .2px;
}

.gvCardDesc{
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.25;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Hover / focus */
@media (hover:hover){
  .gvCard:hover{
    transform: translateY(-3px);
    border-color: rgba(var(--acc), .34);
    box-shadow:
      0 26px 60px rgba(0,0,0,.16),
      inset 0 1px 0 rgba(255,255,255,.26);
  }
  :root[data-theme="light"] .gvCard:hover{
    box-shadow:
      0 26px 60px rgba(12,18,28,.14),
      inset 0 1px 0 rgba(255,255,255,.90);
  }
  .gvCard:hover::after{
    transform: translateX(10%) rotate(8deg);
    transition: transform 420ms ease;
  }
}
.gvCard:active{ transform: translateY(-1px); }
.gvCard:focus-visible{
  outline: 3px solid rgba(216,177,90,.28);
  outline-offset: 3px;
}

@media (max-width: 520px){
  .gvShot{ height: 148px; }
  .gvCardBody{ padding: 11px 11px 13px; }
}

/* ✅ Footer CTA: locked at the bottom, never overlaps tiles */
.gvHubBottom{
  flex: 0 0 auto;
  display:flex;
  justify-content:center;
  padding: 12px 16px 16px;

  border-top: 1px solid var(--line);
  background: rgba(255,255,255,.03);
}
:root[data-theme="light"] .gvHubBottom{
  border-top-color: rgba(11,15,20,.10);
  background: rgba(246,248,252,.90);
}

@media (max-width: 520px){
  .gvHubBottom{ padding: 10px 12px 12px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .gvCard{ transition: none; }
  .gvCard::after{ display:none; }
}


/* 1) Center the category tiles (Daily / Quick play / Skills lab) */
.gvModeTile{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}

/* 2) Gold outline around each game tile/card */
.gvCard{
  box-shadow:
    0 0 0 2px rgba(216,177,90,.42),   /* gold ring */
    0 16px 34px rgba(0,0,0,.10),
    inset 0 1px 0 rgba(255,255,255,.22);
}

:root[data-theme="light"] .gvCard{
  box-shadow:
    0 0 0 2px rgba(216,177,90,.30),   /* gold ring (lighter) */
    0 18px 44px rgba(12,18,28,.10),
    inset 0 1px 0 rgba(255,255,255,.85);
}

/* keep ring on hover too */
@media (hover:hover){
  .gvCard:hover{
    box-shadow:
      0 0 0 1px rgba(216,177,90,.52),
      0 26px 60px rgba(0,0,0,.16),
      inset 0 1px 0 rgba(255,255,255,.26);
  }
  :root[data-theme="light"] .gvCard:hover{
    box-shadow:
      0 0 0 1px rgba(216,177,90,.40),
      0 26px 60px rgba(12,18,28,.14),
      inset 0 1px 0 rgba(255,255,255,.90);
  }
}




.gvCard{ overflow:hidden; }

.gvCardHead{
  padding: 12px 12px 10px;
padding-top: 14px; /* was 12px */
  border-bottom: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(var(--acc), .14), rgba(0,0,0,0));
}
:root[data-theme="light"] .gvCardHead{
  border-bottom-color: rgba(11,15,20,.10);
  background: linear-gradient(180deg, rgba(var(--acc), .10), rgba(255,255,255,0));
}

.gvCardName{
  margin: 0;
  text-align: center;
  font-family: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu;
  font-weight: 950;
  font-size: 18px;
  letter-spacing: .02em;
  line-height: 1.05;
  text-shadow: 0 1px 0 rgba(0,0,0,.18);
}

/* little accent underline */
.gvCardName::after{
  content:"";
  display:block;
  width: 38px;
  height: 3px;
  margin: 8px auto 0;
  border-radius: 999px;
  background: rgba(var(--acc), .95);
}

@media (max-width: 560px){
  .gvCardName{ font-size: 16px; }
}