/* Styles for the homepage only (index.php): the 3D games showcase, driven by games.js; the
   open-source row under it; and, at the end, the rules that line the page up in one column.
   No other page loads this file. */

/* Registered so the glow under the Play button can fade from one game's colour to the next. */
@property --games-glow {
  syntax: '<color>';
  inherits: true;
  initial-value: rgba(255, 176, 74, 0.3);
}

.games {
  --games-accent: #ffc35c;
  --games-ink: #1d1203;
  --games-glow: rgba(255, 176, 74, 0.3);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  grid-template-areas:
    "head   head"
    "screen info"
    "tabs   tabs";
  gap: 22px 30px;
  align-items: center;
  margin: 0 0 30px;
  padding: 28px;
  border-radius: 14px;
  /* The same charcoal as the menu buttons (.sitemenu li.unselected in responsive/css/custom.css). */
  background: #303030;
  color: #e9edf5;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  text-align: left;
  box-shadow: 0 10px 30px rgba(8, 12, 24, 0.28);
  transition: --games-glow 0.6s ease;
  overflow: hidden;
}

.games[data-active="botgrid"] {
  --games-accent: #2ae3ff;
  --games-ink: #04121c;
  --games-glow: rgba(64, 120, 255, 0.34);
}

.games[data-active="jollyroger"] {
  --games-accent: #f6e8c9;
  --games-ink: #0d1b2b;
  --games-glow: rgba(46, 138, 214, 0.36);
}

/* Heading */
.games-head {
  grid-area: head;
}

.games-kicker {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--games-accent);
  transition: color 0.4s ease;
}

.games h2 {
  margin: 0;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: #fff;
}

.games-sub {
  margin: 8px 0 0;
  font-size: 16px;
  line-height: 1.5;
  color: #bdbdbd;
}

/* The video */
.games-screen {
  grid-area: screen;
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 18px 50px rgba(0, 0, 0, 0.55);
}

.games-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.games-video.is-on {
  opacity: 1;
}

/* The whole picture is a link to the game on show. */
.games-screen-link {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.games-pause {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(6, 9, 16, 0.6);
  color: #fff;
  cursor: pointer;
  opacity: 0.75;
  transition: opacity 0.2s ease, background 0.2s ease;
}

.games-pause:hover,
.games-pause:focus-visible {
  opacity: 1;
  background: rgba(6, 9, 16, 0.85);
}

.games-pause svg {
  display: block;
  width: 18px;
  height: 18px;
  margin: 0 auto;
  fill: currentColor;
}

.games-pause .icon-play,
.games-pause.is-paused .icon-pause {
  display: none;
}

.games-pause.is-paused .icon-play {
  display: block;
}

/* Words about the game on show. The three panels share one grid cell, so the box is always as
   tall as the longest one and nothing below it moves when the game changes. */
.games-info {
  grid-area: info;
  display: grid;
}

.games-panel {
  grid-area: 1 / 1;
  align-self: center;
}

.games.is-live .games-panel {
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s linear 0.35s;
}

.games.is-live .games-panel.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.games-kind {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--games-accent);
}

.games h3 {
  margin: 0 0 10px;
  font-size: 38px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #fff;
}

.games-pitch {
  margin: 0 0 14px;
  font-size: 16px;
  line-height: 1.55;
  color: #d6d6d6;
}

.games-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}

.games-facts li {
  padding: 4px 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  font-size: 13px;
  line-height: 1.4;
  color: #d6d6d6;
  white-space: nowrap;
}

.games .games-play,
.games .games-play:visited {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 22px;
  border-radius: 10px;
  background: var(--games-accent);
  color: var(--games-ink);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 6px 22px var(--games-glow);
  transition: transform 0.15s ease, filter 0.15s ease;
}

.games .games-play:hover,
.games .games-play:focus {
  color: var(--games-ink);
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.games-play-arrow {
  flex: none;
  transition: transform 0.15s ease;
}

.games .games-play:hover .games-play-arrow {
  transform: translateX(3px);
}

.games-note {
  margin: 10px 0 0;
  font-size: 13px;
  color: #a8a8a8;
}

/* The three tabs */
.games-tabs {
  grid-area: tabs;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

/* Without the script there is nothing to switch, and the panels above each carry their own link. */
.games:not(.is-live) .games-tabs,
.games:not(.is-live) .games-pause {
  display: none;
}

.games:not(.is-live) .games-info {
  display: block;
}

.games:not(.is-live) .games-panel + .games-panel {
  margin-top: 26px;
}

.games-tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  color: #d6d6d6;
  font: inherit;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.games-tab:hover {
  background: rgba(255, 255, 255, 0.09);
}

.games-tab.is-on {
  border-color: var(--games-accent);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.games-tab:focus-visible,
.games-pause:focus-visible,
.games .games-play:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.games-tab img {
  flex: none;
  width: 112px;
  height: 63px;
  border-radius: 6px;
  object-fit: cover;
}

.games-tab-text {
  min-width: 0;
}

.games-tab-name {
  display: block;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
}

.games-tab-kind {
  display: block;
  font-size: 13px;
  line-height: 1.3;
  color: #c8c8c8;
}

/* Fills as the clip plays, so it is plain when the next game is coming. */
.games-tab-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--games-accent);
  transform: scaleX(0);
  transform-origin: left center;
}

/* Narrower desktops: smaller tab pictures, so each tab's words still fit beside its picture. */
@media (max-width: 1099px) {
  .games-tab img {
    width: 88px;
    height: 50px;
  }
}

/* Tablets and small laptops: the words go under the video. */
@media (max-width: 899px) {
  .games {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "head"
      "screen"
      "tabs"
      "info";
    gap: 16px;
    padding: 20px;
  }

  .games h2 {
    font-size: 26px;
  }

  .games h3 {
    font-size: 32px;
  }
}

/* Phones: the video runs edge to edge, and each tab is a picture with a name under it. */
@media (max-width: 599px) {
  .games {
    margin-bottom: 20px;
    padding: 18px 14px 20px;
    border-radius: 12px;
  }

  .games h2 {
    font-size: 23px;
  }

  .games-sub {
    font-size: 15px;
  }

  .games-screen {
    margin: 0 -14px;
    border-radius: 0;
    aspect-ratio: 4 / 3;
  }

  .games-tabs {
    gap: 8px;
  }

  .games-tab {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 5px 5px 9px;
  }

  .games-tab img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }

  .games-tab-name {
    font-size: 13px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .games-tab-kind {
    display: none;
  }

  .games h3 {
    font-size: 30px;
  }

  .games .games-play {
    display: flex;
    justify-content: center;
  }

  .games-note {
    text-align: center;
  }
}

/* The open-source row: two project cards side by side, in the same white box and grey cards
   as the blog below it. */
.home-open {
  margin: 0 0 30px;
  text-align: left;
}

.home-open-sub {
  margin: -8px 0 20px;
}

.home-open-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.home-open-card {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 20px;
  border-radius: 8px;
  background-color: #f8f8f8;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.home-open-top {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
}

.home-open-icon {
  flex: none;
  width: 72px;
  height: 72px;
  border-radius: 22%;
}

.home-open-card h3 {
  margin: 0 0 2px;
  font-size: 22px;
  font-weight: 700;
  color: #2c3e50;
}

.home-open-kind {
  margin: 0;
  font-size: 14px;
  color: #666;
}

.home-open-about {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.6;
}

.home-open-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}

.home-open-facts li {
  padding: 3px 10px;
  border: 1px solid #d5d5d5;
  border-radius: 999px;
  background: #fff;
  font-size: 13px;
  line-height: 1.4;
  color: #555;
}

/* Pushed to the bottom of the card, so the two links sit level whatever the text above. */
.home-open .home-open-link,
.home-open .home-open-link:visited {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  margin-top: auto;
  padding: 9px 16px;
  border-radius: 6px;
  background: #303030;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.home-open .home-open-link:hover,
.home-open .home-open-link:focus {
  background: #000;
  color: #fff;
}

@media (max-width: 767px) {
  .home-open {
    margin-bottom: 20px;
  }

  .home-open-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Wide screens: the menu at the top, the games, the blog and the footer share one column, so
   their edges line up. Only the homepage loads this file, so the other pages keep the menu as
   it was. */

/* The footer sits outside the page's .container; give it the same box (970px, then 1170px,
   with 20px of padding, as Bootstrap and header.php give .container). */
@media (min-width: 992px) {
  footer {
    width: 970px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 0 20px;
  }
}

/* From here up the menu fits on one row. The buttons keep their own widths and the spare room
   goes between them, so the first and last sit on the column's edges. (Stretching the buttons
   themselves made "Open Source", already the longest, look oversized.)
   "clear" keeps the footer's copy below the floated blocks that come before it there. */
@media (min-width: 1200px) {
  footer {
    width: 1170px;
  }

  .sitemenu {
    display: flex;
    justify-content: space-between;
    padding: 1em 0;
    clear: both;
  }

  .sitemenu li.selected,
  .sitemenu li.unselected {
    flex: 0 0 auto;
    margin: 0;
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .games,
  .games-video,
  .games-kicker,
  .games.is-live .games-panel,
  .games .games-play,
  .games-play-arrow {
    transition: none;
  }
}