/* Site Games collectibles, achievements, progress, and unlock UI. */

/* Hidden Keroppi hunt */
#page {
  position: relative;
  z-index: 3;
}

.site-game-hidden-layer {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  -webkit-mask-image: radial-gradient(
    circle 120px at var(--hover-grid-x, -999px) var(--hover-grid-y, -999px),
    #000 0 66%,
    rgba(0, 0, 0, 0.94) 76%,
    rgba(0, 0, 0, 0.58) 88%,
    transparent 100%
  );
  mask-image: radial-gradient(
    circle 120px at var(--hover-grid-x, -999px) var(--hover-grid-y, -999px),
    #000 0 66%,
    rgba(0, 0, 0, 0.94) 76%,
    rgba(0, 0, 0, 0.58) 88%,
    transparent 100%
  );
  transition: opacity 180ms ease;
}

.site-game-hidden-layer.is-active {
  opacity: 1;
}

/* Full-height grid sweep */
.site-game-hidden-layer.is-grid-sweep {
  --site-game-sweep-half-width: 170px;
  transition: none;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent calc(var(--site-game-sweep-x, -999px) - 170px),
    rgba(0, 0, 0, 0.25) calc(var(--site-game-sweep-x, -999px) - 153px),
    #000 calc(var(--site-game-sweep-x, -999px) - 136px),
    #000 calc(var(--site-game-sweep-x, -999px) + 136px),
    rgba(0, 0, 0, 0.25) calc(var(--site-game-sweep-x, -999px) + 153px),
    transparent calc(var(--site-game-sweep-x, -999px) + 170px)
  );
  mask-image: linear-gradient(
    to right,
    transparent calc(var(--site-game-sweep-x, -999px) - 170px),
    rgba(0, 0, 0, 0.25) calc(var(--site-game-sweep-x, -999px) - 153px),
    #000 calc(var(--site-game-sweep-x, -999px) - 136px),
    #000 calc(var(--site-game-sweep-x, -999px) + 136px),
    rgba(0, 0, 0, 0.25) calc(var(--site-game-sweep-x, -999px) + 153px),
    transparent calc(var(--site-game-sweep-x, -999px) + 170px)
  );
}

.grid-ripple-sweep {
  position: fixed;
  left: 0;
  top: 0;
  width: 340px;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  will-change: transform;
  -webkit-mask-image: linear-gradient(to right, transparent 0, rgba(0, 0, 0, 0.55) 17px, #000 34px, #000 calc(100% - 34px), rgba(0, 0, 0, 0.55) calc(100% - 17px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, rgba(0, 0, 0, 0.55) 17px, #000 34px, #000 calc(100% - 34px), rgba(0, 0, 0, 0.55) calc(100% - 17px), transparent 100%);
  background-image:
    linear-gradient(to right, #000 0 var(--pixel-stroke, 3px), transparent var(--pixel-stroke, 3px)),
    linear-gradient(to bottom, #000 0 var(--pixel-stroke, 3px), transparent var(--pixel-stroke, 3px));
  background-size: 34px 100%, 100% 34px;
  background-position: var(--grid-sweep-offset-x, 0) 0, 0 0;
  background-repeat: repeat-x, repeat-y;
}


/* Keroppi reveal ripple bg */
@property --site-game-ripple-radius {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

.site-game-hidden-layer.site-game-ripple-reveal {
  --site-game-ripple-radius: 0px;
  opacity: 1 !important;
  transition: none;
  -webkit-mask-image: radial-gradient(
    circle at var(--site-game-ripple-x) var(--site-game-ripple-y),
    transparent 0 calc(var(--site-game-ripple-radius) - var(--site-game-ripple-band)),
    #000 calc(var(--site-game-ripple-radius) - var(--site-game-ripple-band)) calc(var(--site-game-ripple-radius) + var(--site-game-ripple-band)),
    transparent calc(var(--site-game-ripple-radius) + var(--site-game-ripple-band)) 100%
  );
  mask-image: radial-gradient(
    circle at var(--site-game-ripple-x) var(--site-game-ripple-y),
    transparent 0 calc(var(--site-game-ripple-radius) - var(--site-game-ripple-band)),
    #000 calc(var(--site-game-ripple-radius) - var(--site-game-ripple-band)) calc(var(--site-game-ripple-radius) + var(--site-game-ripple-band)),
    transparent calc(var(--site-game-ripple-radius) + var(--site-game-ripple-band)) 100%
  );
  animation: none;
}

@keyframes site-game-ripple-reveal {
  from { --site-game-ripple-radius: 0px; }
  to { --site-game-ripple-radius: var(--site-game-ripple-end-radius); }
}

.site-game-target {
  position: absolute;
  width: 72px;
  height: 68px;
  object-fit: contain;
  opacity: 1;
  filter: contrast(1.08) drop-shadow(0 0 3px rgba(255, 255, 255, 0.85));
  transform: translate(-50%, -50%) rotate(var(--site-game-target-rotation, 0deg));
  transform-origin: 50% 50%;
  user-select: none;
}

.site-game-target.is-found {
  display: none;
}

/* Progress sections and collectible cards */
.site-game-progress {
  margin: 1.2em 0;
  padding: 0.85em 1em;
  border: var(--pixel-stroke, 3px) solid var(--pure-black-color);
  border-radius: 1em;
  background: var(--texture-light), var(--bg-color2);
  color: var(--text-color, #372558);
  text-align: center;
  font-family: decoder;
}

[data-site-game-progress] > h2,
[data-site-game-achievements] > h2 {
  display: block;
  width: auto;
  margin: 0.83em 0;
  padding: 0.35em 0.5em 0.25em;
  border: var(--pixel-stroke, 3px) solid var(--button-color);
  border-radius: 0.5em;
  background-color: var(--favorite-color);
  background-image: var(--texture-light);
  color: var(--text-color, #372558);
  font-size: 26px;
  line-height: 1;
}

.site-game-collection {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 1.2em 0;
}

.site-game-card {
  min-height: 150px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  justify-items: center;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border: var(--pixel-stroke, 3px) solid var(--pure-black-color);
  border-radius: 1em;
  background-color: var(--bg-color2);
  background-image: var(--texture-light);
  color: var(--text-color, #372558);
  text-align: center;
}

.site-game-card__location {
  width: 100%;
  font-family: neo;
  line-height: 1;
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 0.14em;
}

.site-game-card__status {
  font-family: decoder;
}

.site-game-card__image-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: fit-content;
  margin-inline: auto;
  padding: 3px;
  overflow: hidden;
  border: var(--pixel-stroke, 3px) solid var(--pure-black-color, #111);
  border-radius: 0.55em;
  background-color: var(--bg-color, #fff);
  background-image: var(--texture-mid, none);
}

.site-game-card__image-frame img,
.site-game-card img {
  display: block;
  width: 86px;
  height: 78px;
  padding: 0;
  border: 0;
  border-radius: 0.35em;
  background: transparent;
  object-fit: contain;
  opacity: 1;
}

.site-game-card:not(.is-found) .site-game-card__image-frame img {
  filter: brightness(0) saturate(100%);
}

.site-game-card.is-found .site-game-card__image-frame img {
  filter: none;
}

/* Interaction achievements */
.site-game-achievements {
  margin-top: 2em;
}

.site-game-achievement-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 1.2em 0;
}

.site-game-achievement-card {
  min-height: 145px;
  opacity: 1;
}

.site-game-achievement-card > p {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0em 0.8em;
  border: var(--pixel-stroke, 3px) solid var(--pure-black-color, #111);
  border-radius: 0.65em;
  background-color: var(--bg-color, #fff);
  background-image: var(--texture-mid, none);
  color: var(--text-color, #372558);
  opacity: 1;
  user-select: none;
}

.site-game-achievement-spoiler {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  height: 4.5em;
  min-height: 4.5em;
  overflow: hidden;
  cursor: pointer;
  outline: none;
  transition: filter 220ms ease;
}

.site-game-achievement-spoiler:hover {
  filter: brightness(0.92);
}

.site-game-achievement-hint__text {
  display: inline;
  color: inherit;
  opacity: 1;
  filter: blur(4px);
  transition: filter 220ms ease;
  pointer-events: none;
}

.site-game-achievement-spoiler::after {
  content: "Click for spoilers";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 0.65em 0.8em;
  box-sizing: border-box;
  background-color: color-mix(in srgb, var(--bg-color, #fff) 90%, transparent);
  background-image: var(--texture-mid, none);
  color: var(--text-color, #372558);
  font-family: "Neo", monospace;
  font-weight: bold;
  text-align: center;
  text-shadow: 0 1px 0 var(--bg-color, #fff);
  opacity: 1;
  transition: opacity 220ms ease;
  pointer-events: none;
}

.site-game-achievement-spoiler:focus-visible {
  box-shadow: 0 0 0 3px var(--accent-color, #79a94b);
}

.site-game-achievement-spoiler.is-revealed .site-game-achievement-hint__text {
  filter: blur(0);
  pointer-events: auto;
}

.site-game-achievement-spoiler.is-revealed::after {
  opacity: 0;
}

.site-game-achievement-spoiler.is-revealed {
  user-select: text;
}


/* Overall completion */
.site-game-overall-progress {
  margin-top: 24px;
  padding: 16px;
  border: var(--pixel-stroke, 3px) solid var(--pure-black-color, #111);
  border-radius: 1em;
  background-color: var(--bg-color, #fff);
  background-image: var(--texture-mid, none);
  color: var(--text-color, #372558);
  text-align: center;
}

.site-game-overall-progress__title,
.site-game-overall-progress__value {
  display: block;
  font-family: "Neo", monospace;
}

.site-game-overall-progress__title {
  margin: 0 0 8px;
  padding: 0.35em 0.5em 0.25em;
  border: var(--pixel-stroke, 3px) solid var(--button-color);
  border-radius: 0.5em;
  background-color: var(--favorite-color);
  background-image: var(--texture-light);
  color: var(--text-color, #372558);
  font-size: 26px;
  line-height: 1;
}

.site-game-overall-progress__value {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0 0.65em;
  padding-top: 2px;
  box-sizing: border-box;
  text-align: center;
  color: var(--text-color, #372558);
  font-size: 1em;
  font-weight: bold;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}

.site-game-overall-progress__bar {
  position: relative;
  width: 100%;
  height: 38px;
  overflow: hidden;
  border: var(--pixel-stroke, 3px) solid var(--pure-black-color, #111);
  border-radius: 999px;
  background-color: var(--bg-color, #fff);
  box-sizing: border-box;
}

.site-game-overall-progress__fill {
  --site-game-progress: 0%;
  --site-game-progress-colour: #c73c3c;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to right,
    var(--site-game-progress-colour) 0,
    var(--site-game-progress-colour) var(--site-game-progress),
    transparent var(--site-game-progress),
    transparent 100%
  );
  transition: background 300ms ease;
}

.site-game-overall-progress__fill.is-red { --site-game-progress-colour: #c73c3c; }
.site-game-overall-progress__fill.is-red-orange { --site-game-progress-colour: #d96a32; }
.site-game-overall-progress__fill.is-orange { --site-game-progress-colour: #e08b2f; }
.site-game-overall-progress__fill.is-orange-yellow { --site-game-progress-colour: #dfaa2d; }
.site-game-overall-progress__fill.is-yellow { --site-game-progress-colour: #d7b72c; }
.site-game-overall-progress__fill.is-yellow-green { --site-game-progress-colour: #91aa32; }
.site-game-overall-progress__fill.is-green { --site-game-progress-colour: #5a9d36; }

/* Reset button */
.site-game-reset-wrap {
  display: flex;
  justify-content: center;
  margin-top: 1.2em;
}

.site-game-reset-button {
  appearance: none;
  margin: 0;
  padding: 0.28em 0.48em;
  border: 2px solid var(--guestbook-border, var(--pure-black-color, #111));
  border-radius: var(--guestbook-inner-radius, 0.45em);
  background: #e60000;
  color: var(--pure-black-color, #111);
  font: inherit;
  font-family: "Neo", monospace;
  font-size: 1em;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: filter 140ms ease;
}

.site-game-reset-button:hover,
.site-game-reset-button:focus-visible {
  filter: brightness(1.1);
  outline: none;
}

/* Unlock popup */
.site-game-unlock-popup {
  position: fixed;
  top: 34px;
  left: calc(var(--background-canvas-left, 0px) + 34px);
  z-index: 2147483646;
  width: 237px;
  height: 75px;
  padding: 12px 16px;
  border: var(--pixel-stroke, 3px) solid var(--pure-black-color, #111);
  border-radius: 1em;
  background-color: var(--bg-color, #fff);
  background-image: var(--texture-mid, none);
  color: var(--pure-black-color, #111);
  box-shadow: var(--button-color) 8px 8px 20px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 750ms ease;
  text-align: center;
}

.site-game-unlock-popup.is-visible {
  opacity: 1;
  animation: site-game-popup-in 300ms ease;
}

/* Keep the normal coloured shadow everywhere except over the open lightbox. */
body:has(#lightbox[style*="display: flex"]) .site-game-unlock-popup {
  box-shadow: #000 8px 8px 20px;
}

@keyframes site-game-popup-in {
  from { transform: translateY(-8px) scale(0.97); }
  to { transform: translateY(0) scale(1); }
}

.site-game-unlock-popup__eyebrow,
.site-game-unlock-popup__title {
  display: block;
  font-family: "Neo", monospace;
}

.site-game-unlock-popup__eyebrow {
  width: fit-content;
  margin: 0 auto 8px;
  padding: 0.28em 0.48em 0.22em;
  border: var(--pixel-stroke, 3px) solid var(--button-color, #372558);
  border-radius: 0.45em;
  background-color: var(--favorite-color, #fff);
  background-image: var(--texture-light, none);
  color: var(--text-color, #372558);
  font-size: 1.05em;
  line-height: 1;
  text-transform: uppercase;
}

.site-game-unlock-popup__title {
  padding-top: 10px;
  font-size: 1.2em;
}

@media (max-width: 700px) and (hover: none) and (pointer: coarse) {
  .site-game-collection {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-game-achievement-list {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-game-unlock-popup,
  .site-game-overall-progress__fill,
  .site-game-achievement-hint__text {
    transition: none;
  }
}


/* Unlocked achievements permanently reveal their hints. */
.site-game-achievement-card.is-found .site-game-achievement-hint__text {
  filter: blur(0);
  pointer-events: auto;
}

.site-game-achievement-card.is-found .site-game-achievement-spoiler::after {
  opacity: 0;
}

.site-game-achievement-card.is-found .site-game-achievement-spoiler {
  cursor: default;
  user-select: text;
}

/* Hall of Fame */
.site-game-hall-of-fame {
  width: 100%;
  margin: 24px auto 0;
  padding: 12px 14px;
  box-sizing: border-box;
  border: var(--pixel-stroke, 3px) solid var(--pure-black-color, #111);
  border-radius: 1em;
  background-color: var(--bg-color2, #fff);
  background-image: var(--texture-mid);
  color: var(--text-color, #372558);
  text-align: center;
}

.site-game-hall-of-fame > h2 {
  display: block;
  width: auto;
  margin: 0 0 0.45em;
  padding: 0.32em 0.5em 0.24em;
  border: var(--pixel-stroke, 3px) solid var(--button-color);
  border-radius: 0.5em;
  background-color: var(--favorite-color);
  background-image: var(--texture-light);
  color: var(--text-color, #372558);
  font-size: 26px;
  line-height: 1;
}

.site-game-hall-of-fame__intro {
  margin: 0 0 0.65em;
  font-family: "Neo", monospace;
}

.site-game-hall-of-fame__locked {
  margin: 0 auto 0.65em;
  font-size: 1em;
}

.site-game-hall-of-fame__locked[hidden],
.site-game-hall-of-fame__form[hidden] {
  display: none;
}

.site-game-hall-of-fame__locked.is-inducted {
  opacity: 1;
}

.site-game-hall-of-fame__form {
  max-width: 340px;
  margin: 0 auto 0.65em;
}

.site-game-hall-of-fame__entry {
  display: flex;
  gap: 8px;
}

.site-game-hall-of-fame__entry input,
.site-game-hall-of-fame__entry button {
  min-height: 2.1em;
  box-sizing: border-box;
  border: 2px solid var(--pure-black-color, #111);
  border-radius: 0.5em;
  font: inherit;
}

.site-game-hall-of-fame__entry input {
  min-width: 0;
  flex: 1;
  padding: 0.3em 0.55em;
  background-color: var(--bg-color, #fff);
  background-image: var(--texture-light);
  color: var(--text-color, #372558);
  cursor: none !important;
}

.site-game-hall-of-fame__entry button {
  padding: 0.3em 0.8em;
  background: var(--button-color, #79a94b);
  color: var(--pure-black-color, #111);
  font-family: "Neo", monospace;
  cursor: pointer;
}

.site-game-hall-of-fame__entry button:disabled {
  cursor: wait;
  opacity: 0.6;
}

.site-game-hall-of-fame__status {
  min-height: 0;
  margin: 0.35em 0;
  font-size: 1em;
}

.site-game-hall-of-fame__status:empty {
  display: none;
}

.site-game-hall-of-fame__status.is-error {
  color: #b00020;
  font-weight: bold;
}

.site-game-hall-of-fame__list {
  display: grid;
  gap: 0.35em;
  margin: 0.65em auto 0;
  padding: 0;
  font-size: 1.2em;
  list-style: none;
  text-align: left;
}

.site-game-hall-of-fame__item {
  display: grid;
  grid-template-columns: 2.7em minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5em;
  padding: 0.45em 0.6em;
  border: 3px solid var(--pure-black-color, #111);
  border-radius: 0.55em;
  background-color: var(--bg-color, #fff);
  background-image: var(--texture-light);
}

.site-game-hall-of-fame__position,
.site-game-hall-of-fame__name {
  font-family: "Neo", monospace;
}

.site-game-hall-of-fame__position {
  text-align: center;
}

.site-game-hall-of-fame__name {
  overflow-wrap: anywhere;
}

.site-game-hall-of-fame__date {
  white-space: nowrap;
  font-size: 0.9em;
}

.site-game-hall-of-fame__empty,
.site-game-hall-of-fame__loading {
  padding: 0.55em;
  text-align: center;
}

@media (max-width: 560px) {
  .site-game-hall-of-fame__entry {
    flex-direction: column;
  }

  .site-game-hall-of-fame__item {
    grid-template-columns: 2.7em minmax(0, 1fr);
  }

  .site-game-hall-of-fame__date {
    grid-column: 2;
  }
}

/* Site Games: texture-fill the eight uncollected Keroppi silhouettes only.
   Light mode uses the darkest dark-theme mottle; dark mode uses its lightest mottle. */
.site-game-card:not(.is-found) .site-game-card__image-frame {
  position: relative;
}

.site-game-card:not(.is-found) .site-game-card__image-frame img {
  opacity: 0;
  filter: none;
}

.site-game-card:not(.is-found) .site-game-card__image-frame::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 0.35em;
  background-color: #18241d;
  background-image: url("../pics/32mottledark3bg.webp");
  background-repeat: repeat;
  background-position: top left;
  pointer-events: none;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

.site-game-card[data-game-card="kero-1"]:not(.is-found) .site-game-card__image-frame::after {
  -webkit-mask-image: url("../keroppi emotes/keroppi head 1.webp");
  mask-image: url("../keroppi emotes/keroppi head 1.webp");
}
.site-game-card[data-game-card="kero-2"]:not(.is-found) .site-game-card__image-frame::after {
  -webkit-mask-image: url("../keroppi emotes/keroppi head 2.webp");
  mask-image: url("../keroppi emotes/keroppi head 2.webp");
}
.site-game-card[data-game-card="kero-3"]:not(.is-found) .site-game-card__image-frame::after {
  -webkit-mask-image: url("../keroppi emotes/keroppi head 3.webp");
  mask-image: url("../keroppi emotes/keroppi head 3.webp");
}
.site-game-card[data-game-card="kero-4"]:not(.is-found) .site-game-card__image-frame::after {
  -webkit-mask-image: url("../keroppi emotes/keroppi head 4.webp");
  mask-image: url("../keroppi emotes/keroppi head 4.webp");
}
.site-game-card[data-game-card="kero-5"]:not(.is-found) .site-game-card__image-frame::after {
  -webkit-mask-image: url("../keroppi emotes/keroppi head 5.webp");
  mask-image: url("../keroppi emotes/keroppi head 5.webp");
}
.site-game-card[data-game-card="kero-6"]:not(.is-found) .site-game-card__image-frame::after {
  -webkit-mask-image: url("../keroppi emotes/keroppi head 6.webp");
  mask-image: url("../keroppi emotes/keroppi head 6.webp");
}
.site-game-card[data-game-card="kero-8"]:not(.is-found) .site-game-card__image-frame::after {
  -webkit-mask-image: url("../keroppi emotes/keroppi head 8.webp");
  mask-image: url("../keroppi emotes/keroppi head 8.webp");
}
.site-game-card[data-game-card="kero-9"]:not(.is-found) .site-game-card__image-frame::after {
  -webkit-mask-image: url("../keroppi emotes/keroppi head 9.webp");
  mask-image: url("../keroppi emotes/keroppi head 9.webp");
}

html[data-theme="dark"] .site-game-card:not(.is-found) .site-game-card__image-frame::after {
  background-color: #18241d;
  background-image: url("../pics/32mottledark3bg.webp");
}