@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Fraunces:opsz,wght@9..144,600;9..144,700&family=Outfit:wght@600;700;800;900&display=swap');
:root{color:#effcff;background:#061724;font-family:Outfit,Arial,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#061724}.gb-page{min-height:100vh;background:url('/images/gentlebeatz-night-sky-v1.png') center top/cover fixed no-repeat}.gb-nav,.gb-hero,.gb-games,.gb-footer{width:min(1120px,calc(100% - 48px));margin:auto}.gb-nav{height:92px;align-items:center;justify-content:space-between;display:flex}.gb-nav__wordmark{color:#eefeff;text-decoration:none;letter-spacing:.09em;font-size:.72rem;font-weight:800;text-shadow:0 0 12px #4ce7ef72}.gb-nav__wordmark span{color:#78e9ed}.gb-nav__play{color:#052433;background:linear-gradient(110deg,#8cfaff,#55dfff 48%,#b39fff);border:1px solid #b8f3f1;border-radius:999px;padding:12px 16px;text-decoration:none;font:800 .6rem/1 'DM Mono',monospace;letter-spacing:.08em;box-shadow:0 0 26px #39e6f354;transition:transform .2s ease}.gb-nav__play:hover{transform:translateY(-2px)}.gb-nav__play b{font-size:1rem;margin-left:6px}.gb-hero{min-height:calc(100vh - 92px);padding:70px 0 130px;text-align:center;justify-content:center;align-items:center;display:grid;align-content:center}.gb-hero__logo{width:min(360px,84vw);margin-bottom:22px;filter:drop-shadow(0 14px 20px #000b) drop-shadow(0 0 22px #51edf08a)}.gb-hero__logo img{width:100%;mix-blend-mode:screen;filter:invert(1);display:block}.gb-hero>p{color:#a1eef6;margin:0;font:700 .61rem 'DM Mono',monospace;letter-spacing:.14em;text-shadow:0 0 10px #4ae7ee85}.gb-hero h1{color:#f3ffff;font:700 clamp(3.8rem,9vw,8rem)/.84 Fraunces,Georgia,serif;letter-spacing:-.08em;margin:22px 0 0;text-shadow:0 3px 20px #03121c,0 0 30px #0cbbc84d}.gb-hero h1 em{background:linear-gradient(100deg,#72f5ff,#a9c0ff 47%,#ff79b8);color:transparent;font-style:italic;-webkit-background-clip:text;background-clip:text}.gb-games{border-top:1px solid #8beaf34f;padding:42px 0 100px}.gb-games__heading{color:#d7faff;justify-content:space-between;align-items:center;margin-bottom:22px;font:800 .63rem 'DM Mono',monospace;letter-spacing:.13em;display:flex}.gb-games__heading b{color:#f4ce68}.gb-games__grid{grid-template-columns:1.58fr .82fr;gap:18px;display:grid}.gb-card{border:1px solid #82edf069;border-radius:23px;overflow:hidden}.gb-card--weave{color:#fff;background:#07143bdb;text-decoration:none;display:block;transition:transform .24s ease,border-color .24s ease,box-shadow .24s ease}.gb-card--weave:hover{border-color:#55efff;transform:translateY(-6px);box-shadow:0 22px 58px #01122d8a,0 0 38px #18e5f52b}.gb-card__image{aspect-ratio:16/8;position:relative;overflow:hidden}.gb-card__image:after{content:"";background:linear-gradient(180deg,transparent 45%,#07143b);position:absolute;inset:0}.gb-card__image img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}.gb-card--weave:hover .gb-card__image img{transform:scale(1.035)}.gb-card__image span{z-index:1;color:#062534;background:linear-gradient(90deg,#65fbff,#aeb6ff);border-radius:999px;padding:8px 10px;font:800 .52rem 'DM Mono',monospace;letter-spacing:.09em;position:absolute;top:18px;left:18px;box-shadow:0 0 18px #50efff85}.gb-card__body{align-items:end;justify-content:space-between;padding:0 28px 26px;display:flex}.gb-card__body small,.gb-card--soon small{color:#b5cbef;font:700 .55rem 'DM Mono',monospace;letter-spacing:.13em}.gb-card h2{font:900 clamp(3.5rem,6vw,6.2rem)/.71 Outfit,sans-serif;letter-spacing:-.09em;margin:12px 0 0}.gb-card h2 em{color:#ff65b2;font-style:normal;text-shadow:0 0 21px #ff369f82}.gb-card__body strong{color:#bdf6fa;border:1px solid #8ce7eb75;border-radius:10px;padding:11px 13px;font:800 .6rem 'DM Mono',monospace;letter-spacing:.1em}.gb-card__body strong b{font-size:1rem;margin-left:5px}.gb-card ul{border-top:1px solid #8beaf345;background:linear-gradient(90deg,#0d41a4a3,#49126794,#0d3f7da3);gap:0;margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,1fr)}.gb-card li{color:#c8f8fb;border-right:1px solid #8beaf345;padding:15px 18px;font:700 .5rem/1.4 'DM Mono',monospace;letter-spacing:.07em}.gb-card li:nth-child(2){color:#ff9aca}.gb-card li:last-child{color:#ffdf75;border:0}.gb-card--soon{background:radial-gradient(circle at 80% 18%,#16e7f23a,transparent 30%),radial-gradient(circle at 20% 90%,#f7319c34,transparent 36%),linear-gradient(145deg,#0d4d77e8,#211459e6);padding:clamp(30px,5vw,52px);position:relative}.gb-card--soon:after{content:"";border:1px solid #a8fcff58;border-radius:50%;width:240px;height:240px;position:absolute;right:-110px;bottom:-100px}.gb-card--soon>span{color:#ffd86b;font-size:3rem;text-shadow:0 0 24px #ffc044}.gb-card--soon small{color:#a9f6fb;margin-top:38px;display:block}.gb-card--soon h2{color:#efffff;font:700 clamp(2.6rem,4vw,4.2rem)/.82 Fraunces,Georgia,serif;letter-spacing:-.075em}.gb-footer{border-top:1px solid #8beaf34f;min-height:105px;align-items:center;justify-content:space-between;display:flex}.gb-footer>span{gap:15px;display:flex}.gb-footer>span a{color:#a9eef4;text-decoration:none;font:700 .52rem 'DM Mono',monospace;letter-spacing:.08em}.gb-footer>span a:hover{color:#f3cd68}@media(max-width:720px){.gb-nav,.gb-hero,.gb-games,.gb-footer{width:calc(100% - 32px)}.gb-nav{height:76px}.gb-nav__wordmark{font-size:.6rem}.gb-nav__play{padding:10px 12px;font-size:.5rem}.gb-hero{min-height:calc(84vh - 76px);padding:45px 0 72px}.gb-hero h1{font-size:clamp(3.45rem,14vw,5.3rem)}.gb-games{padding:32px 0 70px}.gb-games__grid{grid-template-columns:1fr}.gb-card__body{padding:0 20px 21px}.gb-card ul{grid-template-columns:1fr}.gb-card li{border-right:0;border-bottom:1px solid #8beaf345}.gb-card li:last-child{border-bottom:0}.gb-card--soon{min-height:290px}.gb-footer{align-items:flex-start;gap:18px;padding:25px 0;flex-wrap:wrap}.gb-footer>span{gap:11px;flex-wrap:wrap}}
/* GentleBeatz palette: moon-white, cyan light, and one lantern-gold accent. */
:root{--gb-white:#f2ffff;--gb-cyan:#71f5ff;--gb-gold:#ffc65b;--gb-gold-light:#ffe39a}.gb-nav__wordmark{color:var(--gb-white)!important}.gb-nav__wordmark span,.gb-hero>p,.gb-games__heading{color:var(--gb-cyan)!important}.gb-nav__play{background:linear-gradient(110deg,#f6ffff,#8bfaff)!important;border-color:#d6ffff!important;box-shadow:0 0 25px #46e9f05c!important}.gb-hero h1 em{background:linear-gradient(100deg,#fff,#b7fbff 60%,#7df0ff)!important;-webkit-background-clip:text!important;background-clip:text!important}.gb-games__heading b{color:var(--gb-gold)!important;text-shadow:0 0 12px #ffc65b9a}.gb-card__image span{background:linear-gradient(90deg,#efffff,#8bfaff)!important;box-shadow:0 0 18px #50efff85!important}.gb-card--soon{background:radial-gradient(circle at 80% 18%,#16e7f23a,transparent 30%),radial-gradient(circle at 20% 90%,#ffc65b42,transparent 36%),linear-gradient(145deg,#0d4d77e8,#0e3556e6)!important;border-color:#8ff7f5a6!important}.gb-card--soon>span{color:var(--gb-gold)!important;text-shadow:0 0 24px #ffc65b!important}.gb-card--soon h2 em{color:var(--gb-gold-light)!important;text-shadow:0 0 19px #ffc65b9c!important}.gb-card ul{background:linear-gradient(90deg,#0b4b79b8,#0e6b88ab,#0b4b79b8)!important}.gb-card li:nth-child(2){color:#d7fbff!important}.gb-card li:last-child{color:var(--gb-gold-light)!important}.gb-footer>span a:hover{color:var(--gb-gold)!important}
/* One game for now: keep the arcade list intentional, compact, and centered. */
.gb-games__grid {
  grid-template-columns: minmax(0, 360px) !important;
  justify-content: center;
}

.gb-card--soon {
  display: none !important;
}

.gb-card--weave {
  width: 100%;
  aspect-ratio: 1;
  display: grid;
  grid-template-rows: 1.05fr .82fr auto;
}

.gb-card--weave .gb-card__image {
  aspect-ratio: auto;
  min-height: 0;
}

.gb-card--weave .gb-card__body {
  min-height: 0;
  padding: 0 22px 16px;
}

.gb-card--weave h2 {
  font-size: clamp(2.75rem, 5vw, 3.75rem);
}

.gb-card--weave ul {
  grid-template-columns: 1fr;
  padding: 0;
}

.gb-card--weave li {
  padding: 8px 14px;
  border-right: 0;
  border-bottom: 1px solid #8beaf345;
  font-size: .45rem;
}

.gb-card--weave li:last-child {
  border-bottom: 0;
}

.gb-card--weave .gb-card__body strong {
  padding: 9px 10px;
  font-size: .52rem;
}

@media (max-width: 720px) {
  .gb-games__grid {
    grid-template-columns: minmax(0, 310px) !important;
  }
}
/* Keep the arcade hero compact: the game list begins as soon as the title ends. */
.gb-hero {
  min-height: 0;
  padding: 20px 0 38px;
}

@media (max-width: 720px) {
  .gb-hero {
    min-height: 0;
    padding: 18px 0 30px;
  }
}
/* GentleBeatz hero: moon-white type with the lantern-yellow letter glow. */
:root {
  --gb-white: #f7ffff;
  --gb-lantern: #ffd36a;
  --gb-lantern-bright: #fff3bc;
}

.gb-nav__wordmark,
.gb-nav__wordmark span,
.gb-hero > p,
.gb-games__heading {
  color: var(--gb-white) !important;
  text-shadow: 0 0 10px #ffffff45;
}

.gb-hero h1 {
  color: var(--gb-white);
  text-shadow: 0 2px 18px #03121c, 0 0 20px #ffffff1f;
}

.gb-hero h1 em {
  background: linear-gradient(180deg, #fffbe3 0%, var(--gb-lantern-bright) 30%, var(--gb-lantern) 66%, #ffb94f 100%) !important;
  color: transparent;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  text-shadow: 0 0 5px #fff8cf, 0 0 18px #ffd36ad1, 0 0 42px #ffc05783;
  filter: drop-shadow(0 0 10px #ffd36a92);
}

.gb-nav__play,
.gb-games__heading b {
  color: #11232b !important;
  background: linear-gradient(180deg, #fff8d6, var(--gb-lantern)) !important;
  border-color: #fff3b7 !important;
  box-shadow: 0 0 20px #ffd36a7a !important;
}
/* Center the actual logo block within the hero grid. */
.gb-hero__logo {
  justify-self: center;
  margin-inline: auto;
}
/* General information pages for the GentleBeatz Games hub. */
.gb-info-page {
  min-height: 100vh;
  background: url('/images/gentlebeatz-night-sky-v1.png') center top/cover fixed no-repeat;
  padding-bottom: 72px;
}

.gb-info {
  width: min(820px, calc(100% - 48px));
  margin: 24px auto 0;
  padding: clamp(24px, 4vw, 42px);
  border: 1px solid #8beaf34f;
  border-radius: 24px;
  background: linear-gradient(180deg, #061724e8, #07143bdc);
  box-shadow: 0 26px 70px #020a1c9c, 0 0 34px #42e9f21c;
}

.gb-info__kicker {
  margin: 0 0 12px;
  color: var(--gb-lantern);
  font: 800 .62rem 'DM Mono', monospace;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.gb-info h1 {
  margin: 0 0 20px;
  color: var(--gb-white);
  font: 800 clamp(2.3rem, 7vw, 4.6rem)/.9 Outfit, Arial, sans-serif;
  letter-spacing: 0;
}

.gb-info h2 {
  margin: 30px 0 10px;
  color: #dffcff;
  font: 800 1rem 'DM Mono', monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.gb-info p,
.gb-info li {
  color: #c4e8ee;
  font: 600 1rem/1.65 Outfit, Arial, sans-serif;
}

.gb-info a {
  color: #fff0a9;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.gb-info ul {
  padding-left: 20px;
}

.gb-info__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.gb-info__button {
  color: #062534 !important;
  background: linear-gradient(180deg, #fff8d6, var(--gb-lantern));
  border: 1px solid #fff3b7;
  border-radius: 999px;
  padding: 12px 16px;
  text-decoration: none;
  font: 800 .62rem/1 'DM Mono', monospace;
  letter-spacing: .08em;
  box-shadow: 0 0 20px #ffd36a61;
}

@media (max-width: 720px) {
  .gb-info {
    width: calc(100% - 32px);
    border-radius: 18px;
  }

  .gb-info p,
  .gb-info li {
    font-size: .95rem;
  }
}

.gb-card-details{justify-self:center;color:#062534;background:linear-gradient(180deg,#fff8d6,#ffd36a);border:1px solid #fff3b7;border-radius:999px;padding:10px 14px;text-decoration:none;font:800 .56rem/1 'DM Mono',monospace;letter-spacing:.09em;box-shadow:0 0 18px #ffd36a66;display:inline-flex;margin:14px auto 0}
.gb-card-details:hover{transform:translateY(-2px);box-shadow:0 0 24px #ffd36a8a}


/* Valid game card actions: main card plays, details is separate. */
.gb-card__play-link {
  color: inherit;
  text-decoration: none;
  display: contents;
}

.gb-card--weave {
  grid-template-rows: 1.05fr .82fr auto auto !important;
}

.gb-footer__links,
.gb-footer__social {
  gap: 15px;
  display: flex;
  flex-wrap: wrap;
}