/* One HOME Menu material for the collection, carousel and Progress artwork. */
#dual {
  --home-rim-background: linear-gradient(145deg, #fff 0%, #eaf0f4 43%, #c1cad3 100%);
  --home-rim-border: #8b98a7a6;
  --home-rim-highlight: #fff;
  --home-rim-lowlight: #8797a07a;
  --home-rim-shadow: #26384420;
  --home-rim-inset: #53616c55;
  --home-rim-surface: #f6f7f9;
  --home-rim-focus: #4b8195;
}
[data-theme='dark'] #dual {
  --home-rim-background: linear-gradient(145deg, #5b6670 0%, #3d4852 43%, #242e37 100%);
  --home-rim-border: #8293a18f;
  --home-rim-highlight: #e7f3fc66;
  --home-rim-lowlight: #111a23b3;
  --home-rim-shadow: #0006;
  --home-rim-inset: #18232dd9;
  --home-rim-surface: #e8edf0;
  --home-rim-focus: #b4d6e2;
}
#dual .game-icon,
#dual .game-channel {
  background: var(--home-rim-background);
  border: 1px solid var(--home-rim-border);
  box-shadow:
    inset 0 1px 1px var(--home-rim-highlight),
    inset 0 -2px 1px var(--home-rim-lowlight),
    0 3px 5px var(--home-rim-shadow);
}
#dual .game-icon img {
  border-color: var(--home-rim-inset);
  background: var(--home-rim-surface);
}
#dual .rail-project:focus-visible .game-icon {
  outline: 2px solid var(--home-rim-focus);
  outline-offset: 3px;
}

/* Illustrated cards use the same frame at a larger, proportional scale. */
#dual .dual-library {
  max-width: none;
}
#dual .released-mosaic {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, clamp(300px, 25vw, 320px));
  gap: 20px;
}
#dual .development-mosaic {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: 320px;
  gap: 20px;
}
#dual .game-channel {
  --card-base: #dce7e7;
  --card-ink: #254342;
  --card-muted: #53665d;
  --card-action: #fffdf1ed;
  --card-action-border: #56674c33;
  --card-status: #fffffff0;
  --card-status-ink: #385046;
  display: block;
  padding: 7px;
  border-radius: 28px;
  text-align: left;
  color: var(--card-ink);
  transition:
    transform 0.3s var(--ease-out),
    box-shadow 0.3s;
}
#dual .game-channel:hover {
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 1px var(--home-rim-highlight),
    inset 0 -2px 1px var(--home-rim-lowlight),
    0 8px 16px var(--home-rim-shadow);
}
#dual .game-channel:focus-visible {
  outline: 3px solid var(--home-rim-focus);
  outline-offset: 5px;
}
#dual .game-channel .channel-art {
  display: block;
  height: 100%;
  border: 1px solid var(--home-rim-inset);
  border-radius: 20px;
  background: var(--card-base);
  color: var(--card-ink);
}
#dual .game-channel .channel-wallpaper {
  width: 100%;
  height: 100%;
  opacity: 0.95;
  object-fit: cover;
  object-position: var(--card-art-position, 50% 40%);
  transition: transform 0.7s var(--ease-out);
}
#dual .game-channel:hover .channel-wallpaper {
  transform: scale(1.025);
}
#dual .game-channel .channel-logo {
  top: 22px;
  right: 24px;
  left: auto;
  width: clamp(85px, 8vw, 115px);
  height: 53px;
  z-index: 3;
  filter: drop-shadow(0 2px 3px #0003);
}
#dual .game-channel .channel-art:after {
  z-index: 1;
  background: linear-gradient(
    0deg,
    var(--card-base) 0%,
    color-mix(in srgb, var(--card-base) 96%, transparent) 21%,
    color-mix(in srgb, var(--card-base) 72%, transparent) 39%,
    color-mix(in srgb, var(--card-base) 18%, transparent) 64%,
    transparent 84%
  );
}
#dual .game-channel .channel-status {
  position: absolute;
  z-index: 3;
  top: 24px;
  left: 24px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: calc(100% - 48px);
  padding: 9px 13px;
  background: var(--card-status);
  border: 1px solid #ffffff38;
  border-radius: 30px;
  color: var(--card-status-ink);
  font-size: 11px;
  line-height: 1.3;
  font-weight: 800;
}
#dual .channel-status:before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #468367;
  flex: none;
}
#dual .channel-status.is-development:before {
  background: #b1844a;
}
#dual .game-channel .channel-details {
  position: absolute;
  z-index: 3;
  inset: auto 28px 28px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  color: var(--card-ink);
  text-shadow: none;
}
#dual .channel-details .channel-platform {
  display: block;
  max-width: 100%;
  font:
    10px/1.6 'DM Sans',
    sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--card-muted);
  margin-bottom: 12px;
}
#dual .game-channel .channel-details strong {
  font:
    700 clamp(29px, 3vw, 42px)/1.1 'DM Sans',
    sans-serif;
  letter-spacing: -1.4px;
  color: var(--card-ink);
  text-shadow: none;
}
#dual .channel-description {
  display: block;
  margin-top: 17px;
  font:
    500 17px/1.55 'DM Sans',
    sans-serif;
  letter-spacing: -0.25px;
  color: var(--card-muted);
}
#dual .channel-action {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  margin-top: 24px;
  padding: 15px 20px;
  background: var(--card-action);
  border: 1px solid var(--card-action-border);
  border-radius: 12px;
  color: var(--card-ink);
  font:
    700 13px/1.3 'DM Sans',
    sans-serif;
}
#dual .channel-action svg {
  width: 20px;
  height: 20px;
}
#dual .game-channel .channel-index {
  position: absolute;
  z-index: 2;
  bottom: 23px;
  right: 25px;
  color: var(--card-ink);
  font:
    400 74px/1 'DM Sans',
    sans-serif;
  letter-spacing: -5px;
  opacity: 0.1;
  text-shadow: none;
}
#dual .development-mosaic .channel-details {
  inset: auto 23px 25px;
}
#dual .development-mosaic .channel-details strong {
  font-size: clamp(24px, 2vw, 29px);
  letter-spacing: -0.8px;
}
#dual .development-mosaic .channel-description {
  font-size: 14px;
  line-height: 1.65;
  margin-top: 14px;
}
#dual .development-mosaic .channel-platform {
  font-size: 9px;
  letter-spacing: 0.7px;
  margin-bottom: 10px;
}
#dual .development-mosaic .channel-action {
  margin-top: 20px;
  padding: 13px 16px;
  font-size: 12px;
  gap: 20px;
}
#dual .development-mosaic .channel-status {
  top: 20px;
  left: 20px;
}
#dual .development-mosaic .channel-index {
  font-size: 62px;
  right: 19px;
  bottom: 23px;
}

#dual .game-minish {
  --card-base: #dde8c7;
  --card-ink: #203c30;
  --card-muted: #53624e;
  --card-art-position: 50% 58%;
}
#dual .game-doom {
  --card-base: #f0d2ad;
  --card-ink: #503424;
  --card-muted: #6c5240;
  --card-art-position: 50% 32%;
}
#dual .game-alttp {
  --card-base: #eee4c6;
  --card-ink: #47482c;
  --card-muted: #63614d;
  --card-art-position: 62% 10%;
}
#dual .game-kart {
  --card-base: #dbeaf0;
  --card-ink: #2b414f;
  --card-muted: #526571;
  --card-art-position: 50% 45%;
}
#dual .game-sm64ds {
  --card-base: #e6e9de;
  --card-ink: #39462d;
  --card-muted: #5c6953;
}
#dual .game-dusklight {
  --card-base: #e5dac2;
  --card-ink: #413928;
  --card-muted: #695b48;
  --card-art-position: 50% 36%;
}
#dual .game-starwing {
  --card-base: #dce9ed;
  --card-ink: #284352;
  --card-muted: #526875;
  --card-art-position: 50% 35%;
}
/* Retain the established crop that excludes the original photograph's footer. */
#dual .game-sm64ds .channel-wallpaper {
  position: absolute;
  top: -8.3334%;
  height: 133.3334%;
  object-position: 50% 0%;
}
[data-theme='dark'] #dual .game-channel {
  --card-action: #ffffff12;
  --card-action-border: #ffffff29;
  --card-status: #26342df0;
  --card-status-ink: #edf4e9;
}
[data-theme='dark'] #dual .game-minish {
  --card-base: #20382d;
  --card-ink: #f1f5df;
  --card-muted: #c7d4b8;
}
[data-theme='dark'] #dual .game-doom {
  --card-base: #493022;
  --card-ink: #fff0d8;
  --card-muted: #e6c7a7;
}
[data-theme='dark'] #dual .game-alttp {
  --card-base: #383727;
  --card-ink: #f6f0d6;
  --card-muted: #d4cfb2;
}
[data-theme='dark'] #dual .game-kart {
  --card-base: #263a4a;
  --card-ink: #e7f1fb;
  --card-muted: #c0d5e4;
}
[data-theme='dark'] #dual .game-sm64ds {
  --card-base: #2d3929;
  --card-ink: #eff3dd;
  --card-muted: #c5d1b9;
}
[data-theme='dark'] #dual .game-dusklight {
  --card-base: #312a27;
  --card-ink: #f8ead3;
  --card-muted: #d6c3a6;
}
[data-theme='dark'] #dual .game-starwing {
  --card-base: #243441;
  --card-ink: #ecf3f7;
  --card-muted: #c0d0dc;
}

@media (max-width: 1000px) {
  #dual .released-mosaic {
    grid-template-rows: repeat(2, 300px);
    gap: 18px;
  }
  #dual .development-mosaic {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-rows: 320px;
    gap: 18px;
  }
  #dual .game-channel .channel-details {
    inset: auto 23px 25px;
  }
  #dual .game-channel .channel-details strong {
    font-size: 32px;
    letter-spacing: -1.1px;
  }
  #dual .channel-description {
    font-size: 15px;
  }
  #dual .channel-details .channel-platform {
    font-size: 9px;
    letter-spacing: 0.6px;
  }
  #dual .channel-action {
    font-size: 12px;
    gap: 23px;
    padding: 14px 17px;
  }
}
@media (min-width: 1001px) and (max-width: 1200px) {
  #dual .development-mosaic {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, 320px);
  }
}
@media (min-width: 681px) and (max-width: 820px) {
  #dual .released-mosaic,
  #dual .development-mosaic {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-rows: 320px;
  }
}
@media (max-width: 680px) {
  #dual .released-mosaic,
  #dual .development-mosaic {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-rows: clamp(430px, 116vw, 535px);
    gap: 20px;
  }
  #dual .development-mosaic .game-starwing {
    grid-column: auto;
  }
  #dual .game-channel {
    border-radius: 25px;
    padding: 6px;
  }
  #dual .game-channel .channel-art {
    border-radius: 18px;
  }
  #dual .game-channel .channel-details {
    inset: auto 22px 25px;
  }
  #dual .game-channel .channel-details strong {
    font-size: clamp(29px, 8vw, 38px);
  }
  #dual .game-channel .channel-status {
    top: 20px;
    left: 20px;
    font-size: 10px;
    padding: 8px 11px;
  }
  #dual .game-channel .channel-logo {
    top: 19px;
    right: 20px;
    width: 76px;
    height: 40px;
  }
  #dual .game-channel .channel-description {
    font-size: 15px;
    margin-top: 15px;
  }
  #dual .game-channel .channel-platform {
    font-size: 9px;
    line-height: 1.6;
    margin-bottom: 10px;
  }
  #dual .game-channel .channel-action {
    margin-top: 21px;
    font-size: 12px;
    padding: 14px 17px;
  }
  #dual .game-channel .channel-index {
    font-size: 64px;
    bottom: 25px;
    right: 23px;
  }
  #dual .released-mosaic,
  #dual .development-mosaic {
    grid-auto-rows: clamp(280px, 64vw, 320px);
  }
}
@media (max-width: 359px) {
  #dual .game-channel .channel-details {
    inset-inline: 17px;
  }
  #dual .game-channel .channel-details strong {
    font-size: 28px;
  }
  #dual .game-channel .channel-description {
    font-size: 14px;
  }
  #dual .game-channel .channel-index {
    font-size: 53px;
    right: 16px;
  }
}
@media (prefers-reduced-motion: reduce) {
  #dual .game-channel,
  #dual .game-channel .channel-wallpaper {
    transition: none;
  }
  #dual .game-channel:hover,
  #dual .game-channel:hover .channel-wallpaper {
    transform: none;
  }
}

/* A compact released shelf keeps the illustration and its soft colour wash. */
#dual .released-mosaic .channel-details {
  inset: auto 24px 20px;
}
#dual .released-mosaic .channel-details strong {
  font-size: clamp(28px, 2.5vw, 34px);
  letter-spacing: -1.1px;
}
#dual .released-mosaic .channel-platform {
  margin-bottom: 7px;
  font-size: 9px;
}
#dual .released-mosaic .channel-description {
  margin-top: 9px;
  font-size: 15px;
  line-height: 1.45;
}
#dual .released-mosaic .channel-action {
  margin-top: 13px;
  padding: 10px 16px;
  gap: 25px;
  font-size: 12px;
}
#dual .released-mosaic .channel-status {
  top: 20px;
  left: 20px;
  padding: 8px 11px;
  font-size: 10px;
}
#dual .released-mosaic .channel-logo {
  top: 18px;
  right: 20px;
  width: 93px;
  height: 44px;
}
#dual .released-mosaic .channel-index {
  font-size: 54px;
  bottom: 19px;
  right: 22px;
}
@media (max-width: 680px) {
  #dual .released-mosaic .channel-details {
    inset: auto 20px 18px;
  }
  #dual .released-mosaic .channel-details strong {
    font-size: clamp(25px, 6.7vw, 30px);
  }
  #dual .released-mosaic .channel-description {
    margin-top: 9px;
  }
  #dual .released-mosaic .channel-action {
    margin-top: 13px;
    padding: 10px 16px;
  }
  #dual .released-mosaic .channel-logo {
    width: 76px;
    height: 40px;
  }
}

#dual .game-viper {
  --card-base: #eee0dc;
  --card-ink: #522730;
  --card-muted: #76525a;
  --card-art-position: 50% 50%;
}
[data-theme='dark'] #dual .game-viper {
  --card-base: #260b12;
  --card-ink: #ffe3df;
  --card-muted: #ddb1b7;
}
#dual .game-viper .channel-wallpaper {
  image-rendering: auto;
  object-fit: contain;
  object-position: 50% 12%;
  background: #000;
}
#dual .game-viper .channel-logo {
  width: 110px;
  height: 46px;
}

@media (min-width: 1201px) and (max-width: 1500px) {
  #dual .development-mosaic .channel-logo {
    top: 65px;
    right: 20px;
    width: 95px;
    height: 44px;
  }
  #dual .development-mosaic .channel-status {
    top: 20px;
    left: 20px;
  }
}

/* Phone shelves: four projects in a compact 2 × 2 grid. */
@media (max-width: 680px) {
  #dual .released-mosaic,
  #dual .development-mosaic {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-rows: 210px;
    gap: 12px;
  }
  #dual .game-channel {
    grid-column: auto;
    grid-row: auto;
    height: auto;
    min-width: 0;
    padding: 4px;
    border-radius: 17px;
  }
  #dual .game-channel .channel-art {
    border-radius: 12px;
  }
  #dual .game-channel .channel-status {
    top: 9px;
    left: 8px;
    max-width: calc(100% - 16px);
    font-size: 8px;
    padding: 5px 6px;
    gap: 4px;
    letter-spacing: 0;
  }
  #dual .channel-status:before {
    width: 4px;
    height: 4px;
  }
  #dual .game-channel .channel-logo,
  #dual .game-channel .channel-platform,
  #dual .game-channel .channel-description,
  #dual .game-channel .channel-index {
    display: none;
  }
  #dual .game-channel .channel-details {
    inset: auto 11px 11px;
    gap: 9px;
  }
  #dual .game-channel .channel-details strong {
    font-size: 16px;
    line-height: 1.15;
    letter-spacing: -0.4px;
    min-height: 37px;
    display: flex;
    align-items: flex-end;
  }
  #dual .game-channel .channel-action {
    width: 100%;
    font-size: 10px;
    line-height: 1.3;
    gap: 4px;
    margin: 0;
    padding: 8px;
    border-radius: 8px;
  }
  #dual .channel-action svg {
    width: 14px;
    height: 14px;
  }
  #dual .game-channel .channel-art:after {
    background: linear-gradient(
      0deg,
      var(--card-base) 0%,
      color-mix(in srgb, var(--card-base) 95%, transparent) 30%,
      color-mix(in srgb, var(--card-base) 15%, transparent) 70%,
      transparent
    );
  }
  #dual .library-heading-row {
    display: block;
    margin-bottom: 17px;
  }
  #dual .library-heading-row h2 {
    font-size: 17px;
    letter-spacing: -0.3px;
  }
  #dual .library-heading-row > p {
    font-size: 11px;
    line-height: 1.5;
    margin-top: 5px;
  }
  #dual .development-heading {
    margin-top: 30px;
  }
}
@media (max-width: 359px) {
  #dual .released-mosaic,
  #dual .development-mosaic {
    grid-auto-rows: 195px;
    gap: 10px;
  }
  #dual .game-channel .channel-details {
    inset-inline: 9px;
  }
  #dual .game-channel .channel-details strong {
    font-size: 14px;
    min-height: 33px;
  }
  #dual .game-channel .channel-status {
    font-size: 7px;
  }
}