/* ==========================================================================
   Gadget Pilipinas Games — hub-only layer.
   Everything else (header, bento, cards, widgets, footer, tokens) is the
   GP Base theme's own main.css, shipped unmodified so the hub inherits the
   homepage look exactly. Only the pieces the theme has no component for
   live here: the platform browse grid, the nested-menu dropdowns, the
   timestamp column in the news-list widget, and the floating "Back to Tech"
   button (VengeanceUI RadialGlowButton, ported to plain CSS).
   ========================================================================== */

/* ---- Widget list: timestamp column (mirrors the score-pill slot) -------- */
.gp-widget-list li .when {
  margin-left: auto;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ---- Browse by Platform ------------------------------------------------ */
.gp-platform-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 12px;
}
.gp-platform-tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 15px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--gp-radius);
  transition: border-color .15s ease, transform .15s ease;
}
.gp-platform-tile:hover {
  border-color: var(--gp-accent);
  transform: translateY(-2px);
}
.gp-platform-tile strong {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
}
.gp-platform-tile span {
  font-size: 12px;
  color: var(--muted);
}
.gp-platform-tile .n {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gp-accent);
}

/* ---- Section pages (platform archives) --------------------------------- */
.gp-archive-head {
  margin: 4px 0 0;
}
.gp-archive-head h1 {
  font-family: var(--font-display);
  font-size: 30px;
  line-height: 1.15;
  margin: 0 0 6px;
}
.gp-archive-head p {
  color: var(--muted);
  margin: 0;
  max-width: 74ch;
}
.gp-archive-note {
  font-size: 13px;
  color: var(--muted);
  margin: 18px 0 0;
}

/* ---- Header: nested menu dropdowns -------------------------------------
   The theme ships nav.main as a flat flex row (no .sub-menu rules), because
   the main site's "Latest Menu" has no children. The Games Menu is nested
   (PC Platforms, Consoles, Events), so the dropdown treatment lives here and
   uses the theme's own tokens. */
nav.main li.menu-item-has-children {
  position: relative;
}
nav.main li.menu-item-has-children > a::after {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin: 0 0 2px 6px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg);
  opacity: .65;
}
nav.main .sub-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 60;
  min-width: 190px;
  margin: 0;
  padding: 6px;
  list-style: none;
  display: block;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .45);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .14s ease, transform .14s ease, visibility .14s;
}
nav.main li.menu-item-has-children:hover > .sub-menu,
nav.main li.menu-item-has-children:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
nav.main .sub-menu a {
  padding: 8px 11px;
  border-radius: 8px;
  white-space: nowrap;
}
/* Mobile menu: same tree, stacked and indented instead of hover-flown. */
.mobile-menu .sub-menu {
  list-style: none;
  margin: 0;
  padding: 0 0 0 14px;
  display: block;
}

/* ---- Floating "Back to Tech" button ------------------------------------
   Port of VengeanceUI's RadialGlowButton
   (public/r/radial-glow-button.json) to plain CSS: same @property-driven
   radial gradient, same hover choreography, same shine sweep. The component
   is a <button>; here it is an <a> so it is a real navigation control, and it
   is fixed to the bottom-left so it cannot collide with the theme's own
   #gpTop button (bottom-right).

   The @property initial values are the component's own defaults; they are
   also repeated on .rg-button so browsers without @property support (which
   would otherwise resolve var() to nothing and paint no background) still get
   a static radial glow. */
@property --rg-pos-x { syntax: '<percentage>'; initial-value: 40%; inherits: false; }
@property --rg-pos-y { syntax: '<percentage>'; initial-value: 140%; inherits: false; }
@property --rg-spread-x { syntax: '<percentage>'; initial-value: 130%; inherits: false; }
@property --rg-spread-y { syntax: '<percentage>'; initial-value: 170%; inherits: false; }
@property --rg-color-1 { syntax: '<color>'; initial-value: #000022; inherits: false; }
@property --rg-color-2 { syntax: '<color>'; initial-value: #1f3f6d; inherits: false; }
@property --rg-color-3 { syntax: '<color>'; initial-value: #469396; inherits: false; }
@property --rg-color-4 { syntax: '<color>'; initial-value: #f1ffa5; inherits: false; }
@property --rg-color-5 { syntax: '<color>'; initial-value: hsl(250 80% 2.5%); inherits: false; }
@property --rg-border-angle { syntax: '<angle>'; initial-value: 180deg; inherits: true; }
@property --rg-border-color-1 { syntax: '<color>'; initial-value: hsla(230, 75%, 90%, 0.7); inherits: true; }
@property --rg-border-color-2 { syntax: '<color>'; initial-value: hsla(230, 50%, 90%, 0.25); inherits: true; }
@property --rg-stop-1 { syntax: '<percentage>'; initial-value: 37.35%; inherits: false; }
@property --rg-stop-2 { syntax: '<percentage>'; initial-value: 61.36%; inherits: false; }
@property --rg-stop-3 { syntax: '<percentage>'; initial-value: 78.42%; inherits: false; }
@property --rg-stop-4 { syntax: '<percentage>'; initial-value: 93.52%; inherits: false; }
@property --rg-stop-5 { syntax: '<percentage>'; initial-value: 100%; inherits: false; }

.rg-button {
  --transition: 0.25s;
  --spark: 1.8s;
  --speed: 1.2s;
  --cut: 1px;
  --bg: radial-gradient(
    var(--rg-spread-x) var(--rg-spread-y) at var(--rg-pos-x) var(--rg-pos-y),
    var(--rg-color-1) var(--rg-stop-1),
    var(--rg-color-2) var(--rg-stop-2),
    var(--rg-color-3) var(--rg-stop-3),
    var(--rg-color-4) var(--rg-stop-4),
    var(--rg-color-5) var(--rg-stop-5)
  );

  position: relative;
  min-width: 160px;
  min-height: 51px;
  padding: 16px 24px;
  border: none;
  border-radius: 11px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 19px;
  color: rgba(255, 255, 255, 0.95);
  background: var(--bg);
  cursor: pointer;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.95);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  text-decoration: none;
  transition:
    --rg-pos-x .75s, --rg-pos-y .75s,
    --rg-spread-x .75s, --rg-spread-y .75s,
    --rg-color-1 .75s, --rg-color-2 .75s, --rg-color-3 .75s, --rg-color-4 .75s, --rg-color-5 .75s,
    --rg-border-angle .75s, --rg-border-color-1 .75s, --rg-border-color-2 .75s,
    --rg-stop-1 .75s, --rg-stop-2 .75s, --rg-stop-3 .75s, --rg-stop-4 .75s, --rg-stop-5 .75s;
}
.rg-button::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background-image: linear-gradient(var(--rg-border-angle), var(--rg-border-color-1), var(--rg-border-color-2));
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  -webkit-mask-composite: xor;
  pointer-events: none;
}
.rg-button:hover {
  --rg-pos-x: 0%;
  --rg-pos-y: 120%;
  --rg-spread-x: 110.24%;
  --rg-spread-y: 110.2%;
  --rg-color-1: #000020;
  --rg-color-2: #f1ffa5;
  --rg-color-3: #469396;
  --rg-color-4: #1f3f6d;
  --rg-stop-1: 0%;
  --rg-stop-2: 10%;
  --rg-stop-3: 35.44%;
  --rg-stop-4: 71.34%;
  --rg-stop-5: 150%;
  --rg-border-angle: 190deg;
  --rg-border-color-1: hsla(320, 75%, 90%, 0.1);
  --rg-border-color-2: hsla(320, 50%, 90%, 0.35);
  --button-line-opacity: 1;
}
.rg-label {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  width: 100%;
}
.rg-bg {
  position: absolute;
  inset: var(--cut);
  background: var(--bg);
  border-radius: inherit;
  transition: background var(--transition), opacity var(--transition);
}
.rg-shine {
  position: absolute;
  inset: 0;
  container-type: size;
  border-radius: inherit;
  mix-blend-mode: soft-light;
  opacity: var(--button-line-opacity, 0);
  transition: opacity 0.3s;
  overflow: visible;
}
.rg-shine span {
  position: absolute;
  inset: 0;
  height: 100cqh;
  aspect-ratio: 1;
  animation: rg-slide var(--speed) ease-in-out infinite alternate;
  overflow: visible;
}
.rg-shine span::before {
  content: "";
  position: absolute;
  inset: -100%;
  background: conic-gradient(
    from calc(270deg - (90deg * 0.5)),
    transparent 0,
    #fff 90deg,
    transparent 90deg
  );
  animation: rg-spin calc(var(--speed) * 2) infinite linear;
}
@keyframes rg-spin {
  0% { rotate: 0deg; }
  15%, 35% { rotate: 90deg; }
  65%, 85% { rotate: 270deg; }
  100% { rotate: 360deg; }
}
@keyframes rg-slide {
  to { transform: translate(calc(100cqw - 100%), 0); }
}

/* Hub placement: floating, bottom-left, above the page but below the header
   dropdowns is not a concern (fixed + own stacking context). */
.gp-back-tech {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 40;
  min-width: 0;
  min-height: 0;
  padding: 13px 20px;
  line-height: 1.1;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .45);
}
.gp-back-tech:focus-visible {
  outline: 2px solid var(--gp-accent);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .gp-back-tech,
  .gp-back-tech .rg-shine span,
  .gp-back-tech .rg-shine span::before {
    animation: none;
    transition: none;
  }
}
@media (max-width: 640px) {
  .gp-back-tech {
    left: 12px;
    bottom: 12px;
    padding: 11px 16px;
    font-size: 13px;
  }
}