* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth
}

body {
  margin:0;
  color:#f7f9ff;
  background:#0b223b;
  font-family:"Segoe UI",Arial,sans-serif;
  -webkit-font-smoothing:antialiased
}

button,input {
  font:inherit
}

a {
  color:inherit;
  text-decoration:none
}

button {
  cursor:pointer
}

em {
  font-style:normal;
  color:#0ec6f2
}

[hidden] {
  display:none!important
}

.container {
  width:min(1184px,calc(100% - 64px));
  margin-inline:auto
}

.navbar {
  height:71px;
  background:linear-gradient(110deg,#081d35,#001e35);
  border-bottom:1px solid #17405b;
  position:relative;
  z-index:5
}

.nav-inner {
  height:100%;
  display:flex;
  align-items:center;
  gap:28px;
  position:relative
}

.brand {
  display:flex;
  align-items:center;
  gap:7px;
  white-space:nowrap;
  font-size:30px;
  font-weight:900;
  letter-spacing:-1.2px
}

.brand img {
  width:70px;
  height:60px;
  object-fit:contain;
  margin-left:-5px
}

.brand em {
  color:#19c9ed
}

nav {
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:26px
}

nav a {
  padding:8px 9px;
  font-size:17px;
  font-weight:500;
  white-space:nowrap
}

nav .active {
  padding:8px 17px;
  border:1px solid #2cc7ff;
  border-radius:24px;
  background:linear-gradient(#00b7f5,#0098f2);
  box-shadow:0 0 20px #00bafa2e;
  font-weight:700
}

.search-toggle {
  border:0;
  background:none;
  color:#c4e5ff;
  padding:4px;
  margin-left:19px
}

.search-toggle .icon {
  width:29px;
  height:29px
}

.menu-toggle {
  display:none
}

.search-form {
  position:absolute;
  right:0;
  top:62px;
  background:#103351;
  border:1px solid #2db9e4;
  padding:12px;
  border-radius:12px;
  box-shadow:0 8px 25px #00102080
}

.search-form input {
  width:260px;
  padding:10px 14px;
  border:1px solid #4b86a1;
  border-radius:7px;
  background:#06253c;
  color:white;
  outline:none
}

.hero {
  height:444px;
  position:relative;
  background:radial-gradient(ellipse at 72% 44%,#0088a1a8,transparent 46%),linear-gradient(113deg,#05182f 12%,#00364f 65%,#04355c);
  overflow:hidden
}

.hero-inner {
  position:relative;
  height:100%
}

.hero-copy {
  position:relative;
  padding-top:33px;
  z-index:2;
  width:505px
}

.hero h1 {
  font-size:86px;
  line-height:.91;
  letter-spacing:-3.8px;
  font-weight:900;
  margin:0 0 20px;
  text-shadow:0 3px 0 #000c1b20
}

.hero h1 em {
  color:#10c5ef
}

.hero-copy>p {
  font-size:24px;
  line-height:1.25;
  color:#d0e4ff;
  max-width:385px;
  margin:0 0 20px;
  letter-spacing:.05px
}

.hero-benefits {
  display:grid;
  grid-template-columns:235px 260px;
  gap:9px 10px
}

.benefit {
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0
}

.benefit .icon {
  width:48px;
  height:48px;
  flex:none;
  filter:drop-shadow(0 0 12px #0dccff25)
}

.hero-benefits .icon {
  width:57px;
  height:57px;
  border-radius:50%;
  padding:10px;
  background:#16334690
}

.benefit strong {
  display:block;
  font-size:16px;
  font-weight:750;
  white-space:nowrap
}

.benefit span {
  display:block;
  color:#bed4ed;
  font-size:15px;
  margin-top:3px;
  white-space:nowrap
}

.hero-benefits .benefit:last-child {
  grid-column:2
}

.hero-art {
  position:absolute;
  width:830px;
  height:440px;
  max-width:none;
  top:16px;
  left:475px;
  z-index:1
}

.hero-waves {
  position:absolute;
  bottom:-1px;
  left:0;
  width:100%;
  height:160px;
  pointer-events:none
}

.lower-content {
  position:relative;
  z-index:2;
  padding-bottom:42px
}

.section-heading {
  display:flex;
  gap:20px;
  align-items:center;
  margin:0 0 15px
}

.section-heading .icon {
  width:52px;
  height:57px;
  filter:drop-shadow(0 0 12px #8dd8ff40)
}

.section-heading h2 {
  margin:0;
  font-size:34px;
  line-height:1.2;
  letter-spacing:-.5px;
  font-weight:900
}

.section-heading p {
  margin:3px 0 0;
  color:#d4e7fd;
  font-size:18px
}

.game-grid {
  display:grid;
  grid-template-columns:1.06fr 1fr 1.03fr 1.05fr;
  gap:12px
}

.game-card {
  height:296px;
  border-radius:16px;
  background:linear-gradient(135deg,#102c4b,#123657);
  border:2px solid #1b4668;
  box-shadow:inset 0 1px 5px #75b9e114;
  overflow:hidden;
  position:relative
}

.game-card.available {
  border-color:#39f2ed;
  background:radial-gradient(circle at 40% 20%,#159c89,#006576 76%);
  box-shadow:0 0 20px #00eada18,inset 0 0 20px #8ef6ed14
}

.game-art {
  height:196px;
  position:relative;
  overflow:hidden
}

.game-art>img {
  position:absolute;
  width:100%;
  height:220px;
  object-fit:contain;
  top:-2px
}

.available .game-art {
  height:155px;
  overflow:visible
}

.available .game-art>img {
  height:200px;
  width:110%;
  left:-5%;
  top:-5px
}

.locked .game-art>img {
  opacity:.64;
  top:12px
}

.locked-message {
  position:absolute;
  inset:87px 0 auto;
  display:flex;
  align-items:center;
  flex-direction:column;
  gap:8px;
  text-align:center
}

.locked-message .icon {
  width:49px;
  height:49px;
  filter:drop-shadow(0 0 12px #68aeff66)
}

.locked-message strong {
  font-size:22px;
  letter-spacing:-.4px
}

.game-copy {
  padding:10px 24px 16px;
  position:relative
}

.game-copy h3 {
  font-size:21px;
  color:#89a4c4;
  margin:0 0 3px;
  font-weight:750
}

.game-copy p {
  font-size:16px;
  color:#91acc8;
  margin:0;
  white-space:nowrap
}

.available .game-copy {
  padding:0 21px 12px
}

.available h3 {
  font-size:32px;
  color:#fff;
  font-weight:900;
  letter-spacing:-.5px;
  line-height:1.2
}

.available p {
  color:#f2faff
}

.play-button {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:9px;
  height:55px;
  border-radius:32px;
  margin-top:10px;
  font-size:21px;
  font-weight:800;
  border:2px solid #31cdff;
  background:linear-gradient(#00baff,#0084fb);
  box-shadow:inset 0 2px 7px #89e3ff80,0 3px 15px #009bff33
}

.play-button svg {
  width:23px;
  height:23px
}

.play-button:hover {
  filter:brightness(1.12)
}

.benefits-row {
  display:grid;
  grid-template-columns:.91fr 1.08fr 1.09fr 1.04fr;
  margin-top:39px;
  position:relative
}

.benefits-row .benefit {
  padding:0 20px 0 34px;
  position:relative;
  gap:17px
}

.benefits-row .benefit:first-child {
  padding-left:0
}

.benefits-row .benefit+.benefit:before {
  content:"";
  position:absolute;
  left:0;
  top:6px;
  width:1px;
  height:44px;
  background:#47718f
}

.benefits-row .icon {
  width:54px;
  height:54px
}

.benefits-row span {
  font-size:15px
}

.no-results {
  color:#bfdcf2;
  padding:28px
}

main {
  position:relative;
  background:radial-gradient(ellipse at 50% 75%,#002e511f,transparent 80%)
}

main:after {
  content:"";
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:83px;
  background:#00466a4d;
  clip-path:polygon(0 4%,8% 25%,16% 61%,24% 91%,80% 96%,88% 63%,95% 23%,100% 3%,100% 100%,0 100%);
  pointer-events:none
}

a:focus-visible,button:focus-visible,input:focus-visible {
  outline:3px solid #70edff;
  outline-offset:5px
}

#card-games,#about {
  scroll-margin-top:20px
}

@media(max-width:1250px) {
  .brand {
    font-size:25px
  }

  nav {
    gap:12px
  }

  .nav-inner {
    gap:15px
  }

  .search-toggle {
    margin-left:0
  }

  .hero h1 {
    font-size:76px
  }

  .hero-copy {
    width:455px
  }

  .hero-art {
    left:390px;
    width:780px
  }

  .hero-benefits {
    grid-template-columns:218px 250px
  }

  .game-copy {
    padding-inline:18px
  }

  .game-copy p {
    font-size:14px
  }

  .benefits-row .benefit {
    padding-left:20px;
    gap:9px
  }

  .benefit strong {
    font-size:14px
  }

  .benefits-row span {
    font-size:13px
  }

  .benefits-row .icon {
    width:44px
  }

}

@media(max-width:1000px) {
  .container {
    width:calc(100% - 48px)
  }

  .navbar {
    height:72px
  }

  .brand {
    font-size:25px
  }

  .brand img {
    width:61px
  }

  .nav-inner {
    gap:16px
  }

  nav {
    gap:4px
  }

  nav a {
    font-size:14px;
    padding-inline:6px
  }

  .hero {
    height:770px
  }

  .hero-inner {
    display:flex;
    flex-direction:column;
    align-items:center
  }

  .hero-copy {
    padding-top:38px;
    width:100%;
    text-align:center
  }

  .hero h1 {
    font-size:76px;
    line-height:.97
  }

  .hero h1 br {
    display:none
  }

  .hero-copy>p {
    max-width:none;
    font-size:22px;
    margin:18px auto
  }

  .hero-benefits {
    display:flex;
    justify-content:center;
    gap:20px
  }

  .hero-benefits .benefit {
    gap:7px;
    text-align:left
  }

  .hero-benefits .icon {
    width:45px;
    height:45px;
    padding:7px
  }

  .hero-benefits span {
    font-size:12px
  }

  .hero-art {
    top:300px;
    left:50%;
    transform:translateX(-50%);
    width:830px;
    height:440px
  }

  .hero-waves {
    height:125px
  }

  .section-heading {
    margin-top:5px
  }

  .game-grid {
    grid-template-columns:repeat(2,1fr);
    gap:20px
  }

  .game-card {
    height:320px
  }

  .game-art {
    height:215px
  }

  .available .game-art {
    height:178px
  }

  .available .game-art>img {
    height:228px
  }

  .game-copy p {
    font-size:16px
  }

  .benefits-row {
    grid-template-columns:repeat(2,1fr);
    gap:26px
  }

  .benefits-row .benefit {
    padding:0!important;
    gap:16px
  }

  .benefits-row .benefit:before {
    display:none
  }

  .benefits-row strong {
    font-size:16px
  }

  .benefits-row span {
    font-size:15px
  }

}

@media(max-width:700px) {
  .container {
    width:calc(100% - 36px)
  }

  .navbar {
    height:69px
  }

  .brand {
    font-size:22px;
    gap:0;
    letter-spacing:-.8px
  }

  .brand img {
    width:54px;
    height:52px
  }

  .nav-inner {
    gap:10px
  }

  .menu-toggle {
    display:flex;
    flex-direction:column;
    gap:5px;
    background:none;
    border:0;
    padding:8px;
    margin-left:auto;
    color:white
  }

  .menu-toggle span {
    display:block;
    width:21px;
    height:2px;
    background:#b8e6ff;
    border-radius:2px
  }

  .search-toggle .icon {
    width:25px;
    height:25px
  }

  nav {
    display:none;
    position:absolute;
    top:68px;
    left:-18px;
    right:-18px;
    background:#09283f;
    padding:16px;
    margin:0;
    box-shadow:0 12px 20px #00152280;
    gap:8px
  }

  nav.open {
    display:flex;
    flex-direction:column;
    align-items:stretch
  }

  nav a {
    font-size:16px;
    padding:10px 14px
  }

  nav .active {
    border-radius:10px
  }

  .search-form {
    top:65px;
    width:min(310px,100%)
  }

  .search-form input {
    width:100%
  }

  .hero {
    height:650px
  }

  .hero-copy {
    padding-top:35px
  }

  .hero h1 {
    font-size:57px;
    letter-spacing:-2px;
    line-height:.97
  }

  .hero h1 br {
    display:block
  }

  .hero-copy>p {
    max-width:330px;
    font-size:19px;
    line-height:1.4;
    margin:18px auto
  }

  .hero-benefits {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    max-width:370px;
    margin:auto
  }

  .hero-benefits .benefit:last-child {
    grid-column:1/-1;
    justify-content:center
  }

  .hero-benefits .benefit strong {
    font-size:13px
  }

  .hero-benefits .icon {
    width:40px;
    height:40px
  }

  .hero-art {
    top:353px;
    width:545px;
    height:289px;
    left:49%
  }

  .hero-waves {
    height:90px
  }

  .section-heading {
    gap:12px;
    margin-bottom:18px
  }

  .section-heading h2 {
    font-size:29px
  }

  .section-heading p {
    font-size:16px
  }

  .section-heading .icon {
    width:46px
  }

  .game-grid {
    grid-template-columns:1fr;
    gap:18px
  }

  .game-card {
    height:325px;
    max-width:420px;
    width:100%;
    margin:auto
  }

  .available .game-art {
    height:180px
  }

  .available .game-art>img {
    height:236px
  }

  .game-art {
    height:219px
  }

  .game-copy {
    padding-inline:24px
  }

  .available .game-copy {
    padding-inline:23px
  }

  .available h3 {
    font-size:32px
  }

  .game-copy p {
    font-size:16px
  }

  .locked-message {
    top:100px
  }

  .benefits-row {
    grid-template-columns:1fr;
    gap:25px;
    margin:35px auto 0;
    max-width:340px
  }

  .benefits-row .benefit {
    gap:18px
  }

  .benefits-row .icon {
    width:49px
  }

  .lower-content {
    padding-bottom:40px
  }

}

@media(max-width:370px) {
  .brand {
    font-size:19px
  }

  .brand img {
    width:47px
  }

  .nav-inner {
    gap:5px
  }

  .hero h1 {
    font-size:51px
  }

  .hero-benefits .benefit {
    gap:4px
  }

  .hero-benefits .icon {
    width:34px;
    height:34px;
    padding:6px
  }

  .hero-benefits .benefit strong {
    font-size:12px
  }

  .hero-benefits .benefit span {
    font-size:11px
  }

  .hero-art {
    width:510px
  }

  .game-copy p {
    font-size:14px
  }

}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }

}

/* Fine alignment against the supplied desktop composition. */
@media(min-width:1001px) {
  .lower-content {
    padding-bottom:36px
  }

  .section-heading {
    margin-bottom:10px
  }

  .hero h1 {
    font-family:"Arial Black","Segoe UI",sans-serif;
    font-size:86px;
    letter-spacing:-3px
  }

  .hero-copy>p {
    max-width:390px
  }

  .brand {
    font-size:31px;
    letter-spacing:-1px
  }

  .available .game-art>img {
    top:8px;
    height:184px
  }

  .hero-art {
    left:475px;
    width:805px
  }

  .hero-copy {
    padding-top:33px
  }

}

@media(max-width:700px) {
  .hero-art {
    width:100%;
    height:auto;
    top:370px;
    left:50%
  }

  .hero {
    height:600px
  }

  .hero-waves {
    height:80px
  }

}

/* Avoid decorative borders on the shared circular brand icon. */
.hero-tagline {
  position:absolute;
  z-index:2;
  top:48px;
  right:-97px;
  width:125px;
  transform:rotate(-9deg);
  color:#8af2ff;
  font-family:"Segoe Print","Comic Sans MS",cursive;
  font-weight:700;
  font-size:32px;
  line-height:1.25
}

.hero-tagline span {
  display:block;
  white-space:nowrap
}

.hero-tagline svg {
  width:80px;
  height:26px;
  margin:7px 0 0 22px
}

.hero-art {
  width:780px;
  height:auto;
  left:484px;
  top:25px
}

.hero-copy>p {
  max-width:375px
}

@media(min-width:1001px) {
  .hero h1 {
    font-size:84px;
    line-height:.94
  }

}

@media(min-width:1001px) and (max-width:1250px) {
  .hero-art {
    left:420px;
    width:690px;
    top:38px
  }

  .hero-tagline {
    right:-10px;
    top:52px;
    font-size:27px
  }

}

@media(max-width:1000px) {
  .hero-art {
    width:770px;
    left:50%;
    top:320px
  }

  .hero-tagline {
    right:0;
    top:316px;
    font-size:27px
  }

}

@media(max-width:700px) {
  .hero-art {
    width:100%;
    left:50%;
    top:371px
  }

  .hero-tagline {
    right:0;
    top:340px;
    font-size:17px;
    width:74px
  }

  .hero-tagline svg {
    width:45px;
    height:15px;
    margin:0 0 0 14px
  }

}

@media(min-width:1251px) {
  .hero-art {
    left:464px;
    top:12px
  }

  .hero-tagline {
    right:-108px
  }

  nav,.search-toggle {
    transform:translateX(24px)
  }

}

@media(min-width:1001px) {
  .hero h1 {
    margin-bottom:14px
  }

  .hero-copy>p {
    max-width:350px;
    margin-bottom:26px
  }

  .hero-benefits {
    grid-template-columns:245px 260px
  }

  .locked .game-art>img {
    opacity:.46
  }

}

@media(max-width:370px) {
  .brand {
    font-size:16px;
    letter-spacing:-.6px
  }

  .brand img {
    width:40px
  }

  .nav-inner {
    gap:2px
  }

  .menu-toggle {
    padding:6px
  }

  .search-toggle {
    padding:3px
  }

}