/* PocketPlay games hub (pocketplay.win/games/). Kit v2 tokens only. */
/* Shim: kit `.pp a { color: inherit }` (0,1,1) outranks `.pp-btn` (0,1,0), so anchor buttons lose their colour. Remove once pp.css is fixed. */
.pp a.pp-btn { color: var(--accent-ink); }
.pp a.pp-btn--ink { color: var(--bg); }
.pp a.pp-btn--secondary { color: var(--ink); }
.pp a.pp-btn--ghost { color: var(--ink-2); }
.pp a.pp-btn--ghost:hover { color: var(--ink); }
.pp a.pp-btn--soft { color: var(--accent-text); }
.pp a.pp-link { color: var(--accent-text); text-decoration: underline; text-decoration-color: var(--accent-line); text-underline-offset: 3px; }
.pp a.pp-link:hover { text-decoration-color: currentColor; }
.pp a.pp-chip:not([aria-current]):not(.is-active) { color: var(--ink-2); }
.pp a.pp-chip:not([aria-current]):not(.is-active):hover { color: var(--ink); }

.gm-hero { position: relative; padding-top: 80px; padding-bottom: 8px; gap: 20px; }
.gm-hero::before { content: ""; position: absolute; z-index: -1; left: 50%; top: -48px; width: min(1100px, 120vw); height: 500px; transform: translateX(-50%);
  background: radial-gradient(40% 52% at 26% 42%, rgba(181, 69, 47, .13), transparent 70%), radial-gradient(38% 48% at 74% 40%, rgba(47, 125, 91, .13), transparent 70%), radial-gradient(30% 40% at 50% 20%, rgba(232, 164, 0, .08), transparent 70%); filter: blur(10px); pointer-events: none; }
.gm-hero .pp-display { max-width: 14ch; }
:lang(zh) .gm-hero .pp-display { max-width: 12em; }
.gm-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 10px; }

/* Two portals */
.gm-portals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 44px; }
.gm-portals .pp-portal__art { height: 248px; }
.gm-portals .pp-cluster__set { transform: scale(1.3); }
.gm-portals .pp-portal__body { gap: 8px; padding: 22px 26px 26px; }
.gm-portals .pp-kicker { font-size: 11.5px; }
.gm-portals .pp-portal__links a { height: 30px; padding: 0 12px; font-size: 13px; }
.gm-g { --r: 0deg; transform: rotate(var(--r)); }
[data-g="board"] .gm-g1 { left: 92px; top: 30px; --r: -4deg; }
[data-g="board"] .gm-g2 { left: 20px; top: 64px; --r: -12deg; }
[data-g="board"] .gm-g3 { left: 178px; top: 22px; --r: 8deg; }
[data-g="board"] .gm-g4 { left: 182px; top: 80px; --r: 12deg; }
[data-g="board"] .gm-g5 { left: 34px; top: 8px; --r: -14deg; }
[data-g="board"] .gm-g6 { left: 120px; top: 110px; --r: 6deg; }
[data-g="cards"] .gm-g1 { left: 90px; top: 28px; --r: -6deg; }
[data-g="cards"] .gm-g2 { left: 26px; top: 66px; --r: -14deg; }
[data-g="cards"] .gm-g3 { left: 180px; top: 20px; --r: 10deg; }
[data-g="cards"] .gm-g4 { left: 176px; top: 80px; --r: 14deg; }
[data-g="cards"] .gm-g5 { left: 40px; top: 8px; --r: -10deg; }
[data-g="cards"] .gm-g6 { left: 124px; top: 112px; --r: 8deg; }

/* Game tiles: six across at desktop width. */
.gm-tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.gm-tiles .pp-tile { min-height: 148px; padding: 20px 12px 16px; gap: 10px; align-content: start; }
.gm-tiles .pp-tile b { font-size: 14.5px; }
.gm-tiles .pp-tile small { min-height: 2.7em; }

.gm-posts { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Community card */
.gm-community { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 18px 28px; padding: 28px 32px; }
.gm-community__head { display: flex; align-items: center; gap: 16px; }
.gm-community__head h2 { font-size: 22px; }
.gm-community__head p { color: var(--ink-3); font-size: 14.5px; margin-top: 3px; }
.gm-community__topics { grid-column: 1; }
.gm-community__go { grid-column: 2; grid-row: 1 / span 2; }
.gm-community .pp-chip { gap: 8px; }

@media (max-width: 1080px) {
  .gm-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .gm-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
  .gm-portals { grid-template-columns: 1fr; }
  .gm-hero { padding-top: 52px; }
  .gm-community { grid-template-columns: 1fr; padding: 22px; }
  .gm-community__go { grid-column: 1; grid-row: auto; justify-self: stretch; }
}
@media (max-width: 640px) {
  .gm-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gm-posts { grid-template-columns: 1fr; }
  .gm-portals .pp-portal__art { height: 200px; }
  .gm-portals .pp-cluster__set { transform: scale(1.05); }
  .gm-cta .pp-btn { flex: 1 1 100%; }
}