/* main menu */

body.channel-splash {
  background-color: black;
}

.main-menu {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transform-origin: center;
  margin: 0;
  transition:
    transform 900ms,
    opacity 400ms,
    background-color 900ms,
    visibility 900ms;
  opacity: 1;
  visibility: visible;
  background-image: url(../images/bg-pattern.png);
  background-color: lightgrey;
  width: var(--wii-menu-width);
  height: var(--wii-menu-height);
  container-type: size;
}

.main-menu.channel-splash {
  transform: translate(-50%, -50%) scale(4);
  opacity: 0;
  background-color: black;
  background-image: none !important;
  visibility: hidden;
}

.top-section {
  height: calc(100% - 219px);
  padding: 80px;
  padding-top: 3vh;
  padding-bottom: 0;
  box-sizing: border-box;
}

.bottom-section {
  height: 219px;
  background: var(--menu-surface-footer, #d2d6db);
  background-image: url(../images/bottom-bg.png);
}

.col {
  width: 24%;
  height: 100%;
  display: inline-block;
  box-sizing: border-box;
}

.col.first {
  margin-left: 20px;
}

.channel-icon {
  display: block;
  width: 20.2vw;
  height: 11.1vw;
  margin-top: 2vh;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}

.channel-icon.blank {
  background-image: url(../images/channel-spritesheet.png);
  background-size: calc(100% * 3) 100%;
}

.channel-icon.blank:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 20.2vw;
  height: 11.1vw;
  content: "";
  background-image: url(../images/channel-wiilogo.png);
  background-size: 100% 100%;
}

.channel-icon:after {
  position: absolute;
  top: 0;
  left: 0;
  width: 20.2vw;
  height: 11.1vw;
  content: "";
  background-image: url(../images/channel-border.png);
  background-size: 100% 100%;
}

.channel-icon.occupied .hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 20.2vw;
  height: 11.1vw;
  content: "";
  background-image: url(../images/channel-hover.png);
  background-size: 100% 100%;
  z-index: 99;
  opacity: 0;
  transition: 400ms ease;
  transform: scale(0.94);
}

.channel-icon.occupied .hover:hover {
  display: block;
  opacity: 1;
  transform: scale(1.02);
}

.channel-splash .channel-icon.blank {
  background-position: 0 0 !important;
}

.channel-splash .channel-icon.occupied .hover {
  display: none !important;
}

.channel-icon img {
  display: inherit;
  width: inherit;
  height: inherit;
  /* TODO: does not work in Edge/IE11 and has shoddy browser support */
  -webkit-clip-path: polygon(
    2% 7%,
    6% 2%,
    52% 1%,
    95% 3%,
    98% 8%,
    100% 49%,
    98% 92%,
    95% 97%,
    50% 99%,
    5% 97%,
    2% 93%,
    0 50%
  );
  clip-path: polygon(
    2% 7%,
    6% 2%,
    52% 1%,
    95% 3%,
    98% 8%,
    100% 49%,
    98% 92%,
    95% 97%,
    50% 99%,
    5% 97%,
    2% 93%,
    0 50%
  );
}

.bottom-title {
  background-image: url(../images/bottom-title.png);
  width: 1200px;
  height: 220px;
  margin-left: auto;
  margin-right: auto;
}

.left-button {
  position: absolute;
  bottom: 42px;
  left: 0;
  cursor: pointer;
  background-image: url(../images/left-button.png);
  width: 185px;
  height: 135px;
  background-size: 100% 100%;
}

.wii-button {
  background-image: url(../images/wii-button.png);
  width: 100px;
  height: 105px;
  position: absolute;
  bottom: 60px;
  left: 60px;
  background-size: 100% 100%;
}

.right-button {
  position: absolute;
  bottom: 42px;
  right: 0;
  cursor: pointer;
  background-image: url(../images/right-button.png);
  width: 185px;
  height: 135px;
  background-size: 100% 100%;
}

.mail-button {
  background-image: url(../images/mail-button.png);
  width: 100px;
  height: 105px;
  position: absolute;
  bottom: 60px;
  right: 60px;
  background-size: 100% 100%;
  z-index: 999;
}

.corner-button {
  transition: 300ms;
}

.corner-button:hover {
  transform: scale(1.1);
}

.date {
  position: absolute;
  color: #84868a;
  font-family: "Asap", sans-serif;
  bottom: 32px;
  left: 50%;
  transform: translate(-50%, 0);
  font-size: 40px;
  letter-spacing: -1px;
}

/* channel splash screen */

.splash-screen {
  position: absolute;
  box-sizing: border-box;
  height: 80vh;
  width: 100%;
  position: absolute;
  top: -80vh;
  left: 0;
  background-size: cover;
  transition:
    opacity 500ms ease,
    transform 500ms ease;
  opacity: 0;
  transform: scale(0.3);
}

.channel-splash .splash-screen {
  top: 0;
  opacity: 1;
  transform: scale(1);
}

/* TODO: splash bar animation comes from top for some reason in IE11 */

.splash-bar {
  height: 20vh;
  box-sizing: border-box;
  background-color: lightgrey;
  transition:
    bottom 500ms ease,
    opacity 500ms ease;
  border-top: solid 2px black;
  background-image: url(../images/splash-bar.png);
  position: absolute;
  z-index: 99;
  width: 100%;
  bottom: -20vh;
  left: 0;
  opacity: 0;
}

.channel-splash .splash-bar {
  bottom: 0;
  opacity: 1;
}

.border-topleft {
  background-image: url(../images/border-topleft.png);
  width: 306px;
  height: 230px;
  top: 0;
  left: 0;
  position: absolute;
  z-index: 9991;
}

.border-topright {
  background-image: url(../images/border-topright.png);
  width: 306px;
  height: 230px;
  top: 0;
  right: 0;
  position: absolute;
  z-index: 9992;
}

.border-bottomleft {
  background-image: url(../images/border-bottomleft.png);
  width: 306px;
  height: 230px;
  bottom: 0;
  left: 0;
  position: absolute;
  z-index: 9993;
}

.border-bottomright {
  background-image: url(../images/border-bottomright.png);
  width: 306px;
  height: 230px;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: 9994;
}

.border {
  display: none;
}

.channel-splash .border {
  display: block;
}

/* Keep the Wii 16:9 scene intact and scale every design measurement with its canvas. */
.top-section {
  height: calc(100% - 30.42cqb);
  padding: 6.25cqi;
  padding-top: 3cqb;
}

.bottom-section {
  position: relative;
  height: 30.42cqb;
  background-size: 100% 100%;
}

.col.first {
  margin-left: 0;
}
.channel-icon {
  width: 20.2cqi;
  height: 11.1cqi;
  margin-top: 2cqb;
}
.channel-icon.blank:before,
.channel-icon:after,
.channel-icon.occupied .hover {
  width: 20.2cqi;
  height: 11.1cqi;
}

.bottom-title {
  width: 93.75cqi;
  height: 100%;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.left-button {
  bottom: 5.83cqb;
  width: 14.45cqi;
  height: 18.75cqb;
}
.wii-button {
  bottom: 8.33cqb;
  left: 4.69cqi;
  width: 7.81cqi;
  height: 14.58cqb;
}
.right-button {
  bottom: 5.83cqb;
  width: 14.45cqi;
  height: 18.75cqb;
}
.mail-button {
  bottom: 8.33cqb;
  right: 4.69cqi;
  width: 7.81cqi;
  height: 14.58cqb;
}
.date {
  bottom: 4.44cqb;
  font-size: 3.125cqi;
}

.splash-screen {
  left: 50%;
  top: calc(50% - min(73.125vw, 130vh));
  width: var(--wii-menu-width);
  height: min(45vw, 80vh);
  transform: translateX(-50%) scale(0.3);
}

.channel-splash .splash-screen {
  top: calc(50% - min(28.125vw, 50vh));
  transform: translateX(-50%) scale(1);
}

.splash-bar {
  left: 50%;
  bottom: auto;
  top: calc(50% + min(16.875vw, 30vh));
  width: var(--wii-menu-width);
  height: min(11.25vw, 20vh);
  transform: translateY(100%);
}

.channel-splash .splash-bar {
  bottom: auto;
  transform: translateY(0);
}

.splash-buttons {
  width: 50cqi;
  padding-top: 4.1cqb;
  height: 100%;
}
.btn {
  height: 5cqi;
  width: 15cqi;
  margin-inline: 4.5cqi;
  font-size: clamp(12px, 2.2cqi, 28px);
  line-height: calc(4.5cqi + 5px);
}
.btn:before,
.btn:after {
  height: 5cqi;
  width: 2.2cqi;
}
.btn:before {
  left: -2.2cqi;
}
.btn:after {
  right: -2.2cqi;
}

.border-topleft,
.border-topright,
.border-bottomleft,
.border-bottomright {
  width: min(23.91vw, 42.506vh);
  height: min(17.966vw, 31.94vh);
}
.border-topleft {
  left: calc(50% - min(50vw, 88.8889vh));
  top: calc(50% - min(28.125vw, 50vh));
}
.border-topright {
  right: calc(50% - min(50vw, 88.8889vh));
  top: calc(50% - min(28.125vw, 50vh));
}
.border-bottomleft {
  left: calc(50% - min(50vw, 88.8889vh));
  bottom: calc(50% - min(28.125vw, 50vh));
}
.border-bottomright {
  right: calc(50% - min(50vw, 88.8889vh));
  bottom: calc(50% - min(28.125vw, 50vh));
}

.screen-message {
  display: none !important;
}

@supports (height: 1dvh) {
  .splash-screen {
    height: min(45dvw, 80dvh);
    top: calc(50% - min(73.125dvw, 130dvh));
  }
  .channel-splash .splash-screen {
    top: calc(50% - min(28.125dvw, 50dvh));
  }
  .splash-bar {
    height: min(11.25dvw, 20dvh);
    top: calc(50% + min(16.875dvw, 30dvh));
  }
  .border-topleft,
  .border-topright,
  .border-bottomleft,
  .border-bottomright {
    width: min(23.91dvw, 42.506dvh);
    height: min(17.966dvw, 31.94dvh);
  }
  .border-topleft {
    left: calc(50% - min(50dvw, 88.8889dvh));
    top: calc(50% - min(28.125dvw, 50dvh));
  }
  .border-topright {
    right: calc(50% - min(50dvw, 88.8889dvh));
    top: calc(50% - min(28.125dvw, 50dvh));
  }
  .border-bottomleft {
    left: calc(50% - min(50dvw, 88.8889dvh));
    bottom: calc(50% - min(28.125dvw, 50dvh));
  }
  .border-bottomright {
    right: calc(50% - min(50dvw, 88.8889dvh));
    bottom: calc(50% - min(28.125dvw, 50dvh));
  }
}

.splash-buttons {
  width: 50%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  padding-top: 4.1vh;
  height: 20vh;
  box-sizing: border-box;
}

/* changes for channel -> menu transition */

.splash-switch .main-menu {
  transition: transform 400ms;
}

.splash-switch .splash-screen {
  top: 0;
}

/* buttons */

.btn {
  background-image: url(../images/btn-texture.png);
  background-size: auto 100%;
  height: 5vw;
  width: 15vw;
  display: inline-block;
  position: relative;
  margin-left: 4.5vw;
  margin-right: 4.5vw;
  text-decoration: none;
  line-height: 100%;
  font-family: "Asap", sans-serif;
  color: #474747 !important;
  font-size: 2.2vw;
  line-height: calc(4.5vw + 5px);
  cursor:
    url(../images/cursor.png), auto !important; /* TODO: does not work in IE11, buggy in Chrome OS */
  transform: scale(1);
  transition: 150ms ease;
}

.btn:hover {
  transform: scale(1.1);
}

.btn:before {
  background-image: url(../images/btn-left.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  height: 5vw;
  width: 2.2vw;
  display: inline-block;
  content: "";
  position: absolute;
  left: -2.2vw;
}

.btn:after {
  background-image: url(../images/btn-right.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  height: 5vw;
  width: 2.2vw;
  display: inline-block;
  content: "";
  position: absolute;
  right: -2.2vw;
}

/* Unsupported display */

.screen-message {
  display: none;
  position: absolute;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  font-family: sans-serif;
  top: 20px;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  text-align: center;
}

.screen-message.hidden {
  visibility: none;
  top: 100vh;
}

.screen-message p {
  margin-top: 40px;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

@media only screen and (max-height: 469px),
  screen and (max-width: 1220px),
  screen and (width: 1280px) and (height: 1024px) {
  .screen-message {
    display: block !important;
  }
}

/* SFX */

.sfx {
  display: none;
}

/* Animation */

.channel-icon.blank {
  -webkit-animation: play 0.3s steps(3) infinite;
  -moz-animation: play 0.3s steps(3) infinite;
  -ms-animation: play 0.3s steps(3) infinite;
  -o-animation: play 0.3s steps(3) infinite;
  animation: play 0.3s steps(3) infinite;
}

@-webkit-keyframes play {
  from {
    background-position-x: 0px;
  }
  to {
    background-position-x: calc(100% * 3 - 1px);
  }
}

@-moz-keyframes play {
  from {
    background-position-x: 0px;
  }
  to {
    background-position-x: calc(100% * 3 - 1px);
  }
}

@-ms-keyframes play {
  from {
    background-position-x: 0px;
  }
  to {
    background-position-x: calc(100% * 3 - 1px);
  }
}

@-o-keyframes play {
  from {
    background-position-x: 0px;
  }
  to {
    background-position-x: calc(100% * 3 - 1px);
  }
}

@keyframes play {
  from {
    background-position-x: 0px;
  }
  to {
    background-position-x: calc(100% * 3 - 1px);
  }
}

/* mini mode */

@media only screen and (max-height: 718px) {
  .top-section {
    height: calc(100% - 130px);
  }

  .bottom-section {
    height: 130px;
    background-image: url(../images/mini-bottom-bg.png);
  }

  .left-button-container {
    transform: scale(0.6);
    transform-origin: left;
  }

  .right-button-container {
    transform: scale(0.6);
    transform-origin: right;
  }

  .left-button,
  .right-button {
    bottom: 180px;
  }

  .corner-button {
    bottom: 197px;
  }

  .bottom-title {
    transform-origin: top;
    transform: scale(0.65);
  }

  .date {
    font-size: 22px;
    bottom: 17px;
  }
}

@media only screen and (max-height: 826px) {
  .top-section {
    padding-top: 1em !important;
  }
}

@media only screen and (max-height: 640px) {
  .channels {
    transform: scale(0.9);
  }
}

/*
@media only screen and (max-height: 600px) {
  .channels {
    transform: scale(0.8);
		transform-origin: top;
  }
}

@media only screen and (max-height: 524px) {
  .channels {
    transform: scale(0.7);
		transform-origin: top;
  }
} */

/* widescreen fixes */

@media only screen and (min-width: 1720px) {
  .top-section {
    transform: scale(0.9);
    padding-top: 0em !important;
  }
}

/******************/
/*    testing     */
/* needs 2b moved */
/******************/

.channels {
  max-width: 1920px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

.main-menu > .wii-channel-webgpu {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.main-menu.wii-webgpu-active {
  background-image: none;
}

.main-menu.wii-webgpu-active .top-section,
.main-menu.wii-webgpu-active .bottom-section {
  position: relative;
  z-index: 1;
}

.main-menu.wii-webgpu-active .bottom-section {
  background: transparent !important;
}

.main-menu.wii-webgpu-active .channel-icon,
.main-menu.wii-webgpu-active .channel-icon:before,
.main-menu.wii-webgpu-active .channel-icon:after,
.main-menu.wii-webgpu-active .channel-icon .hover,
.main-menu.wii-webgpu-active .bottom-title,
.main-menu.wii-webgpu-active .left-button,
.main-menu.wii-webgpu-active .right-button,
.main-menu.wii-webgpu-active .wii-button,
.main-menu.wii-webgpu-active .mail-button {
  background-image: none !important;
}

.main-menu.wii-webgpu-active .channel-icon:before,
.main-menu.wii-webgpu-active .channel-icon:after {
  opacity: 0;
}

.channels.wii-webgpu-active .channel-icon img {
  opacity: 0;
}

@media only screen and (min-width: 1920px) {
  .channel-icon,
  .channel-icon *,
  .channel-icon:after,
  .channel-icon:before {
    width: 387px !important;
    height: 213px !important;
  }
}

@media only screen and (max-height: 47vw) {
  .channel-icon,
  .channel-icon *,
  .channel-icon:after,
  .channel-icon:before {
    width: 40vh !important;
    height: 22.5vh !important;
    max-width: 439px !important;
    max-height: 247px !important;
  }

  .channels-container {
  }
}

/* The source design uses a 1280×720 canvas. Keep four equal columns at every
   viewport size and scale each channel from the 16:9 scene, including on phones. */
.main-menu {
  width: var(--wii-menu-width);
  height: var(--wii-menu-height);
  container-type: size;
}

.top-section {
  width: 100%;
  height: calc(100% - 30.42cqb);
  padding: 3cqb 0 0;
  box-sizing: border-box;
}

.channels {
  display: flex;
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
  transform: none;
}

.col,
.col.first {
  display: flex;
  flex: 0 0 25%;
  flex-direction: column;
  align-items: center;
  width: 25%;
  height: 100%;
  margin: 0;
  box-sizing: border-box;
}

.channel-icon {
  flex: 0 0 auto;
  width: 80.8%;
  height: auto;
  aspect-ratio: 20.2 / 11.1;
  margin: 2cqb 0 0;
}

.channel-icon img,
.channel-icon.blank:before,
.channel-icon:after,
.channel-icon.occupied .hover {
  width: 100%;
  height: 100%;
}

.bottom-section {
  height: 30.42cqb;
}

@supports (width: 1dvw) {
  .top-section {
    height: calc(100% - 30.42cqb);
  }
}