html.vgi-arcade-page {
  scroll-behavior: auto;
}

html.vgi-arcade-focus-mode {
  overflow: hidden;
}

.vgi-arcade {
  --vgi-arcade-accent: #ff6b35;
  --vgi-arcade-ink: #f8f7ff;
  --vgi-arcade-muted: #bdb9d3;
  --vgi-arcade-panel: rgb(22 18 48 / 82%);
  --vgi-arcade-line: rgb(255 255 255 / 13%);
  position: relative;
  isolation: isolate;
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.6rem);
  overflow: hidden;
  margin-block: clamp(1.5rem, 5vw, 4rem);
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: clamp(1.25rem, 3vw, 2rem);
  padding: clamp(1rem, 4vw, 2.4rem);
  background:
    radial-gradient(circle at 8% 0%, rgb(101 72 255 / 28%), transparent 34rem),
    radial-gradient(circle at 100% 28%, rgb(255 107 53 / 18%), transparent 30rem),
    linear-gradient(145deg, #100d25 0%, #171133 54%, #0c1930 100%);
  box-shadow: 0 1.5rem 4rem rgb(12 8 33 / 22%);
  color: var(--vgi-arcade-ink);
}

.vgi-arcade::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image:
    linear-gradient(rgb(255 255 255 / 2.5%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 2.5%) 1px, transparent 1px);
  background-size: 2rem 2rem;
  mask-image: linear-gradient(to bottom, #000, transparent 75%);
  content: "";
}

.vgi-arcade__intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  border-block-end: 1px solid var(--vgi-arcade-line);
  padding-block-end: clamp(1rem, 2vw, 1.5rem);
}

.vgi-arcade__view-actions {
  position: relative;
  z-index: 5;
  display: flex;
  justify-content: flex-end;
}

.vgi-arcade__view-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-inline-size: 10.5rem;
}

.vgi-arcade__intro h2 {
  max-inline-size: 13ch;
  margin-block: 0.12em;
  color: #fff;
  font-size: clamp(2.1rem, 7vw, 4.8rem);
  line-height: 0.93;
  letter-spacing: -0.055em;
  text-wrap: balance;
}

.vgi-arcade__intro p:last-child {
  max-inline-size: 58ch;
  margin-block-end: 0;
  color: var(--vgi-arcade-muted);
}

.vgi-arcade .vgi-eyebrow {
  color: #ffb35c;
  font-weight: 850;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.vgi-arcade__marque {
  position: relative;
  display: grid;
  flex: none;
  inline-size: clamp(6rem, 14vw, 10rem);
  aspect-ratio: 1;
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 28%;
  background: linear-gradient(145deg, rgb(255 255 255 / 11%), rgb(255 255 255 / 3%));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 18%), 0 1rem 2.2rem rgb(0 0 0 / 18%);
  rotate: 5deg;
}

.vgi-arcade__marque--memory {
  grid-template-columns: repeat(2, 1fr);
  gap: 0.45rem;
  padding: 1rem;
}

.vgi-arcade__marque--memory span {
  border-radius: 0.7rem;
  background: linear-gradient(145deg, #ffb35c, #ff5e57);
  box-shadow: inset 0 -0.25rem 0 rgb(73 18 74 / 20%);
}

.vgi-arcade__marque--memory span:nth-child(2) {
  background: linear-gradient(145deg, #6df2d0, #28bfb1);
}

.vgi-arcade__marque--memory span:nth-child(3) {
  grid-column: 1 / -1;
  inline-size: calc(50% - 0.225rem);
  background: linear-gradient(145deg, #8d82ff, #6250db);
}

.vgi-arcade__marque--tetris {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 0.3rem;
  padding: 1.15rem;
}

.vgi-arcade__marque--tetris span {
  border-radius: 0.25rem;
  background: linear-gradient(145deg, #71e6ff, #18a7c4);
  box-shadow: inset 0.15rem 0.15rem 0 rgb(255 255 255 / 35%), inset -0.15rem -0.15rem 0 rgb(0 0 0 / 18%);
}

.vgi-arcade__marque--tetris span:nth-child(1) { grid-column: 2; }
.vgi-arcade__marque--tetris span:nth-child(2) { grid-column: 1; grid-row: 2; background: linear-gradient(145deg, #be84ff, #7548d2); }
.vgi-arcade__marque--tetris span:nth-child(3) { grid-column: 2; grid-row: 2; background: linear-gradient(145deg, #be84ff, #7548d2); }
.vgi-arcade__marque--tetris span:nth-child(4) { grid-column: 3; grid-row: 2; background: linear-gradient(145deg, #be84ff, #7548d2); }
.vgi-arcade__marque--tetris span:nth-child(5) { grid-column: 2; grid-row: 3; background: linear-gradient(145deg, #ffb35c, #ff6b35); }

.vgi-arcade__actions {
  display: flex;
  flex: 1 1 28rem;
  flex-wrap: wrap;
  gap: 0.65rem;
}

/* Shared control frame. Game-specific CSS may replace only the custom gameplay slot. */
.vgi-control-frame {
  --vgi-control-frame-line: var(--vgi-arcade-line);
  display: grid;
  min-inline-size: 0;
  gap: 0.65rem;
  border: 1px solid var(--vgi-control-frame-line);
  border-radius: 0.9rem;
  padding: 0.65rem;
  background: rgb(7 7 24 / 38%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 6%);
}

.vgi-control-frame__gameplay {
  min-inline-size: 0;
}

.vgi-control-frame__gameplay:empty,
.vgi-control-frame--direct .vgi-control-frame__gameplay {
  display: none;
}

.vgi-control-frame--auto .vgi-control-frame__gameplay {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.55rem;
}

.vgi-control-frame__session {
  display: grid;
  grid-template-columns: repeat(var(--vgi-control-session-columns, 2), minmax(0, 1fr));
  min-inline-size: 0;
  inline-size: min(100%, var(--vgi-control-session-width, 21rem));
  margin-inline: auto;
  gap: 0.65rem;
}

.vgi-control-frame--session-1 { --vgi-control-session-columns: 1; --vgi-control-session-width: 14rem; }
.vgi-control-frame--session-2 { --vgi-control-session-columns: 2; --vgi-control-session-width: 21rem; }
.vgi-control-frame--session-3 { --vgi-control-session-columns: 3; --vgi-control-session-width: 30rem; }
.vgi-control-frame--session-4 { --vgi-control-session-columns: 4; --vgi-control-session-width: 40rem; }

.vgi-control-frame__session > button {
  min-inline-size: 0;
  min-block-size: 48px;
  inline-size: 100%;
}

.vgi-control-frame--dpad .vgi-control-frame__gameplay,
.vgi-control-frame--actions .vgi-control-frame__gameplay,
.vgi-control-frame--gamepad .vgi-control-frame__gameplay {
  display: grid;
  gap: 0.55rem;
  margin-inline: auto;
}

.vgi-control-frame--dpad .vgi-control-frame__gameplay {
  grid-template-columns: repeat(3, minmax(4.75rem, 1fr));
  inline-size: min(100%, 24rem);
}

.vgi-control-frame--dpad [data-vgi-control="up"] { grid-column: 2; grid-row: 1; }
.vgi-control-frame--dpad [data-vgi-control="left"] { grid-column: 1; grid-row: 2; }
.vgi-control-frame--dpad [data-vgi-control="down"] { grid-column: 2; grid-row: 2; }
.vgi-control-frame--dpad [data-vgi-control="right"] { grid-column: 3; grid-row: 2; }

.vgi-control-frame--actions .vgi-control-frame__gameplay {
  grid-template-columns: repeat(3, minmax(4.75rem, 1fr));
  inline-size: min(100%, 24rem);
}

.vgi-control-frame--actions [data-vgi-control="secondary"] { grid-column: 2; grid-row: 1; }
.vgi-control-frame--actions [data-vgi-control="fire"] { grid-column: 1; grid-row: 2; }
.vgi-control-frame--actions [data-vgi-control="jump"] { grid-column: 2; grid-row: 2; }
.vgi-control-frame--actions [data-vgi-control="utility"] { grid-column: 3; grid-row: 2; }

.vgi-control-frame--gamepad .vgi-control-frame__gameplay {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  inline-size: min(100%, 32rem);
}

.vgi-control-frame--gamepad [data-vgi-control="up"] { grid-column: 2; grid-row: 1; }
.vgi-control-frame--gamepad [data-vgi-control="left"] { grid-column: 1; grid-row: 2; }
.vgi-control-frame--gamepad [data-vgi-control="down"] { grid-column: 2; grid-row: 2; }
.vgi-control-frame--gamepad [data-vgi-control="right"] { grid-column: 3; grid-row: 2; }
.vgi-control-frame--gamepad [data-vgi-control="secondary"] { grid-column: 5; grid-row: 1; }
.vgi-control-frame--gamepad [data-vgi-control="fire"] { grid-column: 5; grid-row: 2; }
.vgi-control-frame--gamepad [data-vgi-control="jump"] { grid-column: 6; grid-row: 2; }
.vgi-control-frame--gamepad [data-vgi-control="utility"] { grid-column: 4 / 7; grid-row: 3; }

.vgi-control-frame--dpad .vgi-control-frame__gameplay > :not([data-vgi-control]),
.vgi-control-frame--actions .vgi-control-frame__gameplay > :not([data-vgi-control]),
.vgi-control-frame--dpad [data-vgi-control="utility"] {
  grid-column: 1 / -1;
}

.vgi-control-frame--dpad .vgi-control-frame__gameplay > button,
.vgi-control-frame--actions .vgi-control-frame__gameplay > button,
.vgi-control-frame--gamepad .vgi-control-frame__gameplay > button {
  min-inline-size: 0;
  inline-size: 100%;
}

.vgi-arcade__settings {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.75rem 1.2rem;
  border: 1px solid var(--vgi-arcade-line);
  border-radius: 1rem;
  padding: 0.8rem;
  background: rgb(7 7 24 / 34%);
}

.vgi-arcade__settings label {
  display: grid;
  flex: 1 1 15rem;
  gap: 0.35rem;
}

.vgi-arcade__settings label > span,
.vgi-arcade__settings > p {
  color: var(--vgi-arcade-muted);
  font-size: 0.78rem;
  font-weight: 820;
  letter-spacing: 0.045em;
}

.vgi-arcade__settings > p {
  margin: 0 0 0.68rem;
}

.vgi-arcade select {
  min-block-size: 48px;
  border: 1px solid rgb(255 255 255 / 22%);
  border-radius: 0.75rem;
  padding: 0.65rem 2.3rem 0.65rem 0.8rem;
  background: #181337;
  color: #fff;
  font: inherit;
  font-weight: 760;
}

.vgi-arcade select:focus-visible {
  outline: 3px solid #fff2a8;
  outline-offset: 3px;
}

.vgi-arcade button {
  min-block-size: 48px;
  cursor: pointer;
  border: 1px solid rgb(255 255 255 / 22%);
  border-radius: 0.8rem;
  padding: 0.7rem 1.1rem;
  background: linear-gradient(145deg, #ffb258, var(--vgi-arcade-accent));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 50%), 0 0.45rem 1.2rem rgb(255 83 39 / 22%);
  color: #211029;
  font-weight: 850;
  transition: translate 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}

.vgi-arcade button:hover:not(:disabled) {
  filter: saturate(1.1) brightness(1.06);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 55%), 0 0.7rem 1.5rem rgb(255 83 39 / 30%);
}

@media (hover: hover) and (pointer: fine) {
  .vgi-arcade button:hover:not(:disabled) {
    translate: 0 -2px;
  }

  .vgi-arcade button:active:not(:disabled) {
    translate: 0 1px;
  }
}

.vgi-arcade button.is-style-outline {
  background: rgb(255 255 255 / 5%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 8%);
  color: var(--vgi-arcade-ink);
}

.vgi-arcade button:disabled {
  cursor: default;
  opacity: 0.55;
}

.vgi-arcade button:focus-visible,
.vgi-arcade:focus-visible {
  outline: 3px solid #fff2a8;
  outline-offset: 4px;
}

.vgi-arcade:fullscreen,
.vgi-arcade.is-focus-mode {
  box-sizing: border-box;
  inline-size: 100%;
  block-size: 100dvh;
  max-block-size: none;
  overflow: auto;
  overscroll-behavior: contain;
  margin: 0;
  border: 0;
  border-radius: 0;
  padding:
    max(3.9rem, env(safe-area-inset-top))
    max(0.75rem, env(safe-area-inset-right))
    max(0.75rem, env(safe-area-inset-bottom))
    max(0.75rem, env(safe-area-inset-left));
  background:
    radial-gradient(circle at 8% 0%, rgb(101 72 255 / 30%), transparent 34rem),
    linear-gradient(145deg, #0b091c, #171133 54%, #091728);
}

.vgi-arcade.is-focus-mode {
  position: fixed;
  z-index: 999999;
  inset: 0;
}

.vgi-arcade:fullscreen > .vgi-arcade__view-actions,
.vgi-arcade.is-focus-mode > .vgi-arcade__view-actions {
  position: absolute;
  inset-block-start: max(0.55rem, env(safe-area-inset-top));
  inset-inline-end: max(0.75rem, env(safe-area-inset-right));
}

.vgi-arcade:fullscreen > .vgi-arcade__intro,
.vgi-arcade.is-focus-mode > .vgi-arcade__intro,
.vgi-arcade:fullscreen > .vgi-scoreboard,
.vgi-arcade.is-focus-mode > .vgi-scoreboard {
  display: none;
}

.vgi-arcade:fullscreen button,
.vgi-arcade.is-focus-mode button {
  touch-action: manipulation;
}

.vgi-memory__progress-wrap {
  display: grid;
  flex: 1 1 14rem;
  gap: 0.4rem;
  max-inline-size: 24rem;
}

.vgi-memory__progress-wrap p {
  margin: 0;
  font-variant-numeric: tabular-nums;
  font-weight: 780;
}

.vgi-memory__progress {
  overflow: hidden;
  block-size: 0.55rem;
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: 99px;
  background: rgb(0 0 0 / 35%);
}

.vgi-memory__progress span {
  display: block;
  inline-size: 0;
  block-size: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #6df2d0, #ffcf5c);
  box-shadow: 0 0 1rem rgb(109 242 208 / 60%);
  transition: inline-size 400ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.vgi-memory__table {
  position: relative;
  max-inline-size: 47rem;
  border: 1px solid rgb(255 255 255 / 13%);
  border-radius: 1.4rem;
  padding: clamp(0.65rem, 2.5vw, 1.25rem);
  background:
    radial-gradient(circle at center, rgb(83 66 171 / 22%), transparent 70%),
    rgb(5 7 23 / 58%);
  box-shadow: inset 0 0 2.5rem rgb(0 0 0 / 28%), 0 1rem 2.5rem rgb(0 0 0 / 15%);
}

.vgi-memory__board {
  display: grid;
  grid-template-columns: repeat(var(--memory-columns, 4), minmax(0, 1fr));
  gap: clamp(0.45rem, 1.8vw, 0.85rem);
}

.vgi-memory__card,
.vgi-memory__card:hover:not(:disabled),
.vgi-memory__card:active:not(:disabled) {
  position: relative;
  min-block-size: 0;
  aspect-ratio: 1;
  border: 0;
  border-radius: 1rem;
  padding: 0;
  background: transparent;
  box-shadow: none;
  perspective: 60rem;
  translate: none;
}

.vgi-memory__card:disabled {
  opacity: 1;
}

.vgi-memory__card-inner {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transform-style: preserve-3d;
  transition: transform 480ms cubic-bezier(0.2, 0.8, 0.2, 1), scale 180ms ease;
}

.vgi-memory__card:hover:not(:disabled) .vgi-memory__card-inner {
  scale: 1.035;
}

.vgi-memory__card.is-revealed .vgi-memory__card-inner {
  transform: rotateY(180deg);
}

.vgi-memory__face {
  position: absolute;
  display: grid;
  place-items: center;
  inset: 0;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: inherit;
  backface-visibility: hidden;
}

.vgi-memory__back {
  background:
    linear-gradient(135deg, transparent 47%, rgb(255 255 255 / 8%) 48% 52%, transparent 53%) 0 0 / 1.35rem 1.35rem,
    linear-gradient(145deg, #7659e6, #3c2f91);
  box-shadow: inset 0 0 0 0.25rem rgb(15 13 47 / 28%), inset 0 1px 0 rgb(255 255 255 / 28%);
}

.vgi-memory__back::after {
  display: grid;
  place-items: center;
  inline-size: 42%;
  aspect-ratio: 1;
  border: 2px solid rgb(255 255 255 / 70%);
  border-radius: 36%;
  background: rgb(15 13 47 / 32%);
  box-shadow: 0 0 1.1rem rgb(162 137 255 / 48%);
  color: #fff;
  content: "V";
  font-size: clamp(1rem, 4vw, 2rem);
  font-weight: 950;
}

.vgi-memory__front {
  transform: rotateY(180deg);
  background:
    radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--card-color) 38%, transparent), transparent 58%),
    linear-gradient(145deg, #28204f, #14152f);
  box-shadow: inset 0 0 0 0.18rem color-mix(in srgb, var(--card-color) 42%, transparent), inset 0 1px 0 rgb(255 255 255 / 22%);
  color: var(--card-color);
}

.vgi-memory__front::before {
  position: absolute;
  inline-size: 66%;
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--card-color) 45%, transparent);
  border-radius: 50%;
  box-shadow: 0 0 1.8rem color-mix(in srgb, var(--card-color) 20%, transparent);
  content: "";
}

.vgi-memory__symbol {
  position: relative;
  z-index: 1;
  inline-size: 56%;
  filter: drop-shadow(0 0.35rem 0.5rem rgb(0 0 0 / 25%));
}

.vgi-memory__symbol path,
.vgi-memory__symbol circle,
.vgi-memory__symbol line,
.vgi-memory__symbol polyline {
  vector-effect: non-scaling-stroke;
}

.vgi-memory__card[data-memory-key="controller"] { --card-color: #6df2d0; }
.vgi-memory__card[data-memory-key="gem"] { --card-color: #71d8ff; }
.vgi-memory__card[data-memory-key="sword"] { --card-color: #ffb35c; }
.vgi-memory__card[data-memory-key="heart"] { --card-color: #ff738d; }
.vgi-memory__card[data-memory-key="planet"] { --card-color: #b79aff; }
.vgi-memory__card[data-memory-key="star"] { --card-color: #ffe36b; }
.vgi-memory__card[data-memory-key="bolt"] { --card-color: #fff27a; }
.vgi-memory__card[data-memory-key="moon"] { --card-color: #8bb8ff; }
.vgi-memory__card[data-memory-key="shield"] { --card-color: #79e3bf; }
.vgi-memory__card[data-memory-key="key"] { --card-color: #ffca6f; }
.vgi-memory__card[data-memory-key="crown"] { --card-color: #ffe05d; }
.vgi-memory__card[data-memory-key="rocket"] { --card-color: #ff826b; }
.vgi-memory__card[data-memory-key="flame"] { --card-color: #ff724f; }
.vgi-memory__card[data-memory-key="coin"] { --card-color: #ffd666; }
.vgi-memory__card[data-memory-key="map"] { --card-color: #8edb92; }

.vgi-memory__card.is-matched .vgi-memory__front {
  border-color: var(--card-color);
  box-shadow: inset 0 0 0 0.22rem color-mix(in srgb, var(--card-color) 62%, transparent), 0 0 1.4rem color-mix(in srgb, var(--card-color) 35%, transparent);
  animation: vgi-memory-match 420ms ease both;
}

.vgi-arcade.is-complete .vgi-memory__table {
  animation: vgi-memory-win 800ms ease both;
}

.vgi-arcade.is-failed .vgi-arcade__status {
  border-inline-start-color: #ff738d;
}

.vgi-arcade.is-previewing .vgi-memory__table::after,
.vgi-arcade.is-paused .vgi-memory__table::after,
.vgi-arcade--tetris.is-paused .vgi-tetris__screen::before {
  position: absolute;
  z-index: 5;
  display: grid;
  place-items: center;
  inset: 0;
  border-radius: inherit;
  background: rgb(7 7 24 / 76%);
  color: #fff;
  content: "Memorizza";
  font-size: clamp(1rem, 4vw, 1.5rem);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  backdrop-filter: blur(3px);
}

.vgi-arcade.is-previewing .vgi-memory__table::after {
  pointer-events: none;
  background: transparent;
  content: "";
  backdrop-filter: none;
}

.vgi-arcade.is-paused .vgi-memory__table::after {
  content: "In pausa";
}

.vgi-tetris__layout {
  display: grid;
  grid-template-columns: minmax(20rem, 26rem) minmax(15rem, 1fr);
  min-inline-size: 0;
  align-items: start;
  gap: clamp(1rem, 3vw, 2rem);
}

.vgi-tetris__playfield {
  display: grid;
  gap: 0.75rem;
  scroll-margin-block-start: 0.75rem;
}

.vgi-tetris__play-stats {
  margin: 0;
  color: #fff;
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  font-variant-numeric: tabular-nums;
  font-weight: 850;
}

.vgi-tetris__play-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.7rem;
}

.vgi-tetris__cabinet {
  box-sizing: border-box;
  min-inline-size: 0;
  inline-size: 100%;
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 1.25rem;
  padding: 0.65rem;
  background: linear-gradient(145deg, #4b397e, #241c4a 58%, #17132f);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 22%), 0 1.4rem 3rem rgb(0 0 0 / 28%);
}

.vgi-tetris__cabinet-lights {
  display: flex;
  gap: 0.35rem;
  padding: 0.1rem 0.2rem 0.55rem;
}

.vgi-tetris__cabinet-lights span {
  inline-size: 0.48rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #ff6b5e;
  box-shadow: 0 0 0.5rem currentColor;
}

.vgi-tetris__cabinet-lights span:nth-child(2) { background: #ffd45c; }
.vgi-tetris__cabinet-lights span:nth-child(3) { background: #62e6b6; }

.vgi-tetris__screen {
  position: relative;
  overflow: hidden;
  border: 2px solid #090b19;
  border-radius: 0.8rem;
  padding: 0.42rem;
  background: #060817;
  box-shadow: inset 0 0 2rem #000, 0 0 0 1px rgb(255 255 255 / 9%);
}

.vgi-tetris__screen::after {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, transparent 0 3px, rgb(255 255 255 / 2.5%) 4px);
  content: "";
}

.vgi-tetris__board {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 2px;
  overflow: hidden;
  border-radius: 0.38rem;
  background: #080a19;
  aspect-ratio: 1 / 2;
}

.vgi-tetris__board > span,
.vgi-tetris__mini-grid > span {
  border: 1px solid rgb(132 150 198 / 7%);
  border-radius: 2px;
  background: rgb(58 68 105 / 10%);
}

.vgi-tetris__board > span.is-filled,
.vgi-tetris__mini-grid > span.is-filled {
  border-color: color-mix(in srgb, var(--piece-color) 58%, #fff);
  background:
    linear-gradient(135deg, rgb(255 255 255 / 38%), transparent 30%),
    linear-gradient(145deg, var(--piece-color), color-mix(in srgb, var(--piece-color) 68%, #11152e));
  box-shadow: inset -0.16rem -0.16rem 0 rgb(0 0 0 / 18%), inset 0.12rem 0.12rem 0 rgb(255 255 255 / 25%);
}

.vgi-tetris__board > span.is-ghost {
  border-color: color-mix(in srgb, var(--piece-color) 70%, transparent);
  background: color-mix(in srgb, var(--piece-color) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--piece-color) 45%, transparent);
}

.vgi-arcade--tetris.is-paused .vgi-tetris__screen::before {
  content: "In pausa";
}

.vgi-tetris__board > span.is-active {
  filter: brightness(1.14) saturate(1.12);
  box-shadow: inset -0.16rem -0.16rem 0 rgb(0 0 0 / 18%), inset 0.12rem 0.12rem 0 rgb(255 255 255 / 38%), 0 0 0.6rem color-mix(in srgb, var(--piece-color) 75%, transparent);
}

.is-piece--i { --piece-color: #45d6ec; }
.is-piece--j { --piece-color: #557cff; }
.is-piece--l { --piece-color: #ff914d; }
.is-piece--o { --piece-color: #ffd84d; }
.is-piece--s { --piece-color: #62db87; }
.is-piece--t { --piece-color: #a875f5; }
.is-piece--z { --piece-color: #ff6475; }
.is-piece--legacy { --piece-color: #6df2d0; }

.vgi-tetris__panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-inline-size: 0;
  gap: 1rem;
  border: 1px solid var(--vgi-arcade-line);
  border-radius: 1.2rem;
  padding: clamp(1rem, 3vw, 1.4rem);
  background: var(--vgi-arcade-panel);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 9%), 0 1rem 2rem rgb(0 0 0 / 15%);
  backdrop-filter: blur(12px);
}

.vgi-tetris__settings {
  display: grid;
  min-inline-size: 0;
  align-items: stretch;
}

.vgi-tetris__settings label,
.vgi-tetris__settings select {
  min-inline-size: 0;
  inline-size: 100%;
}

.vgi-tetris__settings > p {
  margin: 0;
}

.vgi-tetris__hud {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 1rem;
}

.vgi-tetris__piece-tools {
  display: grid;
  min-inline-size: 0;
  align-items: start;
  gap: 0.7rem;
}

.vgi-tetris__hud > p {
  margin: 0;
  color: #fff;
  font-size: clamp(1.05rem, 2.5vw, 1.35rem);
  font-variant-numeric: tabular-nums;
  font-weight: 850;
}

.vgi-tetris__next-wrap {
  display: grid;
  inline-size: 100%;
  gap: 0.35rem;
  color: var(--vgi-arcade-muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-align: center;
  text-transform: uppercase;
}

.vgi-tetris__next,
.vgi-tetris__hold {
  box-sizing: border-box;
  display: flex;
  inline-size: 100%;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid var(--vgi-arcade-line);
  border-radius: 0.75rem;
  padding: 0.42rem;
  background: rgb(4 5 18 / 62%);
}

.vgi-tetris__mini-grid {
  display: grid;
  grid-template-columns: repeat(4, 0.8rem);
  grid-template-rows: repeat(4, 0.8rem);
  gap: 2px;
}

.vgi-tetris__play-actions {
  border: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.vgi-tetris__controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(3rem, 1fr));
  gap: 0.55rem;
  inline-size: min(100%, 23rem);
}

.vgi-tetris__controls button {
  border-color: rgb(255 255 255 / 15%);
  background: linear-gradient(145deg, rgb(255 255 255 / 13%), rgb(255 255 255 / 5%));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 15%), 0 0.35rem 0.8rem rgb(0 0 0 / 12%);
  color: #fff;
  font-size: 1.12rem;
  touch-action: manipulation;
}

.vgi-tetris__controls button:hover:not(:disabled) {
  background: linear-gradient(145deg, rgb(166 133 255 / 34%), rgb(255 255 255 / 8%));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 20%), 0 0.5rem 1rem rgb(0 0 0 / 18%);
}

.vgi-tetris__controls [data-vgi-tetris-action="down"] {
  grid-column: 2;
}

.vgi-tetris__controls [data-vgi-tetris-action="hold"] {
  grid-column: 1 / 3;
}

.vgi-tetris__controls [data-vgi-tetris-action="drop"] {
  grid-column: 3;
  background: linear-gradient(145deg, #755fdd, #5141a8);
}

.vgi-tetris__keyboard-hint {
  margin: 0;
  color: var(--vgi-arcade-muted);
  font-size: 0.82rem;
}

.vgi-arcade__status {
  margin: 0;
  border: 1px solid var(--vgi-arcade-line);
  border-inline-start: 0.35rem solid #6df2d0;
  border-radius: 0.2rem 0.8rem 0.8rem 0.2rem;
  padding: 0.8rem 1rem;
  background: rgb(5 7 23 / 34%);
  color: #f5f2ff;
  font-weight: 680;
}

@keyframes vgi-memory-match {
  0% { scale: 1; }
  55% { scale: 1.08; }
  100% { scale: 1; }
}

@keyframes vgi-memory-win {
  0%, 100% { box-shadow: inset 0 0 2.5rem rgb(0 0 0 / 28%), 0 1rem 2.5rem rgb(0 0 0 / 15%); }
  45% { box-shadow: inset 0 0 3rem rgb(109 242 208 / 15%), 0 0 2.4rem rgb(109 242 208 / 44%); }
}

@media (max-width: 42rem) {
  .vgi-control-frame--session-4 { --vgi-control-session-columns: 2; }

  .vgi-arcade__intro {
    grid-template-columns: 1fr;
  }

  .vgi-arcade__marque {
    position: absolute;
    inset-block-start: 1rem;
    inset-inline-end: 1rem;
    inline-size: 4.2rem;
    opacity: 0.42;
  }

  .vgi-arcade__intro > div:first-child {
    position: relative;
    z-index: 1;
  }

  .vgi-arcade__intro h2 {
    max-inline-size: 10ch;
    font-size: clamp(2.15rem, 13vw, 3.35rem);
  }

  .vgi-memory__board {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.42rem;
  }

  .vgi-memory__card {
    border-radius: 0.72rem;
  }

  .vgi-tetris__layout {
    grid-template-columns: 1fr;
  }

  .vgi-tetris__playfield {
    inline-size: min(100%, 20.5rem);
    margin-inline: auto;
  }

  .vgi-tetris__cabinet {
    inline-size: 100%;
  }

  .vgi-tetris__panel {
    padding: 0.9rem;
  }

  .vgi-tetris__controls {
    inline-size: 100%;
  }

  .vgi-tetris__piece-tools {
    inline-size: 4.75rem;
    align-content: start;
  }

  .vgi-tetris__next-wrap {
    font-size: 0.61rem;
    letter-spacing: 0.04em;
  }

  .vgi-tetris__next,
  .vgi-tetris__hold {
    flex: none;
  }

  .vgi-tetris__mini-grid {
    grid-template-columns: repeat(4, 0.68rem);
    grid-template-rows: repeat(4, 0.68rem);
  }

  .vgi-tetris__controls [data-vgi-tetris-action="down"] {
    grid-column: 1;
  }

  .vgi-tetris__controls [data-vgi-tetris-action="hold"] {
    grid-column: 2;
  }

  .vgi-tetris__controls [data-vgi-tetris-action="drop"] {
    grid-column: 3;
  }

  .vgi-tetris__controls button {
    min-inline-size: 0;
    padding-inline: 0.45rem;
    font-size: 1rem;
  }

  .vgi-arcade__view-actions button {
    inline-size: 100%;
  }

  .vgi-arcade:fullscreen,
  .vgi-arcade.is-focus-mode {
    gap: 0.75rem;
  }

  .vgi-arcade--tetris:fullscreen .vgi-tetris__panel,
  .vgi-arcade--tetris.is-focus-mode .vgi-tetris__panel {
    padding: 0.75rem;
  }

  .vgi-tetris__keyboard-hint {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vgi-arcade *,
  .vgi-arcade *::before,
  .vgi-arcade *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

.vgi-scoreboard {
  display: grid;
  grid-template-columns: minmax(12rem, 1.2fr) minmax(10rem, 0.8fr) minmax(13rem, 1fr);
  align-items: center;
  gap: 1rem;
  border: 1px solid rgb(109 242 208 / 28%);
  border-radius: 1rem;
  padding: clamp(0.9rem, 2vw, 1.25rem);
  background: linear-gradient(120deg, rgb(7 10 29 / 88%), rgb(20 42 56 / 78%));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 8%);
}

.vgi-scoreboard h3,
.vgi-scoreboard p {
  margin-block: 0.1rem;
  color: #fff;
}

.vgi-scoreboard [data-vgi-score-status] {
  color: #c8c5dc;
  font-size: 0.88rem;
}

.vgi-scoreboard__personal {
  border-inline-start: 1px solid rgb(255 255 255 / 14%);
  padding-inline-start: 1rem;
  font-weight: 800;
}

.vgi-scoreboard__leaders {
  display: grid;
  gap: 0.3rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.vgi-scoreboard__leaders li {
  display: flex;
  justify-content: space-between;
  gap: 0.7rem;
  color: #e7e4f3;
  font-size: 0.86rem;
}

.vgi-tetris__panel .vgi-scoreboard {
  grid-template-columns: minmax(0, 1fr);
  min-inline-size: 0;
}

.vgi-tetris__panel .vgi-scoreboard__personal {
  border-inline-start: 0;
  border-block-start: 1px solid rgb(255 255 255 / 14%);
  padding-block-start: 0.8rem;
  padding-inline-start: 0;
}

.vgi-tetris__panel .vgi-scoreboard__leaders {
  min-inline-size: 0;
}

.vgi-score-conversion {
  box-sizing: border-box;
  inline-size: min(calc(100% - 1.5rem), 32rem);
  max-block-size: min(90dvh, 44rem);
  overflow: auto;
  border: 1px solid rgb(143 122 255 / 58%);
  border-radius: 1.35rem;
  padding: 0;
  background:
    radial-gradient(circle at 88% 5%, rgb(120 91 255 / 28%), transparent 15rem),
    linear-gradient(145deg, #181236, #0d1730);
  box-shadow: 0 2rem 6rem rgb(0 0 0 / 62%), inset 0 1px 0 rgb(255 255 255 / 14%);
  color: #fff;
}

.vgi-score-conversion::backdrop {
  background: rgb(3 5 17 / 78%);
  backdrop-filter: blur(7px);
}

.vgi-score-conversion__card {
  position: relative;
  display: grid;
  gap: 0.85rem;
  padding: clamp(1.25rem, 5vw, 2rem);
}

.vgi-score-conversion h3,
.vgi-score-conversion p {
  margin: 0;
}

.vgi-score-conversion h3 {
  max-inline-size: 13ch;
  padding-inline-end: 2.75rem;
  font-size: clamp(1.75rem, 7vw, 2.6rem);
  line-height: 1;
  text-wrap: balance;
}

.vgi-score-conversion__score {
  color: #ffe680;
  font-size: clamp(1.4rem, 6vw, 2rem);
  font-variant-numeric: tabular-nums;
  font-weight: 900;
}

.vgi-score-conversion__close {
  position: absolute;
  z-index: 1;
  inset-block-start: 0.8rem;
  inset-inline-end: 0.8rem;
  min-inline-size: 48px;
  padding: 0.5rem;
  font-size: 1.5rem;
  line-height: 1;
}

.vgi-score-conversion__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
  margin-block-start: 0.45rem;
}

.vgi-score-conversion__actions > * {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 52px;
  text-align: center;
}

.vgi-score-conversion__later {
  grid-column: 1 / -1;
}

.vgi-original-game--timeline-heist { --vgi-arcade-accent: #58e0cf; }
.vgi-original-game--speedrun-architect { --vgi-arcade-accent: #ffbd4a; }
.vgi-original-game--boss-pattern { --vgi-arcade-accent: #ff5b7f; }
.vgi-original-game--patch-detective { --vgi-arcade-accent: #89f07c; }
.vgi-original-game--archeologo-glitch { --vgi-arcade-accent: #b68cff; }

.vgi-original-game__sigil {
  position: relative;
  inline-size: clamp(5.5rem, 14vw, 9rem);
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--vgi-arcade-accent), transparent 55%);
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--vgi-arcade-accent), transparent 65%) 0 22%, transparent 23% 100%);
  box-shadow: inset 0 0 2rem color-mix(in srgb, var(--vgi-arcade-accent), transparent 78%), 0 0 2rem color-mix(in srgb, var(--vgi-arcade-accent), transparent 84%);
}

.vgi-original-game__sigil::before,
.vgi-original-game__sigil::after,
.vgi-original-game__sigil span {
  position: absolute;
  inset: 14%;
  border: 1px solid color-mix(in srgb, var(--vgi-arcade-accent), white 18%);
  content: "";
  rotate: 45deg;
}

.vgi-original-game__sigil::after { inset: 28%; rotate: 0deg; }
.vgi-original-game__sigil span:nth-child(2) { inset: 40% 8%; rotate: 0deg; }
.vgi-original-game__sigil span:nth-child(3) { inset: 8% 40%; rotate: 0deg; }

.vgi-original-game__console {
  display: grid;
  gap: 1rem;
}

.vgi-original-game__hud {
  display: grid;
  grid-template-columns: repeat(2, minmax(9rem, 13rem)) minmax(14rem, 1fr);
  align-items: end;
  gap: 0.8rem;
}

.vgi-original-game__hud label {
  display: grid;
  gap: 0.35rem;
  color: #d7d3e7;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.vgi-original-game__hud select {
  min-block-size: 2.9rem;
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 0.65rem;
  padding-inline: 0.8rem;
  background: #15122e;
  color: #fff;
}

.vgi-original-game__hud p {
  margin: 0;
  border-inline-start: 0.22rem solid var(--vgi-arcade-accent);
  padding: 0.72rem 0.9rem;
  background: rgb(255 255 255 / 5%);
  color: #fff;
  font-variant-numeric: tabular-nums;
  font-weight: 850;
}

.vgi-original-game__mission {
  position: relative;
  display: grid;
  gap: 0.8rem;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 15%);
  border-radius: 1.2rem;
  padding: clamp(0.8rem, 2vw, 1.2rem);
  background: rgb(4 7 25 / 68%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 8%), 0 1rem 2rem rgb(0 0 0 / 15%);
}

.vgi-original-game__mission > p {
  margin: 0;
  color: #d7d3e7;
}

.vgi-original-game__stage {
  min-block-size: clamp(19rem, 48vw, 35rem);
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 0.9rem;
  background: #090c20;
}

.vgi-original-game__controls button {
  min-block-size: 3rem;
  border: 1px solid rgb(255 255 255 / 18%);
  background: linear-gradient(145deg, rgb(255 255 255 / 15%), rgb(255 255 255 / 6%));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 16%), 0 0.35rem 0.8rem rgb(0 0 0 / 16%);
  color: #fff;
  touch-action: manipulation;
}

.vgi-original-game:fullscreen .vgi-original-game__console,
.vgi-original-game.is-focus-mode .vgi-original-game__console {
  min-block-size: calc(100dvh - 5rem);
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.vgi-original-game:fullscreen .vgi-original-game__stage,
.vgi-original-game.is-focus-mode .vgi-original-game__stage {
  min-block-size: 15rem;
  block-size: clamp(15rem, 52dvh, 35rem);
}

.vgi-original-game__controls button:hover:not(:disabled),
.vgi-original-game__controls button.is-selected {
  border-color: var(--vgi-arcade-accent);
  background: color-mix(in srgb, var(--vgi-arcade-accent), #18152f 62%);
}

.vgi-timeline {
  display: grid;
  place-items: center;
  background:
    linear-gradient(rgb(88 224 207 / 5%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(88 224 207 / 5%) 1px, transparent 1px),
    radial-gradient(circle at 50% 45%, #183952, #070b1d 72%);
  background-size: 1.4rem 1.4rem, 1.4rem 1.4rem, auto;
  perspective: 60rem;
}

.vgi-timeline__grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-size), 1fr);
  gap: clamp(0.22rem, 0.8vw, 0.45rem);
  inline-size: min(90%, 31rem);
  padding: clamp(0.7rem, 2vw, 1.3rem);
  border: 1px solid rgb(88 224 207 / 26%);
  border-radius: 1rem;
  background: rgb(5 15 32 / 88%);
  box-shadow: 0 1.5rem 3rem rgb(0 0 0 / 35%);
  transform: rotateX(4deg);
}

.vgi-timeline__grid span {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border: 1px solid rgb(105 201 218 / 16%);
  border-radius: 0.35rem;
  background: linear-gradient(145deg, rgb(32 74 95 / 76%), rgb(10 30 51 / 82%));
  color: #fff;
  font-size: clamp(0.8rem, 3vw, 1.45rem);
  transition: 160ms ease;
}

.vgi-timeline__grid .is-wall { background: repeating-linear-gradient(135deg, #172339 0 0.35rem, #263653 0.36rem 0.7rem); }
.vgi-timeline__grid .is-player { border-color: #fff; background: #f5f7ff; box-shadow: 0 0 1.2rem rgb(255 255 255 / 75%); color: #132039; }
.vgi-timeline__grid .is-echo { border-color: #58e0cf; background: rgb(31 151 157 / 50%); color: #a8fff3; }
.vgi-timeline__grid .is-core { color: #ffd86b; text-shadow: 0 0 1rem #ffd86b; }
.vgi-timeline__grid .is-exit { border-color: #58e0cf; color: #80ffec; }
.vgi-timeline__grid .is-plate { color: #ff92dd; }
.vgi-timeline__grid .is-gate.is-closed { background: #532754; color: #ff9adb; }
.vgi-timeline__grid .is-hint { animation: vgi-signal 0.6s ease-in-out 2; }

.vgi-architect {
  display: grid;
  align-content: end;
  overflow: hidden;
  padding: clamp(1rem, 4vw, 2.5rem);
  background:
    radial-gradient(circle at 76% 12%, #ffd46a 0 2%, transparent 2.2%),
    linear-gradient(180deg, #1d2760 0%, #674c80 48%, #f19a64 75%, #15152f 76%);
}

.vgi-architect__skyline {
  min-block-size: 7rem;
  background: linear-gradient(90deg, #11142f 8%, transparent 8% 11%, #171936 11% 23%, transparent 23% 27%, #10132d 27% 44%, transparent 44% 48%, #171936 48% 69%, transparent 69% 74%, #11142f 74% 89%, transparent 89%);
  clip-path: polygon(0 100%, 0 50%, 8% 50%, 8% 25%, 20% 25%, 20% 60%, 34% 60%, 34% 5%, 49% 5%, 49% 42%, 66% 42%, 66% 18%, 78% 18%, 78% 65%, 100% 65%, 100% 100%);
}

.vgi-architect__track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(3.2rem, 1fr));
  align-items: end;
  gap: 0.45rem;
  border-block-end: 0.65rem solid #2e2a4f;
  padding-block: 1rem 0.4rem;
}

.vgi-architect__hazard {
  min-block-size: 5.5rem;
  border: 1px dashed rgb(255 255 255 / 34%);
  border-radius: 0.6rem 0.6rem 0.2rem 0.2rem;
  background: rgb(14 15 39 / 65%);
  color: #ffcf68;
  font-size: 1.25rem;
  letter-spacing: -0.15em;
}

.vgi-architect__hazard.is-equipped { border-style: solid; border-color: #ffcf68; background: rgb(255 187 66 / 18%); letter-spacing: 0; }
.vgi-architect__hazard.is-runner { box-shadow: 0 0 0 0.2rem #fff, 0 0 1.5rem #ffcf68; }
.vgi-architect__hazard.is-crashed { border-color: #ff5b7f; animation: vgi-shake 0.35s ease; }
.vgi-architect__hazard.is-hint { box-shadow: 0 0 0 0.2rem #ffcf68, 0 0 1.5rem #ffcf68; }
.vgi-architect__runner { position: absolute; inset-block-end: -0.15rem; inset-inline-start: -0.7rem; color: #fff; text-shadow: 0 0 0.7rem #fff; }

.vgi-boss {
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at center, rgb(255 67 122 / 22%), transparent 35%),
    repeating-conic-gradient(from 0deg at 50% 50%, rgb(255 255 255 / 2%) 0 10deg, transparent 10deg 20deg),
    #120b23;
}

.vgi-boss__arena {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: min(88%, 31rem);
  aspect-ratio: 1;
  border: 1px solid rgb(255 91 127 / 28%);
  border-radius: 50%;
  box-shadow: inset 0 0 4rem rgb(255 43 105 / 12%), 0 0 3rem rgb(0 0 0 / 28%);
}

.vgi-boss__arena::before,
.vgi-boss__arena::after {
  position: absolute;
  inset: 13%;
  border: 1px dashed rgb(255 255 255 / 18%);
  border-radius: 50%;
  content: "";
}

.vgi-boss__arena::after { inset: 27%; border-style: solid; }
.vgi-boss__core { position: relative; z-index: 2; display: grid; place-items: center; inline-size: 36%; aspect-ratio: 1; border: 1px solid #ff7694; border-radius: 38% 62% 45% 55%; background: radial-gradient(circle at 35% 30%, #ffb5c5, #b51e55 35%, #360d3a 72%); box-shadow: 0 0 2.5rem rgb(255 62 118 / 48%); color: #fff; font-size: clamp(2.3rem, 9vw, 5rem); transition: 160ms ease; }
.vgi-boss__core.is-up { translate: 0 -18%; }
.vgi-boss__core.is-right { translate: 18% 0; }
.vgi-boss__core.is-down { translate: 0 18%; }
.vgi-boss__core.is-left { translate: -18% 0; }
.vgi-boss__core.is-hit { animation: vgi-shake 0.35s ease; }
.vgi-boss__core.is-dodged { border-color: #73f6d1; box-shadow: 0 0 2.5rem rgb(74 244 200 / 58%); }
.vgi-boss__telegraph { position: absolute; inset-block-end: 17%; display: flex; gap: 0.35rem; color: #ffb5c5; font-size: 1.3rem; }
.vgi-boss__hearts { position: absolute; inset-block-start: 7%; margin: 0; color: #ff7598; letter-spacing: 0.3em; }

.vgi-patch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.6rem, 2vw, 1.2rem);
  padding: clamp(0.6rem, 2vw, 1rem);
  background: linear-gradient(145deg, #0d1d27, #081016);
}

.vgi-patch__panel {
  display: grid;
  align-content: start;
  gap: 0.5rem;
  border: 1px solid rgb(137 240 124 / 18%);
  border-radius: 0.7rem;
  padding: 0.65rem;
  background: #101d27;
}

.vgi-patch__panel > strong { color: #b7ffad; font-family: monospace; letter-spacing: 0.08em; }
.vgi-patch__grid { display: grid; grid-template-columns: repeat(var(--patch-columns), 1fr); gap: 2px; }
.vgi-patch__grid span,
.vgi-patch__grid button { position: relative; aspect-ratio: 1; min-inline-size: 0; min-block-size: 0; border: 0; border-radius: 0.2rem; padding: 0; }
.vgi-patch__grid .is-water { background: repeating-linear-gradient(0deg, #236fa1 0 22%, #2d8bbb 23% 44%); }
.vgi-patch__grid .is-grass { background: linear-gradient(135deg, #3f8c59 50%, #51a968 51%); }
.vgi-patch__grid .is-stone { background: linear-gradient(45deg, #64707c 48%, #7c8993 49%); }
.vgi-patch__grid .is-tree { background: radial-gradient(circle at 50% 40%, #43a25a 0 36%, transparent 37%), linear-gradient(90deg, transparent 42%, #704832 43% 58%, transparent 59%), #397751; }
.vgi-patch__grid .is-crystal { background: conic-gradient(from 45deg, #a76cff, #6f42bd, #d8b1ff, #a76cff); }
.vgi-patch__grid .is-lava { background: repeating-linear-gradient(135deg, #ffca55 0 14%, #e94d3c 15% 35%); }
.vgi-patch__grid .is-found { box-shadow: inset 0 0 0 0.22rem #a9ff9f; filter: brightness(1.35); }
.vgi-patch__grid .is-wrong { box-shadow: inset 0 0 0 0.2rem #ff5878; }
.vgi-patch__grid .is-hint { animation: vgi-signal 0.6s ease-in-out 2; }

.vgi-glitch {
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    linear-gradient(rgb(185 140 255 / 4%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(185 140 255 / 4%) 1px, transparent 1px),
    radial-gradient(circle at center, #252051, #08091b 72%);
  background-size: 1.5rem 1.5rem, 1.5rem 1.5rem, auto;
}

.vgi-glitch__grid {
  display: grid;
  grid-template-columns: repeat(var(--glitch-size), 1fr);
  gap: clamp(0.28rem, 1vw, 0.55rem);
  inline-size: min(88%, 29rem);
  padding: clamp(0.7rem, 2vw, 1.15rem);
  border: 1px solid rgb(182 140 255 / 34%);
  border-radius: 1rem;
  background: rgb(6 6 24 / 84%);
  box-shadow: 0 1.4rem 3rem rgb(0 0 0 / 35%);
}

.vgi-glitch__tile {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  min-inline-size: 0;
  min-block-size: 0;
  border: 1px solid rgb(255 255 255 / 22%);
  border-radius: 0.55rem;
  padding: 0;
  background:
    linear-gradient(135deg, transparent 0 47%, rgb(255 255 255 / 12%) 48% 52%, transparent 53%),
    linear-gradient(calc(var(--fragment) * 19deg), #8b62e7, #345eac 55%, #153968);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 22%), 0 0.35rem 0.8rem rgb(0 0 0 / 22%);
  color: #fff;
  font-family: monospace;
  font-size: clamp(0.75rem, 3vw, 1.25rem);
  text-shadow: 0 1px 0 #000;
}

.vgi-glitch__tile:disabled:not(.is-void) { opacity: 0.82; }
.vgi-glitch__tile.is-void { border-style: dashed; background: rgb(3 5 17 / 65%); box-shadow: inset 0 0 1rem rgb(0 0 0 / 40%); }
.vgi-glitch__grid.is-preview .vgi-glitch__tile { filter: brightness(1.45) saturate(0.7); box-shadow: inset 0 0 0 0.18rem #fff; }

@keyframes vgi-signal {
  50% { box-shadow: 0 0 0 0.25rem var(--vgi-arcade-accent), 0 0 1.5rem var(--vgi-arcade-accent); filter: brightness(1.45); }
}

@keyframes vgi-shake {
  25% { translate: -0.35rem 0; }
  75% { translate: 0.35rem 0; }
}

@media (max-width: 48rem) {
  .vgi-scoreboard { grid-template-columns: 1fr; }
  .vgi-scoreboard__personal { border-inline-start: 0; border-block-start: 1px solid rgb(255 255 255 / 14%); padding-block-start: 0.8rem; padding-inline-start: 0; }
  .vgi-original-game__hud { grid-template-columns: repeat(2, 1fr); }
  .vgi-original-game__hud p { grid-column: 1 / -1; }
  .vgi-original-game__stage { min-block-size: 20rem; }
}

@media (max-width: 32rem) {
  .vgi-control-frame--session-3 {
    --vgi-control-session-columns: 2;
    --vgi-control-session-width: 21rem;
  }

  .vgi-control-frame--session-3 .vgi-control-frame__session > button:first-child {
    grid-column: 1 / -1;
  }

  .vgi-control-frame--gamepad .vgi-control-frame__gameplay {
    grid-template-columns: repeat(3, minmax(4.75rem, 1fr));
  }

  .vgi-control-frame--gamepad [data-vgi-control="secondary"] { grid-column: 2; grid-row: 3; }
  .vgi-control-frame--gamepad [data-vgi-control="fire"] { grid-column: 1; grid-row: 4; }
  .vgi-control-frame--gamepad [data-vgi-control="jump"] { grid-column: 2; grid-row: 4; }
  .vgi-control-frame--gamepad [data-vgi-control="utility"] { grid-column: 3; grid-row: 4; }

  .vgi-score-conversion__actions {
    grid-template-columns: 1fr;
  }

  .vgi-score-conversion__later {
    grid-column: auto;
  }

  .vgi-original-game__hud { grid-template-columns: 1fr; }
  .vgi-original-game__hud p { grid-column: auto; }
  .vgi-patch { grid-template-columns: 1fr; }
  .vgi-patch__panel { padding: 0.4rem; }
  .vgi-patch__grid span,
  .vgi-patch__grid button { min-block-size: 2rem; }
}

/* Segnavia — code-native atlas conceived by the persistent VGI Game Creator. */
.vgi-segnavia {
  --vgi-arcade-accent: #53e0d7;
  --vgi-arcade-ink: #f5f7fa;
  --vgi-arcade-muted: #c7d2e0;
  --vgi-arcade-panel: #151e30;
  --vgi-arcade-line: rgb(98 168 255 / 24%);
  background:
    radial-gradient(circle at 78% 18%, rgb(83 224 215 / 13%), transparent 24rem),
    radial-gradient(circle at 8% 90%, rgb(155 140 255 / 13%), transparent 25rem),
    linear-gradient(145deg, #0d1321, #111a2b 55%, #0b1724);
}

.vgi-segnavia::before {
  background-image:
    linear-gradient(rgb(98 168 255 / 4%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(98 168 255 / 4%) 1px, transparent 1px),
    radial-gradient(circle, rgb(83 224 215 / 16%) 1px, transparent 1.5px);
  background-size: 2rem 2rem, 2rem 2rem, 0.5rem 0.5rem;
}

.vgi-segnavia .vgi-eyebrow { color: #7cffe0; }

.vgi-segnavia__intro h2 { max-inline-size: 14ch; }

.vgi-segnavia__emblem {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 0.38rem;
  inline-size: clamp(6.4rem, 14vw, 10rem);
  aspect-ratio: 1;
  border: 1px solid rgb(83 224 215 / 35%);
  border-radius: 1.8rem 0.45rem 1.8rem 1.8rem;
  padding: 1rem;
  background: linear-gradient(145deg, rgb(21 30 48 / 96%), rgb(34 50 74 / 76%));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 12%), 0 1rem 2.5rem rgb(0 0 0 / 24%);
  rotate: 4deg;
}

.vgi-segnavia__emblem::before {
  position: absolute;
  inset: 48% 14%;
  block-size: 0.42rem;
  border-radius: 999px;
  background: #53e0d7;
  box-shadow: 0 0 1rem #53e0d7;
  content: "";
}

.vgi-segnavia__emblem span {
  z-index: 1;
  border: 2px solid #62a8ff;
  border-radius: 50%;
  background: #0d1321;
  box-shadow: 0 0 0.7rem rgb(98 168 255 / 45%);
}

.vgi-segnavia__emblem span:nth-child(1) { grid-column: 1; grid-row: 2; }
.vgi-segnavia__emblem span:nth-child(2) { grid-column: 2; grid-row: 1; border-color: #ffc857; }
.vgi-segnavia__emblem span:nth-child(3) { grid-column: 2; grid-row: 2; }
.vgi-segnavia__emblem span:nth-child(4) { grid-column: 2; grid-row: 3; border-color: #9b8cff; }
.vgi-segnavia__emblem span:nth-child(5) { grid-column: 3; grid-row: 2; border-color: #7cffb2; }

.vgi-segnavia__console {
  display: grid;
  grid-template-columns: minmax(15.5rem, 0.68fr) minmax(0, 1.5fr);
  align-items: start;
  gap: clamp(0.9rem, 2vw, 1.5rem);
}

.vgi-segnavia__command-deck {
  display: grid;
  gap: 0.85rem;
  border: 1px solid rgb(98 168 255 / 22%);
  border-radius: 1.15rem;
  padding: 0.9rem;
  background:
    linear-gradient(120deg, rgb(255 255 255 / 3%), transparent 35%),
    rgb(13 19 33 / 76%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 7%);
}

.vgi-segnavia__selectors {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

.vgi-segnavia__selectors label {
  display: grid;
  gap: 0.35rem;
}

.vgi-segnavia__selectors label > span,
.vgi-segnavia__readouts span {
  color: #9baec4;
  font-size: 0.72rem;
  font-weight: 820;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.vgi-segnavia__selectors select {
  inline-size: 100%;
  font-size: 0.875rem;
}

.vgi-segnavia__readouts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid rgb(98 168 255 / 18%);
  border-radius: 0.85rem;
  background: #101a2a;
}

.vgi-segnavia__readouts p {
  display: grid;
  gap: 0.18rem;
  margin: 0;
  border-inline-end: 1px solid rgb(98 168 255 / 13%);
  border-block-end: 1px solid rgb(98 168 255 / 13%);
  padding: 0.65rem;
}

.vgi-segnavia__readouts p:nth-child(even) { border-inline-end: 0; }
.vgi-segnavia__readouts p:nth-last-child(-n + 2) { border-block-end: 0; }

.vgi-segnavia__readouts strong {
  color: #f5f7fa;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1rem;
}

.vgi-segnavia__brief {
  border-inline-start: 3px solid #53e0d7;
  padding: 0.15rem 0 0.15rem 0.8rem;
  color: #c7d2e0;
  font-size: 0.88rem;
}

.vgi-segnavia__brief p { margin-block: 0 0.35rem; }
.vgi-segnavia__brief ol { margin: 0; padding-inline-start: 1.15rem; }
.vgi-segnavia__brief li + li { margin-block-start: 0.25rem; }

.vgi-segnavia__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.8rem;
  margin-block-start: 0.75rem;
}

.vgi-segnavia__legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  color: #f5f7fa;
  font-size: 0.76rem;
  font-weight: 760;
}

.vgi-segnavia__legend i {
  display: grid;
  place-items: center;
  inline-size: 1.35rem;
  aspect-ratio: 1;
  border: 2px solid;
  border-radius: 0.35rem;
}

.vgi-segnavia__legend i.is-pivot { border-color: #ffc857; }
.vgi-segnavia__legend i.is-pivot::after { color: #ffc857; content: "⌞"; }
.vgi-segnavia__legend i.is-beam { border-color: #9b8cff; }
.vgi-segnavia__legend i.is-beam::after { color: #9b8cff; content: "━"; }

.vgi-segnavia__toolbar {
  gap: 0.5rem;
}

.vgi-segnavia__control-frame { --vgi-control-frame-line: rgb(83 224 215 / 22%); }

.vgi-segnavia__reset-local {
  min-block-size: 44px !important;
  border: 0 !important;
  padding: 0.35rem !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #aab7c8 !important;
  font-size: 0.76rem;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.vgi-segnavia__atlas { min-inline-size: 0; }

.vgi-segnavia__plate {
  position: relative;
  overflow: hidden;
  border: 1px solid rgb(83 224 215 / 30%);
  border-radius: 1.3rem 0.45rem 1.3rem 1.3rem;
  padding: clamp(0.55rem, 1.6vw, 1rem);
  background:
    linear-gradient(135deg, rgb(83 224 215 / 5%), transparent 36%),
    #10192a;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 9%), 0 1.2rem 2.5rem rgb(0 0 0 / 24%);
}

.vgi-segnavia__plate::after {
  position: absolute;
  inset: auto 1rem 0.6rem auto;
  color: rgb(83 224 215 / 24%);
  font: 600 0.62rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.15em;
  content: "ATLANTE / SEGNALE";
}

.vgi-segnavia__plate-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  border-block-end: 1px solid rgb(98 168 255 / 18%);
  padding: 0.15rem 0.2rem 0.55rem;
  color: #86a1bd;
  font: 700 0.65rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.13em;
}

.vgi-segnavia__board {
  --vgi-segnavia-gap: clamp(0.2rem, 0.7vw, 0.42rem);
  display: grid;
  grid-template-columns: repeat(var(--vgi-segnavia-cols), minmax(0, 1fr));
  gap: var(--vgi-segnavia-gap);
  inline-size: min(100%, 42rem);
  margin: 0 auto;
  padding-block: clamp(0.7rem, 2vw, 1.15rem) 1.35rem;
}

.vgi-segnavia__cell,
.vgi-segnavia__wall,
.vgi-segnavia__void {
  position: relative;
  box-sizing: border-box;
  min-inline-size: 0;
  aspect-ratio: 1;
}

.vgi-segnavia .vgi-segnavia__cell {
  display: grid;
  place-items: center;
  min-block-size: 44px;
  min-inline-size: 44px;
  overflow: visible;
  border: 1px solid rgb(98 168 255 / 22%);
  border-radius: 0.7rem 0.18rem 0.7rem 0.7rem;
  padding: 0;
  background:
    linear-gradient(135deg, rgb(255 255 255 / 7%), transparent 48%),
    #1a2940;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 7%);
  color: #f5f7fa;
  isolation: isolate;
}

.vgi-segnavia .vgi-segnavia__cell::before {
  position: absolute;
  z-index: 0;
  inset: 0.27rem;
  border: 1px solid rgb(98 168 255 / 10%);
  border-radius: 0.48rem 0.08rem 0.48rem 0.48rem;
  content: "";
}

.vgi-segnavia .vgi-segnavia__cell:disabled {
  cursor: default;
  opacity: 1;
}

.vgi-segnavia .vgi-segnavia__cell:hover:not(:disabled) {
  border-color: #62a8ff;
  background-color: #223b5d;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 12%), 0 0 0.8rem rgb(98 168 255 / 16%);
}

.vgi-segnavia .vgi-segnavia__cell:focus-visible {
  z-index: 8;
  outline: 2px solid #f5f7fa;
  outline-offset: 2px;
  box-shadow: 0 0 0 5px #53e0d7, 0 0 1.2rem rgb(83 224 215 / 45%);
}

.vgi-segnavia__wall {
  border: 1px solid rgb(91 103 122 / 48%);
  border-radius: 0.55rem 0.15rem 0.55rem 0.55rem;
  background:
    repeating-linear-gradient(135deg, rgb(199 210 224 / 9%) 0 3px, transparent 3px 8px),
    #182237;
  box-shadow: inset 0 0 0 0.22rem #10192a;
}

.vgi-segnavia__void {
  opacity: 0.16;
  border: 1px dashed rgb(98 168 255 / 28%);
  border-radius: 0.5rem;
}

.vgi-segnavia__wire {
  position: absolute;
  z-index: 2;
  border-radius: 999px;
  background: #b5fff6;
  box-shadow: 0 0 0 2px #53e0d7, 0 0 0.75rem rgb(83 224 215 / 75%);
  pointer-events: none;
}

.vgi-segnavia__wire.is-up,
.vgi-segnavia__wire.is-down {
  left: 50%;
  inline-size: 0.38rem;
  block-size: calc(50% + var(--vgi-segnavia-gap));
  translate: -50% 0;
}

.vgi-segnavia__wire.is-left,
.vgi-segnavia__wire.is-right {
  top: 50%;
  inline-size: calc(50% + var(--vgi-segnavia-gap));
  block-size: 0.38rem;
  translate: 0 -50%;
}

.vgi-segnavia__wire.is-up { top: calc(-1 * var(--vgi-segnavia-gap)); }
.vgi-segnavia__wire.is-down { bottom: calc(-1 * var(--vgi-segnavia-gap)); }
.vgi-segnavia__wire.is-left { left: calc(-1 * var(--vgi-segnavia-gap)); }
.vgi-segnavia__wire.is-right { right: calc(-1 * var(--vgi-segnavia-gap)); }

.vgi-segnavia__wire-core {
  position: absolute;
  z-index: 2;
  inset: 50% auto auto 50%;
  inline-size: 0.78rem;
  aspect-ratio: 1;
  border: 2px solid #b5fff6;
  border-radius: 50%;
  background: #53e0d7;
  box-shadow: 0 0 0.8rem rgb(83 224 215 / 85%);
  translate: -50% -50%;
}

.vgi-segnavia__checkpoint {
  position: relative;
  z-index: 4;
  display: grid;
  place-items: center;
  min-inline-size: 1.7rem;
  aspect-ratio: 1;
  border: 2px solid #62a8ff;
  border-radius: 50% 50% 38% 50%;
  background: #0d1321;
  box-shadow: 0 0 0 3px rgb(13 19 33 / 72%), 0 0 0.85rem rgb(98 168 255 / 58%);
  color: #f5f7fa;
  font: 850 0.78rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.vgi-segnavia__cell.is-path .vgi-segnavia__checkpoint {
  border-color: #7cffb2;
  box-shadow: 0 0 0 3px rgb(13 19 33 / 72%), 0 0 0.9rem rgb(124 255 178 / 70%);
}

.vgi-segnavia__clue {
  position: absolute;
  z-index: 5;
  inset: 0.18rem 0.28rem auto auto;
  font: 900 0.78rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.vgi-segnavia__cell.is-pivot { border-color: rgb(255 200 87 / 58%); }
.vgi-segnavia__cell.is-pivot .vgi-segnavia__clue { color: #ffc857; }
.vgi-segnavia__cell.is-beam { border-color: rgb(155 140 255 / 65%); }
.vgi-segnavia__cell.is-beam .vgi-segnavia__clue { color: #c8bfff; }

.vgi-segnavia__cell.is-hint {
  border-color: #ffc857;
  box-shadow: inset 0 0 0 2px rgb(255 200 87 / 25%), 0 0 1.2rem rgb(255 200 87 / 58%);
  animation: vgi-segnavia-hint 800ms ease-in-out infinite alternate;
}

.vgi-segnavia.is-complete .vgi-segnavia__wire {
  background: #e0ffed;
  box-shadow: 0 0 0 2px #7cffb2, 0 0 0.95rem rgb(124 255 178 / 82%);
}

.vgi-segnavia.is-complete .vgi-segnavia__wire-core { background: #7cffb2; }
.vgi-segnavia.is-dead-end .vgi-segnavia__plate { border-color: #ffc857; }
.vgi-segnavia.is-failed .vgi-segnavia__plate { border-color: #ff6b6b; filter: saturate(0.8); }
.vgi-segnavia.is-error .vgi-segnavia__plate { animation: vgi-segnavia-error 240ms ease-out; }

.vgi-segnavia__pause-card {
  position: absolute;
  z-index: 20;
  inset: 50% auto auto 50%;
  inline-size: min(22rem, calc(100% - 2rem));
  border: 1px solid rgb(83 224 215 / 46%);
  border-radius: 1rem;
  padding: 1.2rem;
  background: rgb(13 19 33 / 97%);
  box-shadow: 0 1.5rem 4rem rgb(0 0 0 / 55%), inset 0 1px 0 rgb(255 255 255 / 10%);
  text-align: center;
  translate: -50% -50%;
}

.vgi-segnavia__pause-card strong { display: block; margin-block: 0.2rem 1rem; font-size: 1.25rem; }
.vgi-segnavia.is-paused .vgi-segnavia__board { opacity: 0.26; filter: grayscale(0.45); }

.vgi-segnavia__status {
  min-block-size: 3.2rem;
  margin-block: 0.7rem 0;
  border: 1px solid rgb(98 168 255 / 18%);
  border-radius: 0.85rem;
  padding: 0.75rem 0.9rem;
  background: rgb(13 19 33 / 68%);
  color: #dce7f2;
}

.vgi-segnavia__result {
  margin-block-start: 0.75rem;
  border: 1px solid rgb(124 255 178 / 38%);
  border-radius: 1rem;
  padding: clamp(0.8rem, 2vw, 1.2rem);
  background: linear-gradient(135deg, rgb(124 255 178 / 10%), rgb(21 30 48 / 88%));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 8%);
}

.vgi-segnavia__result h3 { margin-block: 0.2rem 0.8rem; color: #f5f7fa; font-size: clamp(1.4rem, 4vw, 2rem); }

.vgi-segnavia__result-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.45rem;
}

.vgi-segnavia__result-metrics p {
  display: grid;
  gap: 0.18rem;
  margin: 0;
  border-radius: 0.65rem;
  padding: 0.6rem;
  background: rgb(13 19 33 / 72%);
}

.vgi-segnavia__result-metrics span { color: #9baec4; font-size: 0.7rem; text-transform: uppercase; }
.vgi-segnavia__result-metrics strong { color: #fff; font: 750 0.95rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; }

.vgi-segnavia__result-actions,
.vgi-segnavia__share > div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-block-start: 0.75rem;
}

.vgi-segnavia__share {
  margin-block-start: 0.9rem;
  border-block-start: 1px solid rgb(98 168 255 / 18%);
  padding-block-start: 0.75rem;
}

.vgi-segnavia__share p { margin: 0; color: #c7d2e0; font-size: 0.83rem; }
.vgi-segnavia__share button { flex: 1 1 7rem; }
.vgi-segnavia.is-relax .vgi-segnavia__readouts p:last-child { opacity: 0.5; }

.vgi-segnavia:fullscreen .vgi-segnavia__console,
.vgi-segnavia.is-focus-mode .vgi-segnavia__console {
  grid-template-columns: minmax(14rem, 0.55fr) minmax(0, 1.45fr);
  min-block-size: 0;
}

.vgi-segnavia:fullscreen .vgi-segnavia__plate,
.vgi-segnavia.is-focus-mode .vgi-segnavia__plate {
  block-size: min-content;
}

@keyframes vgi-segnavia-hint {
  to { box-shadow: inset 0 0 0 2px rgb(255 200 87 / 42%), 0 0 1.5rem rgb(255 200 87 / 80%); }
}

@keyframes vgi-segnavia-error {
  33% { translate: -0.25rem 0; }
  66% { translate: 0.25rem 0; }
}

@media (max-width: 64rem) {
  .vgi-segnavia__console { grid-template-columns: minmax(14rem, 0.62fr) minmax(0, 1.38fr); }
  .vgi-segnavia__brief ol { font-size: 0.8rem; }
}

@media (max-width: 48rem) {
  .vgi-segnavia__console { grid-template-columns: 1fr; }
  .vgi-segnavia__atlas { order: -1; }
  .vgi-segnavia__command-deck { display: flex; flex-direction: column; }
  .vgi-segnavia__control-frame { order: -3; }
  .vgi-segnavia__selectors { order: -2; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vgi-segnavia__readouts { order: -1; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .vgi-segnavia__readouts p { border-block-end: 0; }
  .vgi-segnavia__readouts p:nth-child(even) { border-inline-end: 1px solid rgb(98 168 255 / 13%); }
  .vgi-segnavia__readouts p:last-child { border-inline-end: 0; }
}

@media (max-width: 30rem) {
  .vgi-arcade.vgi-segnavia {
    box-sizing: border-box;
    inline-size: 100%;
    max-inline-size: 100%;
    margin-inline: 0;
    border-radius: 0;
    padding: 0.55rem;
  }

  .vgi-segnavia__intro {
    grid-template-columns: 1fr auto;
    gap: 0.55rem;
  }

  .vgi-segnavia__intro h2 { font-size: clamp(1.75rem, 10vw, 2.7rem); }
  .vgi-segnavia__intro p:last-child { font-size: 0.88rem; }
  .vgi-segnavia__emblem { inline-size: 4.8rem; border-radius: 1rem 0.25rem 1rem 1rem; padding: 0.65rem; }
  .vgi-segnavia__plate { border-radius: 0.85rem 0.25rem 0.85rem 0.85rem; padding: 0.38rem; }
  .vgi-segnavia__board { --vgi-segnavia-gap: 0.2rem; padding-block: 0.55rem 1.15rem; }
  .vgi-segnavia .vgi-segnavia__cell { min-block-size: 44px; min-inline-size: 0; border-radius: 0.5rem 0.12rem 0.5rem 0.5rem; }
  .vgi-segnavia__checkpoint { min-inline-size: 1.45rem; font-size: 0.7rem; }
  .vgi-segnavia__wire.is-up,
  .vgi-segnavia__wire.is-down { inline-size: 0.3rem; }
  .vgi-segnavia__wire.is-left,
  .vgi-segnavia__wire.is-right { block-size: 0.3rem; }
  .vgi-segnavia__wire-core { inline-size: 0.64rem; }
  .vgi-segnavia__selectors { grid-template-columns: 1fr; }
  .vgi-segnavia__readouts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vgi-segnavia__readouts p:nth-child(2) { border-inline-end: 0; }
  .vgi-segnavia__readouts p:nth-child(-n + 2) { border-block-end: 1px solid rgb(98 168 255 / 13%); }
  .vgi-segnavia__readouts p:nth-child(3) { border-inline-end: 1px solid rgb(98 168 255 / 13%); }
  .vgi-segnavia__brief ol { display: none; }
  .vgi-segnavia__result-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vgi-segnavia__toolbar button { padding-inline: 0.55rem; }
}

@media (prefers-reduced-motion: reduce) {
  .vgi-segnavia__cell.is-hint,
  .vgi-segnavia.is-error .vgi-segnavia__plate { animation: none; }
  .vgi-segnavia__emblem { rotate: 0deg; }
}

/* Seven original short-puzzle adaptations. */
.vgi-quick-puzzle {
  --vgi-quick-accent: #65e7d7;
  --vgi-quick-accent-rgb: 101 231 215;
  --vgi-quick-deep: #071923;
  background:
    radial-gradient(circle at 9% 0%, rgb(var(--vgi-quick-accent-rgb) / 22%), transparent 31rem),
    radial-gradient(circle at 100% 45%, rgb(112 96 255 / 18%), transparent 28rem),
    linear-gradient(145deg, #07151f, #101a35 56%, #11102b);
}

.vgi-quick-puzzle--connessione { --vgi-quick-accent: #65e7d7; --vgi-quick-accent-rgb: 101 231 215; }
.vgi-quick-puzzle--scala-pixel { --vgi-quick-accent: #ffc857; --vgi-quick-accent-rgb: 255 200 87; }
.vgi-quick-puzzle--segnali { --vgi-quick-accent: #74b9ff; --vgi-quick-accent-rgb: 116 185 255; }
.vgi-quick-puzzle--dualita { --vgi-quick-accent: #da8cff; --vgi-quick-accent-rgb: 218 140 255; }
.vgi-quick-puzzle--griglia-6 { --vgi-quick-accent: #ff8a65; --vgi-quick-accent-rgb: 255 138 101; }
.vgi-quick-puzzle--moduli { --vgi-quick-accent: #a7ef6f; --vgi-quick-accent-rgb: 167 239 111; }
.vgi-quick-puzzle--trama { --vgi-quick-accent: #ff86b7; --vgi-quick-accent-rgb: 255 134 183; }

.vgi-quick-puzzle .vgi-eyebrow { color: var(--vgi-quick-accent); }

.vgi-quick-puzzle__intro h2 { max-inline-size: 15ch; }

.vgi-quick-puzzle__mark {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
  inline-size: clamp(5.5rem, 12vw, 8.5rem);
  aspect-ratio: 1;
  border: 1px solid rgb(var(--vgi-quick-accent-rgb) / 45%);
  border-radius: 42% 14% 42% 42%;
  padding: 1rem;
  background: linear-gradient(145deg, rgb(var(--vgi-quick-accent-rgb) / 20%), rgb(255 255 255 / 3%));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 20%), 0 1rem 2.5rem rgb(0 0 0 / 22%);
  rotate: 4deg;
}

.vgi-quick-puzzle__mark span {
  border: 2px solid var(--vgi-quick-accent);
  border-radius: 50% 50% 16% 50%;
  background: repeating-linear-gradient(135deg, rgb(var(--vgi-quick-accent-rgb) / 42%) 0 3px, transparent 3px 7px);
}

.vgi-quick-puzzle__mark span:nth-child(2),
.vgi-quick-puzzle__mark span:nth-child(3) { border-radius: 18% 50% 50%; }

.vgi-quick-puzzle__console {
  display: grid;
  grid-template-columns: minmax(14rem, 0.56fr) minmax(0, 1.44fr);
  gap: clamp(0.8rem, 2vw, 1.3rem);
  min-inline-size: 0;
}

.vgi-quick-puzzle__panel,
.vgi-quick-puzzle__play {
  min-inline-size: 0;
  border: 1px solid rgb(var(--vgi-quick-accent-rgb) / 20%);
  border-radius: 1rem;
  background: rgb(5 12 27 / 66%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 5%);
}

.vgi-quick-puzzle__panel {
  display: grid;
  align-content: start;
  gap: 1rem;
  padding: 1rem;
}

.vgi-quick-puzzle__play {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: clamp(0.65rem, 1.8vw, 1rem);
}

.vgi-quick-puzzle__selectors { display: grid; gap: 0.75rem; }

.vgi-quick-puzzle__selectors label {
  display: grid;
  gap: 0.35rem;
  color: #b9c7d8;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.vgi-quick-puzzle__selectors select {
  min-block-size: 44px;
  border-color: rgb(var(--vgi-quick-accent-rgb) / 35%);
  background: #0d1930;
  color: #fff;
}

.vgi-quick-puzzle__readouts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid rgb(var(--vgi-quick-accent-rgb) / 18%);
  border-radius: 0.8rem;
}

.vgi-quick-puzzle__readouts p,
.vgi-quick-puzzle__result-metrics p {
  display: grid;
  gap: 0.2rem;
  margin: 0;
  border-inline-end: 1px solid rgb(var(--vgi-quick-accent-rgb) / 14%);
  border-block-end: 1px solid rgb(var(--vgi-quick-accent-rgb) / 14%);
  padding: 0.7rem;
}

.vgi-quick-puzzle__readouts p:nth-child(even) { border-inline-end: 0; }
.vgi-quick-puzzle__readouts p:nth-last-child(-n + 2) { border-block-end: 0; }
.vgi-quick-puzzle__readouts span,
.vgi-quick-puzzle__result-metrics span { color: #8fa4bb; font-size: 0.66rem; font-weight: 750; letter-spacing: 0.07em; text-transform: uppercase; }
.vgi-quick-puzzle__readouts strong,
.vgi-quick-puzzle__result-metrics strong { color: #fff; font: 800 0.96rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; }

.vgi-quick-puzzle__brief {
  border-inline-start: 3px solid var(--vgi-quick-accent);
  padding: 0.1rem 0.2rem 0.1rem 0.8rem;
  color: #c8d3df;
  font-size: 0.87rem;
}

.vgi-quick-puzzle__brief p { margin-block: 0 0.7rem; }
.vgi-quick-puzzle__brief p:last-child { margin: 0; color: var(--vgi-quick-accent); }

.vgi-quick-puzzle__plate {
  position: relative;
  overflow: hidden;
  min-block-size: clamp(18rem, 46vw, 35rem);
  border: 1px solid rgb(var(--vgi-quick-accent-rgb) / 34%);
  border-radius: 0.9rem 0.2rem 0.9rem 0.9rem;
  padding: clamp(0.45rem, 1.4vw, 0.85rem);
  background:
    linear-gradient(rgb(255 255 255 / 2%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 2%) 1px, transparent 1px),
    #07121f;
  background-size: 1.25rem 1.25rem;
}

.vgi-quick-puzzle__plate::after {
  position: absolute;
  inset: auto 0 0;
  block-size: 3px;
  background: linear-gradient(90deg, transparent, var(--vgi-quick-accent), transparent);
  content: "";
  opacity: 0.72;
}

.vgi-quick-puzzle__plate-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  border-block-end: 1px solid rgb(var(--vgi-quick-accent-rgb) / 18%);
  padding: 0.1rem 0.35rem 0.55rem;
  color: var(--vgi-quick-accent);
  font: 750 0.66rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.12em;
}

.vgi-quick-puzzle__stage {
  display: grid;
  place-items: center;
  gap: clamp(0.65rem, 2vw, 1rem);
  min-block-size: clamp(15rem, 42vw, 31.5rem);
  padding: clamp(0.7rem, 2vw, 1.4rem);
}

.vgi-quick-puzzle__stage:focus-visible { outline: 3px solid var(--vgi-quick-accent); outline-offset: -4px; }

.vgi-quick-puzzle__standby { display: grid; place-items: center; gap: 0.5rem; color: #aab9ca; text-align: center; }
.vgi-quick-puzzle__standby span { color: var(--vgi-quick-accent); font-size: clamp(3rem, 9vw, 6rem); filter: drop-shadow(0 0 1rem rgb(var(--vgi-quick-accent-rgb) / 45%)); }
.vgi-quick-puzzle__standby strong { color: #fff; font-size: 1.25rem; }
.vgi-quick-puzzle__standby p { margin: 0; }

.vgi-quick-puzzle__pause {
  position: absolute;
  z-index: 8;
  inset: 2.1rem 0.45rem 0.45rem;
  display: grid;
  place-content: center;
  place-items: center;
  border-radius: 0.6rem;
  background: rgb(4 10 23 / 92%);
  text-align: center;
  backdrop-filter: blur(8px);
}

.vgi-quick-puzzle__pause[hidden] { display: none; }
.vgi-quick-puzzle__pause strong { margin-block: 0.2rem 1rem; font-size: 1.3rem; }
.vgi-quick-puzzle__pause button { min-block-size: 44px; }
.vgi-quick-puzzle.is-paused .vgi-quick-puzzle__stage { opacity: 0.28; filter: grayscale(0.7); }

.vgi-quick-puzzle__game-controls {
  display: grid;
  gap: 0.65rem;
  min-inline-size: 0;
  border: 1px solid rgb(var(--vgi-quick-accent-rgb) / 16%);
  border-radius: 0.75rem;
  padding: 0.65rem;
  background: rgb(8 17 34 / 76%);
}

.vgi-quick-puzzle__control-frame { --vgi-control-frame-line: rgb(var(--vgi-quick-accent-rgb) / 22%); }
.vgi-quick-puzzle__toolbar { gap: 0.55rem; margin: 0; }
.vgi-quick-puzzle__game-controls button { min-block-size: 44px; }
.vgi-quick-puzzle__toolbar button:first-child { background: var(--vgi-quick-accent); color: #07121f; }

.vgi-quick-puzzle__status {
  min-block-size: 2.8rem;
  margin: 0;
  border: 1px solid rgb(var(--vgi-quick-accent-rgb) / 18%);
  border-radius: 0.7rem;
  padding: 0.7rem 0.8rem;
  background: rgb(var(--vgi-quick-accent-rgb) / 7%);
  color: #dce5ee;
}

.vgi-quick-puzzle__legend { margin: 0; color: #b8c6d4; font-size: 0.82rem; }

.vgi-quick-puzzle__result {
  border: 1px solid rgb(var(--vgi-quick-accent-rgb) / 30%);
  border-radius: 0.9rem;
  padding: 1rem;
  background: linear-gradient(135deg, rgb(var(--vgi-quick-accent-rgb) / 11%), rgb(255 255 255 / 3%));
}

.vgi-quick-puzzle__result[hidden] { display: none; }
.vgi-quick-puzzle__result h3 { margin-block: 0.2rem 0.8rem; color: #fff; font-size: clamp(1.35rem, 4vw, 2rem); }
.vgi-quick-puzzle__result-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden; border: 1px solid rgb(var(--vgi-quick-accent-rgb) / 17%); border-radius: 0.7rem; }
.vgi-quick-puzzle__result-metrics p { border-block-end: 0; }
.vgi-quick-puzzle__result-metrics p:last-child { border-inline-end: 0; }
.vgi-quick-puzzle__result-actions,
.vgi-quick-puzzle__share > div { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-block-start: 0.8rem; }
.vgi-quick-puzzle__result-actions button,
.vgi-quick-puzzle__share button { flex: 1 1 7rem; min-block-size: 44px; }
.vgi-quick-puzzle__share { margin-block-start: 0.85rem; border-block-start: 1px solid rgb(var(--vgi-quick-accent-rgb) / 16%); padding-block-start: 0.75rem; }
.vgi-quick-puzzle__share p { margin: 0; color: #b8c6d4; font-size: 0.82rem; }
.vgi-quick-puzzle :is(.vgi-signal-grid__cell, .vgi-duality-grid__cell, .vgi-grid6__cell, .vgi-module-grid__cell, .vgi-trama-grid__cell) { padding: 0; box-shadow: none; }
.vgi-quick-puzzle :is(.vgi-signal-grid__cell, .vgi-duality-grid__cell, .vgi-grid6__cell, .vgi-module-grid__cell, .vgi-trama-grid__cell):disabled { opacity: 1; }

/* Connessione */
.vgi-connection { align-content: center; }
.vgi-connection__clues { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem; inline-size: min(100%, 38rem); margin: 0; padding: 0; list-style: none; counter-reset: signal; }
.vgi-connection__clues li { position: relative; min-block-size: 4rem; border: 1px solid rgb(var(--vgi-quick-accent-rgb) / 28%); border-radius: 0.7rem 0.2rem 0.7rem 0.7rem; padding: 1rem 0.7rem 0.7rem 2.3rem; background: rgb(var(--vgi-quick-accent-rgb) / 9%); color: #fff; font-weight: 750; counter-increment: signal; }
.vgi-connection__clues li::before { position: absolute; top: 0.7rem; left: 0.7rem; color: var(--vgi-quick-accent); font: 800 0.7rem/1 ui-monospace, monospace; content: "0" counter(signal); }
.vgi-connection__clues li.is-hidden { border-style: dashed; color: #8192a4; background: repeating-linear-gradient(135deg, rgb(255 255 255 / 3%) 0 4px, transparent 4px 9px); }
.vgi-connection__answers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem; inline-size: min(100%, 38rem); }
.vgi-quick-puzzle .vgi-connection__answer { min-block-size: 54px; border: 1px solid rgb(var(--vgi-quick-accent-rgb) / 28%); background: #0f2130; color: #fff; text-align: start; }
.vgi-connection__answer.is-wrong { border-style: dashed; opacity: 0.48; text-decoration: line-through; }
.vgi-connection__answer.is-correct { box-shadow: inset 0 0 0 2px var(--vgi-quick-accent), 0 0 1.4rem rgb(var(--vgi-quick-accent-rgb) / 30%); }
.vgi-connection__reveal { inline-size: 100%; }

/* Scala Pixel */
.vgi-pixel-ladder { grid-template-columns: minmax(9rem, 0.8fr) minmax(12rem, 1.2fr); align-items: center; }
.vgi-pixel-ladder__slots { display: grid; gap: 0.35rem; inline-size: 100%; margin: 0; padding: 0; list-style: none; }
.vgi-pixel-ladder__slots li { display: grid; place-items: center; min-block-size: 44px; border: 1px dashed rgb(var(--vgi-quick-accent-rgb) / 42%); border-radius: 0.5rem; background: rgb(255 255 255 / 3%); color: #8293a8; font: 800 0.88rem/1 ui-monospace, monospace; letter-spacing: 0.08em; }
.vgi-pixel-ladder__slots li.is-filled { border-style: solid; background: linear-gradient(90deg, rgb(var(--vgi-quick-accent-rgb) / 20%), rgb(var(--vgi-quick-accent-rgb) / 7%)); color: #fff; }
.vgi-pixel-ladder__bank { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.45rem; }
.vgi-quick-puzzle .vgi-pixel-ladder__word { min-inline-size: 5.3rem; border: 1px solid rgb(var(--vgi-quick-accent-rgb) / 35%); background: #172037; color: #fff; font: 850 0.95rem/1 ui-monospace, monospace; letter-spacing: 0.08em; }
.vgi-pixel-ladder__clues { columns: 2; column-gap: 1.7rem; margin: 0; padding-inline-start: 1.5rem; color: #c6d0dc; font-size: 0.82rem; }
.vgi-pixel-ladder__clues li { break-inside: avoid; margin-block: 0 0.3rem; }

/* Segnali */
.vgi-signal-grid,
.vgi-duality-grid { display: grid; grid-template-columns: repeat(var(--vgi-grid-size), minmax(0, 1fr)); gap: clamp(0.2rem, 0.7vw, 0.38rem); inline-size: min(100%, 33rem); }
.vgi-quick-puzzle .vgi-signal-grid__cell,
.vgi-quick-puzzle .vgi-duality-grid__cell { position: relative; aspect-ratio: 1; min-block-size: 44px; min-inline-size: 0; border: 1px solid rgb(255 255 255 / 20%); border-radius: 0.45rem; background: #132039; color: #fff; font-size: clamp(1rem, 4vw, 1.65rem); font-weight: 900; }
.vgi-signal-grid__cell.region-0 { background-image: repeating-linear-gradient(0deg, rgb(var(--vgi-quick-accent-rgb) / 15%) 0 2px, transparent 2px 8px); }
.vgi-signal-grid__cell.region-1 { background-image: repeating-linear-gradient(45deg, rgb(var(--vgi-quick-accent-rgb) / 15%) 0 2px, transparent 2px 8px); }
.vgi-signal-grid__cell.region-2 { background-image: radial-gradient(circle, rgb(var(--vgi-quick-accent-rgb) / 22%) 1px, transparent 2px); background-size: 8px 8px; }
.vgi-signal-grid__cell.region-3 { background-image: repeating-linear-gradient(90deg, rgb(var(--vgi-quick-accent-rgb) / 15%) 0 2px, transparent 2px 8px); }
.vgi-signal-grid__cell.region-4 { background-image: repeating-linear-gradient(135deg, rgb(var(--vgi-quick-accent-rgb) / 15%) 0 2px, transparent 2px 8px); }
.vgi-signal-grid__cell.region-5 { background-image: linear-gradient(135deg, rgb(var(--vgi-quick-accent-rgb) / 18%) 25%, transparent 25%, transparent 75%, rgb(var(--vgi-quick-accent-rgb) / 18%) 75%); background-size: 10px 10px; }
.vgi-signal-grid__cell.is-antenna { border-color: var(--vgi-quick-accent); background-color: rgb(var(--vgi-quick-accent-rgb) / 24%); text-shadow: 0 0 0.9rem var(--vgi-quick-accent); }
.vgi-signal-grid__cell.is-excluded { color: #8a99aa; }
.vgi-signal-grid__cell.is-conflict { border: 3px double #ff7b7b; }
.vgi-signal-grid__cell.is-given::after { position: absolute; right: 0.25rem; bottom: 0.2rem; color: #fff; font-size: 0.55rem; content: "FISSA"; }

/* Dualità */
.vgi-duality-grid__cell.is-wave { border-radius: 50%; background: rgb(104 205 255 / 17%); color: #8ee6ff; }
.vgi-duality-grid__cell.is-pulse { border-radius: 0.28rem; background: rgb(231 133 255 / 17%); color: #efb0ff; }
.vgi-duality-grid__cell.is-given { border-style: double; border-width: 3px; }
.vgi-duality__edges { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.vgi-duality__edges span { border: 1px solid rgb(var(--vgi-quick-accent-rgb) / 24%); border-radius: 999px; padding: 0.35rem 0.55rem; background: rgb(var(--vgi-quick-accent-rgb) / 7%); color: #d6dfe9; font: 700 0.68rem/1.2 ui-monospace, monospace; }

/* Griglia 6 */
.vgi-grid6 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); inline-size: min(100%, 32rem); border: 3px solid var(--vgi-quick-accent); border-radius: 0.7rem; background: var(--vgi-quick-accent); gap: 1px; overflow: hidden; }
.vgi-quick-puzzle .vgi-grid6__cell { aspect-ratio: 1; min-block-size: 44px; min-inline-size: 0; border: 0; border-radius: 0; background: #101d31; color: #fff; font: 850 clamp(1rem, 4vw, 1.55rem)/1 ui-monospace, monospace; }
.vgi-grid6__cell.is-sector-right { border-inline-end: 3px solid var(--vgi-quick-accent); }
.vgi-grid6__cell.is-sector-bottom { border-block-end: 3px solid var(--vgi-quick-accent); }
.vgi-grid6__cell.is-given { background: #3a2130; color: #ffc2ad; text-shadow: 0 0 0.7rem rgb(var(--vgi-quick-accent-rgb) / 42%); }
.vgi-grid6__cell.is-conflict { background: #5d1c2c; text-decoration: underline wavy #fff; }
.vgi-grid6__palette { display: grid; grid-template-columns: repeat(7, minmax(44px, 1fr)); gap: 0.35rem; }
.vgi-quick-puzzle .vgi-grid6__number { min-inline-size: 44px; border: 1px solid rgb(var(--vgi-quick-accent-rgb) / 30%); background: #111e34; color: #fff; font-weight: 850; }
.vgi-grid6__number.is-selected { box-shadow: inset 0 0 0 2px var(--vgi-quick-accent); color: var(--vgi-quick-accent); }

/* Moduli */
.vgi-module-grid { display: grid; grid-template-columns: repeat(var(--vgi-module-cols), minmax(0, 1fr)); gap: 0.3rem; inline-size: min(100%, 34rem); }
.vgi-quick-puzzle .vgi-module-grid__cell { position: relative; aspect-ratio: 1; min-block-size: 44px; min-inline-size: 0; border: 1px dashed rgb(var(--vgi-quick-accent-rgb) / 30%); border-radius: 0.35rem; background: #101c2e; color: #07121f; font-weight: 950; }
.vgi-module-grid__cell.is-origin { box-shadow: inset 0 0 0 2px var(--vgi-quick-accent); }
.vgi-module-grid__cell.is-origin::after { position: absolute; inset: 50% auto auto 50%; translate: -50% -50%; color: var(--vgi-quick-accent); content: "+"; font-size: 1.3rem; }
.vgi-module-grid__cell.is-filled { border-style: solid; }
.vgi-module-grid__cell.module-square4 { background-color: #8ae3d0; background-image: linear-gradient(90deg, transparent 46%, rgb(7 18 31 / 18%) 46% 54%, transparent 54%), linear-gradient(transparent 46%, rgb(7 18 31 / 18%) 46% 54%, transparent 54%); }
.vgi-module-grid__cell.module-hall3 { background-color: #a69cff; background-image: linear-gradient(90deg, transparent 38%, rgb(7 18 31 / 22%) 38% 62%, transparent 62%); }
.vgi-module-grid__cell.module-nook3 { background-color: #ff91b8; background-image: radial-gradient(circle, rgb(7 18 31 / 28%) 18%, transparent 20%); background-size: 9px 9px; }
.vgi-module-grid__cell.module-elbow4 { background-color: #ffc857; background-image: repeating-linear-gradient(135deg, rgb(7 18 31 / 18%) 0 2px, transparent 2px 7px); }
.vgi-module-grid__cell.module-beam4 { background-color: #9ee47b; background-image: repeating-linear-gradient(90deg, rgb(7 18 31 / 17%) 0 3px, transparent 3px 9px); }
.vgi-module-grid__cell.module-tee4 { background-color: #78c8ff; background-image: linear-gradient(45deg, transparent 43%, rgb(7 18 31 / 22%) 43% 57%, transparent 57%); }
.vgi-module-grid__cell.module-hook5 { background-color: #ff9f68; background-image: repeating-radial-gradient(circle at 50% 50%, transparent 0 4px, rgb(7 18 31 / 18%) 5px 7px); }
.vgi-module-grid__cell.module-zig4 { background-color: #73dbc9; background-image: linear-gradient(135deg, transparent 35%, rgb(7 18 31 / 23%) 35% 48%, transparent 48% 65%, rgb(7 18 31 / 23%) 65% 78%, transparent 78%); }
.vgi-module-grid__cell.module-plus5 { background-color: #e7c761; background-image: linear-gradient(90deg, transparent 42%, rgb(7 18 31 / 20%) 42% 58%, transparent 58%), linear-gradient(transparent 42%, rgb(7 18 31 / 20%) 42% 58%, transparent 58%); }
.vgi-module-grid__cell.is-blocked { border-style: solid; border-color: rgb(255 255 255 / 8%); background: repeating-linear-gradient(135deg, #172237 0 4px, #0b1423 4px 8px); cursor: not-allowed; }
.vgi-module-grid__cell.is-locked { background-image: repeating-linear-gradient(135deg, rgb(0 0 0 / 14%) 0 3px, transparent 3px 7px); }
.vgi-module-inventory { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem; }
.vgi-quick-puzzle .vgi-module-inventory__item { border: 1px solid rgb(var(--vgi-quick-accent-rgb) / 25%); background: #111e34; color: #fff; text-align: start; }
.vgi-module-inventory__item.is-selected { box-shadow: inset 0 0 0 2px var(--vgi-quick-accent); }
.vgi-module-inventory__item.is-placed { opacity: 0.58; text-decoration: line-through; }
.vgi-module-rotate { inline-size: 100%; }

/* Trama */
.vgi-trama-grid { display: grid; grid-template-columns: repeat(var(--vgi-trama-cols), minmax(0, 1fr)); gap: clamp(0.25rem, 0.8vw, 0.45rem); inline-size: min(100%, 34rem); }
.vgi-quick-puzzle .vgi-trama-grid__cell { aspect-ratio: 1; min-block-size: 44px; min-inline-size: 0; border: 1px solid rgb(var(--vgi-quick-accent-rgb) / 27%); border-radius: 0.75rem 0.25rem 0.75rem 0.75rem; background: #111d32; color: #fff; font: 900 clamp(0.95rem, 4vw, 1.45rem)/1 ui-monospace, monospace; }
.vgi-trama-grid__cell.is-used { border-style: double; border-width: 3px; background: rgb(var(--vgi-quick-accent-rgb) / 18%); color: var(--vgi-quick-accent); }
.vgi-trama-grid__cell.is-active-path { box-shadow: 0 0 0 2px rgb(var(--vgi-quick-accent-rgb) / 36%); }
.vgi-trama-targets { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.vgi-quick-puzzle .vgi-trama-target { flex: 1 1 7rem; border: 1px solid rgb(var(--vgi-quick-accent-rgb) / 25%); background: #111e34; color: #fff; font: 800 0.82rem/1 ui-monospace, monospace; letter-spacing: 0.05em; }
.vgi-trama-target.is-selected { box-shadow: inset 0 0 0 2px var(--vgi-quick-accent); }
.vgi-trama-target.is-complete { background: rgb(var(--vgi-quick-accent-rgb) / 18%); color: var(--vgi-quick-accent); }

.vgi-quick-puzzle:fullscreen .vgi-quick-puzzle__console,
.vgi-quick-puzzle.is-focus-mode .vgi-quick-puzzle__console { grid-template-columns: minmax(13rem, 0.45fr) minmax(0, 1.55fr); min-block-size: 0; }

@media (max-width: 64rem) {
  .vgi-quick-puzzle__console { grid-template-columns: minmax(13rem, 0.48fr) minmax(0, 1.52fr); }
  .vgi-quick-puzzle__plate { min-block-size: 27rem; }
  .vgi-quick-puzzle__stage { min-block-size: 23.5rem; }
}

@media (max-width: 48rem) {
  .vgi-quick-puzzle__console { grid-template-columns: 1fr; }
  .vgi-quick-puzzle__play { order: -1; }
  .vgi-quick-puzzle__panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vgi-quick-puzzle__brief { grid-column: 1 / -1; }
  .vgi-quick-puzzle__plate { min-block-size: 24rem; }
  .vgi-quick-puzzle__stage { min-block-size: 20.5rem; }
}

@media (max-width: 30rem) {
  .vgi-arcade.vgi-quick-puzzle { box-sizing: border-box; inline-size: 100%; max-inline-size: 100%; margin-inline: 0; border-radius: 0; padding: 0.55rem; }
  .vgi-quick-puzzle__intro { grid-template-columns: 1fr auto; gap: 0.55rem; }
  .vgi-quick-puzzle__intro h2 { font-size: clamp(1.7rem, 9vw, 2.55rem); }
  .vgi-quick-puzzle__intro p:last-child { font-size: 0.86rem; }
  .vgi-quick-puzzle__mark { inline-size: 4.8rem; padding: 0.65rem; }
  .vgi-quick-puzzle__play { padding: 0.45rem; }
  .vgi-quick-puzzle__plate { min-block-size: 20rem; padding: 0.35rem; }
  .vgi-quick-puzzle__stage { min-block-size: 17rem; padding: 0.55rem 0.25rem; }
  .vgi-quick-puzzle__panel { grid-template-columns: 1fr; }
  .vgi-quick-puzzle__brief { grid-column: auto; }
  .vgi-quick-puzzle__toolbar button { padding-inline: 0.45rem; }
  .vgi-quick-puzzle__result-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vgi-quick-puzzle__result-metrics p:nth-child(2) { border-inline-end: 0; }
  .vgi-quick-puzzle__result-metrics p:nth-child(-n + 2) { border-block-end: 1px solid rgb(var(--vgi-quick-accent-rgb) / 14%); }
  .vgi-connection__clues,
  .vgi-connection__answers,
  .vgi-pixel-ladder { grid-template-columns: 1fr; }
  .vgi-connection__clues li { min-block-size: 3.3rem; padding-block: 0.75rem; }
  .vgi-pixel-ladder__clues { columns: 1; max-block-size: 8rem; overflow: auto; }
  .vgi-grid6__palette { grid-template-columns: repeat(4, minmax(44px, 1fr)); }
  .vgi-module-inventory { grid-template-columns: 1fr; max-block-size: 9rem; overflow: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .vgi-quick-puzzle__mark { rotate: 0deg; }
}