/* Sayonara_Alice.exe — Memory Protocol Vault v88
   Five rebuilt games, twelve visible protocol slots, one shared visual engine. */

.giglio-game {
  --vault-accent: 88, 224, 255;
  --vault-violet: 91, 100, 255;
  z-index: 60000;
  padding: clamp(10px, 1.8vw, 24px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background:
    linear-gradient(rgb(0, 9, 18), rgb(0, 5, 12)),
    radial-gradient(circle at 50% 0, rgba(var(--vault-accent), .16), transparent 48%);
}

.giglio-game::before,
.giglio-game::after {
  content: "";
  position: fixed;
  z-index: -1;
  pointer-events: none;
}

.giglio-game::before {
  inset: 0;
  opacity: .45;
  background:
    linear-gradient(rgba(var(--vault-accent), .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--vault-accent), .035) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(circle at 50% 44%, #000, transparent 78%);
}

.giglio-game::after {
  top: -30vh;
  left: 50%;
  width: 90vmin;
  height: 90vmin;
  border: 1px solid rgba(var(--vault-accent), .11);
  border-radius: 50%;
  box-shadow:
    0 0 0 8vmin rgba(var(--vault-accent), .018),
    0 0 0 18vmin rgba(var(--vault-accent), .014),
    0 0 80px rgba(var(--vault-violet), .08);
  transform: translateX(-50%);
  animation: v88-vault-orbit 28s linear infinite;
}

.game-shell {
  position: relative;
  box-sizing: border-box;
  width: min(1220px, 100%);
  min-height: calc(100dvh - 40px);
  margin: auto;
  padding: clamp(18px, 2.5vw, 34px);
  border: 1px solid rgba(var(--vault-accent), .2);
  border-radius: 4px 34px 4px 34px;
  clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 30px, 100% 100%, 30px 100%, 0 calc(100% - 30px));
  background:
    radial-gradient(circle at 9% 9%, rgba(var(--vault-accent), .09), transparent 28%),
    linear-gradient(145deg, rgba(3, 22, 35, .92), rgba(0, 6, 14, .96));
  box-shadow:
    0 28px 80px rgba(0, 0, 0, .46),
    inset 0 0 60px rgba(var(--vault-accent), .035);
}

.game-shell::before,
.game-shell::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.game-shell::before {
  inset: 9px;
  border: 1px solid rgba(var(--vault-accent), .07);
  border-radius: 2px 27px 2px 27px;
}

.game-shell::after {
  z-index: 5;
  top: 0;
  left: 4%;
  width: 92%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--vault-accent), .72), transparent);
  box-shadow: 0 0 18px rgba(var(--vault-accent), .48);
  animation: v88-vault-scan 5.8s ease-in-out infinite;
}

.game-header {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: start;
  gap: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(var(--vault-accent), .12);
}

.game-kicker {
  margin-bottom: 10px;
  color: rgba(var(--vault-accent), .72);
  font-size: 8px;
  letter-spacing: .22em;
}

.game-header h1 {
  max-width: 900px;
  margin: 0;
  color: rgba(238, 252, 255, .98);
  font: 800 clamp(30px, 4.4vw, 62px)/.92 Inter, system-ui, sans-serif;
  letter-spacing: -.055em;
  text-wrap: balance;
  text-shadow: 0 0 30px rgba(var(--vault-accent), .11);
}

.game-subtitle {
  max-width: 760px;
  margin: 14px 0 0;
  color: rgba(194, 228, 240, .65);
  font-size: clamp(12px, 1.3vw, 16px);
}

.return-site,
.game-btn {
  position: relative;
  min-height: 42px;
  border: 1px solid rgba(var(--vault-accent), .26);
  border-radius: 2px 13px 2px 13px;
  color: rgba(221, 248, 255, .86);
  background:
    linear-gradient(135deg, rgba(var(--vault-accent), .09), transparent 58%),
    rgba(1, 19, 31, .82);
  font: 700 9px/1 "Courier New", Consolas, monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
  box-shadow: inset 0 0 16px rgba(var(--vault-accent), .04);
  transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}

.return-site:hover,
.return-site:focus-visible,
.game-btn:hover,
.game-btn:focus-visible {
  outline: none;
  transform: translateY(-2px);
  border-color: rgba(var(--vault-accent), .62);
  box-shadow:
    0 0 20px rgba(var(--vault-accent), .12),
    inset 0 0 18px rgba(var(--vault-accent), .08);
}

.protocol-vault-status {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content max-content;
  align-items: center;
  gap: clamp(16px, 3vw, 46px);
  margin: 18px 0 8px;
  padding: 11px 15px;
  border-inline: 1px solid rgba(var(--vault-accent), .14);
  color: rgba(156, 222, 244, .54);
  font: 700 7px/1 "Courier New", Consolas, monospace;
  letter-spacing: .17em;
}

.protocol-vault-status span {
  display: inline-flex;
  align-items: center;
}

.protocol-vault-status i {
  width: 5px;
  height: 5px;
  margin-right: 9px;
  border-radius: 50%;
  background: rgb(var(--vault-accent));
  box-shadow: 0 0 10px rgba(var(--vault-accent), .9);
  animation: v88-status-pulse 2s ease-in-out infinite;
}

.protocol-vault-status b {
  color: rgba(219, 249, 255, .82);
  font: inherit;
}

.protocol-vault-status em {
  color: rgba(131, 177, 255, .62);
  font: inherit;
  font-style: normal;
}

.game-hub {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(10px, 1.2vw, 16px);
  margin: 14px 0 4px;
}

.game-card {
  --protocol-tone: 88, 224, 255;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 225px;
  overflow: hidden;
  padding: 20px;
  border: 1px solid rgba(var(--protocol-tone), .21);
  border-radius: 3px 20px 3px 20px;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
  color: rgba(228, 250, 255, .94);
  text-align: left;
  background:
    radial-gradient(circle at 82% 18%, rgba(var(--protocol-tone), .13), transparent 30%),
    linear-gradient(145deg, rgba(var(--protocol-tone), .055), transparent 52%),
    rgba(1, 14, 25, .83);
  box-shadow: inset 0 0 28px rgba(var(--protocol-tone), .03);
  cursor: pointer;
  isolation: isolate;
  transition:
    transform 420ms cubic-bezier(.16, 1, .3, 1),
    border-color 240ms ease,
    box-shadow 320ms ease,
    filter 240ms ease;
}

.protocol-02 { --protocol-tone: 106, 157, 255; }
.protocol-03 { --protocol-tone: 107, 238, 222; }
.protocol-04 { --protocol-tone: 179, 126, 255; }
.protocol-05 { --protocol-tone: 92, 194, 255; }
.protocol-06 { --protocol-tone: 87, 168, 211; }
.protocol-07 { --protocol-tone: 69, 179, 189; }
.protocol-08 { --protocol-tone: 94, 116, 183; }
.protocol-09 { --protocol-tone: 128, 160, 216; }
.protocol-10 { --protocol-tone: 86, 141, 185; }
.protocol-11 { --protocol-tone: 106, 100, 177; }
.protocol-12 { --protocol-tone: 97, 48, 89; }

.game-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  opacity: .5;
  background:
    linear-gradient(90deg, transparent 12%, rgba(var(--protocol-tone), .08) 12.5%, transparent 13% 73%, rgba(var(--protocol-tone), .055) 73.5%, transparent 74%),
    linear-gradient(0deg, transparent 28%, rgba(var(--protocol-tone), .055) 28.5%, transparent 29% 76%, rgba(var(--protocol-tone), .04) 76.5%, transparent 77%),
    repeating-linear-gradient(0deg, transparent 0 5px, rgba(var(--protocol-tone), .018) 6px);
}

.game-card::after {
  content: "";
  position: absolute;
  right: 17px;
  bottom: 17px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(var(--protocol-tone), .46);
  box-shadow: 0 0 11px rgba(var(--protocol-tone), .46);
}

.game-card.is-playable:hover,
.game-card.is-playable:focus-visible {
  z-index: 2;
  outline: none;
  transform: translateY(-7px) scale(1.018);
  border-color: rgba(var(--protocol-tone), .72);
  box-shadow:
    0 16px 34px rgba(0, 0, 0, .28),
    0 0 30px rgba(var(--protocol-tone), .12),
    inset 0 0 32px rgba(var(--protocol-tone), .08);
}

.game-card-code {
  margin: 0 0 22px;
  color: rgba(var(--protocol-tone), .58);
  font: 700 7px/1 "Courier New", Consolas, monospace;
  letter-spacing: .18em;
}

.game-card-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin: 0 0 18px;
  border: 1px solid rgba(var(--protocol-tone), .35);
  border-radius: 50%;
  color: rgba(225, 252, 255, .94);
  background: radial-gradient(circle, rgba(var(--protocol-tone), .19), rgba(0, 8, 18, .56) 68%);
  box-shadow:
    inset 0 0 18px rgba(var(--protocol-tone), .12),
    0 0 20px rgba(var(--protocol-tone), .08);
}

.game-card-icon i {
  position: absolute;
  inset: -7px;
  border: 1px dashed rgba(var(--protocol-tone), .24);
  border-radius: 50%;
  animation: v88-card-orbit 8s linear infinite;
}

.game-card-icon b {
  color: inherit;
  font: 800 14px/1 "Courier New", Consolas, monospace;
  text-shadow: 0 0 12px rgba(var(--protocol-tone), .7);
}

.game-card strong {
  color: rgba(235, 252, 255, .96);
  font: 800 clamp(17px, 1.55vw, 23px)/1 Inter, system-ui, sans-serif;
  letter-spacing: -.035em;
}

.game-card small {
  margin: 8px 0 22px;
  color: rgba(190, 225, 239, .58);
  font: 500 10px/1.45 "Courier New", Consolas, monospace;
}

.game-card-state {
  margin: auto 0 0;
  color: rgba(var(--protocol-tone), .58);
  font: 700 6px/1.2 "Courier New", Consolas, monospace;
  letter-spacing: .15em;
}

.game-card.is-cleared {
  border-color: rgba(134, 244, 255, .6);
  box-shadow:
    inset 0 0 34px rgba(76, 221, 255, .09),
    0 0 20px rgba(76, 221, 255, .08);
}

.game-card.is-cleared::after {
  width: 8px;
  height: 8px;
  background: rgba(205, 252, 255, .95);
  box-shadow: 0 0 18px rgba(89, 231, 255, .95);
}

.game-card.is-encrypted {
  filter: saturate(.45);
  cursor: not-allowed;
}

.game-card.is-encrypted::before {
  opacity: .28;
}

.game-card.is-encrypted:hover,
.game-card.is-encrypted:focus-visible {
  outline: none;
  filter: saturate(.7);
  border-color: rgba(var(--protocol-tone), .36);
}

.game-card.is-encrypted:hover .game-card-icon i,
.game-card.is-encrypted:focus-visible .game-card-icon i {
  border-style: solid;
  animation-duration: 2.2s;
}

.game-card.is-encrypted:hover .game-card-icon b,
.game-card.is-encrypted:focus-visible .game-card-icon b {
  font-size: 0;
}

.game-card.is-encrypted:hover .game-card-icon b::after,
.game-card.is-encrypted:focus-visible .game-card-icon b::after {
  content: "⌾";
  font-size: 22px;
}

.game-card.is-redacted {
  filter: grayscale(1) brightness(.58);
  cursor: not-allowed;
  background:
    repeating-linear-gradient(0deg, rgba(80, 16, 53, .1) 0 2px, transparent 3px 8px),
    rgba(8, 3, 10, .9);
}

.game-card.is-redacted:hover {
  animation: v88-redacted-glitch .38s steps(2, end) 2;
}

.game-card.is-denied {
  animation: v88-access-denied .48s steps(3, end);
}

.game-shell:not(.is-choosing-game) .protocol-vault-status {
  display: none;
}

.game-shell:not(.is-choosing-game) .game-header {
  grid-template-columns: minmax(0, 1fr) max-content;
}

.game-shell:not(.is-choosing-game) .game-header h1 {
  font-size: clamp(28px, 3.2vw, 48px);
}

.game-toolbar {
  position: relative;
  z-index: 5;
  display: flex;
  justify-content: flex-start;
  gap: 9px;
  margin: 16px 0;
  padding: 10px;
  border-block: 1px solid rgba(var(--vault-accent), .1);
}

.game-stat {
  min-width: 92px;
  border: 0;
  border-left: 1px solid rgba(var(--vault-accent), .13);
  border-radius: 0;
  background: transparent;
}

.game-help {
  position: relative;
  z-index: 3;
  margin: -2px 0 14px;
  color: rgba(144, 210, 235, .6);
  font: 700 8px/1.5 "Courier New", Consolas, monospace;
  letter-spacing: .11em;
  text-align: center;
  text-transform: uppercase;
}

.giglio-board,
.alt-game-area {
  position: relative;
  z-index: 3;
}

.giglio-board {
  --cell: clamp(30px, min(7vw, 7vh), 46px);
  border-radius: 3px 22px 3px 22px;
  background:
    radial-gradient(circle at 50% 50%, rgba(var(--vault-accent), .08), transparent 64%),
    rgba(0, 7, 15, .72);
  box-shadow: inset 0 0 40px rgba(var(--vault-accent), .04);
}

.cell {
  position: relative;
  border-radius: 3px 10px 3px 10px !important;
  transition: transform 170ms ease, border-color 170ms ease, background 220ms ease;
}

.cell:not(.revealed):hover,
.cell:not(.revealed):focus-visible {
  z-index: 2;
  outline: none;
  transform: scale(1.1);
  border-color: rgba(var(--vault-accent), .72) !important;
}

.cell.is-newly-revealed {
  animation: v88-cell-decode .36s cubic-bezier(.16, 1, .3, 1);
}

.cell.lily::before,
.cell.feather::before {
  content: "";
  position: absolute;
  inset: 23%;
  border: 1px solid rgba(212, 252, 255, .78);
  transform: rotate(45deg);
  box-shadow: 0 0 12px rgba(var(--vault-accent), .55);
}

.cell.lily::after {
  content: "✿";
  color: rgba(220, 252, 255, .96);
  text-shadow: 0 0 14px rgba(var(--vault-accent), .9);
}

.cell.feather::after {
  content: "⌁";
  color: rgba(220, 252, 255, .96);
  text-shadow: 0 0 14px rgba(var(--vault-accent), .9);
}

.alt-game-area {
  width: min(920px, 100%);
  min-height: min(620px, calc(100dvh - 240px));
  margin: 14px auto 0;
  padding: clamp(14px, 2.4vw, 26px);
  border: 1px solid rgba(var(--vault-accent), .16);
  border-radius: 3px 26px 3px 26px;
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px));
  background:
    radial-gradient(circle at 50% 0, rgba(var(--vault-accent), .08), transparent 43%),
    rgba(0, 7, 15, .66);
  box-shadow: inset 0 0 42px rgba(var(--vault-accent), .035);
}

.protocol-panel {
  display: grid;
  gap: 16px;
  min-height: inherit;
}

.protocol-hud {
  display: grid;
  grid-template-columns: repeat(var(--hud-columns, 4), minmax(0, 1fr));
  gap: 8px;
}

.protocol-chip {
  min-width: 0;
  padding: 10px 12px;
  border-left: 1px solid rgba(var(--vault-accent), .3);
  color: rgba(151, 211, 235, .62);
  background: linear-gradient(90deg, rgba(var(--vault-accent), .055), transparent);
  font: 700 7px/1.25 "Courier New", Consolas, monospace;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.protocol-chip b {
  display: block;
  overflow: hidden;
  margin-top: 6px;
  color: rgba(229, 250, 255, .92);
  font-size: 13px;
  letter-spacing: .04em;
  text-overflow: ellipsis;
}

.protocol-objective {
  color: rgba(177, 226, 244, .7);
  font: 700 9px/1.5 "Courier New", Consolas, monospace;
  letter-spacing: .09em;
  text-align: center;
  text-transform: uppercase;
}

.protocol-progress {
  position: relative;
  height: 4px;
  overflow: hidden;
  border: 1px solid rgba(var(--vault-accent), .14);
  background: rgba(0, 0, 0, .32);
}

.protocol-progress i {
  display: block;
  width: var(--progress, 0%);
  height: 100%;
  background: linear-gradient(90deg, rgba(var(--vault-violet), .7), rgb(var(--vault-accent)));
  box-shadow: 0 0 14px rgba(var(--vault-accent), .58);
  transition: width 300ms cubic-bezier(.16, 1, .3, 1);
}

/* Memory reconstruction */
.memory-v88-grid {
  display: grid;
  grid-template-columns: repeat(var(--memory-cols, 4), minmax(58px, 1fr));
  gap: clamp(7px, 1vw, 12px);
  width: min(720px, 100%);
  margin: auto;
  perspective: 1100px;
}

.memory-v88-card {
  position: relative;
  min-height: clamp(74px, 10vw, 112px);
  border: 1px solid rgba(var(--card-tone, 88, 224, 255), .24);
  border-radius: 3px 16px 3px 16px;
  color: transparent;
  background:
    repeating-linear-gradient(0deg, transparent 0 5px, rgba(var(--card-tone, 88, 224, 255), .025) 6px),
    radial-gradient(circle, rgba(var(--card-tone, 88, 224, 255), .08), rgba(0, 9, 18, .9) 68%);
  transform-style: preserve-3d;
  transition: transform 420ms cubic-bezier(.16, 1, .3, 1), border-color 250ms ease, box-shadow 250ms ease;
}

.memory-v88-card::before {
  content: "?";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(var(--card-tone, 88, 224, 255), .56);
  font: 700 13px/1 "Courier New", Consolas, monospace;
  text-shadow: 0 0 10px rgba(var(--card-tone, 88, 224, 255), .5);
}

.memory-v88-card:hover,
.memory-v88-card:focus-visible {
  outline: none;
  border-color: rgba(var(--card-tone, 88, 224, 255), .7);
  transform: translateY(-3px);
}

.memory-v88-card.is-open,
.memory-v88-card.is-matched {
  color: rgba(230, 252, 255, .96);
  transform: rotateY(180deg);
  background:
    radial-gradient(circle, rgba(var(--card-tone, 88, 224, 255), .28), rgba(4, 29, 47, .8) 62%),
    rgba(0, 10, 20, .8);
  box-shadow: 0 0 22px rgba(var(--card-tone, 88, 224, 255), .16);
}

.memory-v88-card.is-open::before,
.memory-v88-card.is-matched::before {
  content: attr(data-symbol);
  color: inherit;
  font-size: clamp(14px, 2vw, 22px);
  transform: rotateY(180deg);
}

.memory-v88-card.is-matched {
  border-color: rgba(173, 248, 255, .64);
  animation: v88-memory-lock .5s ease both;
}

.memory-v88-grid.is-corrupted {
  animation: v88-memory-corrupt .36s steps(3, end);
}

/* Signal ritual */
.signal-v88-field {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(76px, 1fr));
  gap: clamp(10px, 1.5vw, 17px);
  width: min(560px, 100%);
  margin: auto;
  padding: clamp(14px, 3vw, 30px);
}

.signal-v88-field::before {
  content: "";
  position: absolute;
  inset: 7%;
  border: 1px solid rgba(var(--vault-accent), .12);
  border-radius: 50%;
  pointer-events: none;
  box-shadow:
    0 0 0 32px rgba(var(--vault-accent), .018),
    0 0 0 64px rgba(var(--vault-accent), .012);
  animation: v88-signal-field 10s linear infinite;
}

.signal-v88-pad {
  --pad-tone: 88, 224, 255;
  position: relative;
  z-index: 2;
  aspect-ratio: 1;
  min-height: 92px;
  overflow: hidden;
  border: 1px solid rgba(var(--pad-tone), .25);
  border-radius: 50%;
  color: rgba(var(--pad-tone), .72);
  background:
    radial-gradient(circle, rgba(var(--pad-tone), .13), rgba(0, 8, 18, .78) 68%);
  box-shadow: inset 0 0 24px rgba(var(--pad-tone), .06);
  font: 700 10px/1 "Courier New", Consolas, monospace;
  transition: transform 150ms ease, filter 150ms ease, box-shadow 150ms ease;
}

.signal-v88-pad::before,
.signal-v88-pad::after {
  content: "";
  position: absolute;
  inset: 13%;
  border: 1px dashed rgba(var(--pad-tone), .23);
  border-radius: 50%;
}

.signal-v88-pad::after {
  inset: 34%;
  border-style: solid;
  background: rgba(var(--pad-tone), .08);
}

.signal-v88-pad:nth-child(2n) { --pad-tone: 110, 151, 255; }
.signal-v88-pad:nth-child(3n) { --pad-tone: 116, 238, 218; }
.signal-v88-pad:nth-child(5) { grid-column: 2; }
.signal-v88-pad:nth-child(n + 6) { grid-row: 2; }

.signal-v88-pad.is-active,
.signal-v88-pad:active {
  color: #fff;
  transform: scale(1.1);
  filter: brightness(1.55);
  background: radial-gradient(circle, rgba(255, 255, 255, .82), rgba(var(--pad-tone), .45) 22%, rgba(var(--pad-tone), .12) 68%);
  box-shadow:
    0 0 32px rgba(var(--pad-tone), .62),
    inset 0 0 30px rgba(255, 255, 255, .18);
}

.signal-v88-pad:disabled {
  cursor: wait;
}

.signal-v88-start {
  width: min(340px, 100%);
  margin: 0 auto;
}

/* Canvas protocols */
.canvas-protocol-stage {
  position: relative;
  width: min(760px, 100%);
  min-height: 390px;
  margin: auto;
  overflow: hidden;
  border: 1px solid rgba(var(--vault-accent), .22);
  border-radius: 3px 24px 3px 24px;
  background:
    radial-gradient(circle at 50% 10%, rgba(var(--vault-accent), .12), transparent 44%),
    linear-gradient(180deg, rgba(0, 18, 31, .86), rgba(0, 4, 11, .94));
  box-shadow:
    inset 0 0 44px rgba(var(--vault-accent), .045),
    0 14px 40px rgba(0, 0, 0, .24);
  touch-action: none;
}

.canvas-protocol-stage canvas {
  display: block;
  width: 100%;
  height: clamp(390px, 52vh, 520px);
}

.canvas-stage-label {
  position: absolute;
  z-index: 3;
  top: 12px;
  left: 14px;
  pointer-events: none;
  color: rgba(153, 218, 241, .45);
  font: 700 6px/1 "Courier New", Consolas, monospace;
  letter-spacing: .16em;
}

.canvas-command {
  position: absolute;
  z-index: 5;
  right: 14px;
  bottom: 14px;
  min-width: 116px;
  min-height: 42px;
}

.canvas-command.is-ready {
  border-color: rgba(188, 250, 255, .8);
  color: #fff;
  box-shadow: 0 0 24px rgba(var(--vault-accent), .24);
  animation: v88-command-ready 1.2s ease-in-out infinite;
}

.runner-controls {
  position: absolute;
  z-index: 5;
  right: 13px;
  bottom: 13px;
  display: flex;
  gap: 8px;
}

.runner-controls .game-btn {
  min-width: 78px;
}

.protocol-countdown {
  position: absolute;
  z-index: 7;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  color: rgba(231, 253, 255, .98);
  font: 800 clamp(46px, 12vw, 100px)/1 Inter, system-ui, sans-serif;
  text-shadow: 0 0 32px rgba(var(--vault-accent), .62);
  animation: v88-countdown .7s ease both;
}

.game-modal {
  background:
    radial-gradient(circle at 50% 42%, rgba(var(--vault-accent), .16), transparent 38%),
    rgba(0, 3, 9, .82);
}

.game-modal-card {
  border-radius: 3px 28px 3px 28px;
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px));
  background:
    repeating-linear-gradient(0deg, transparent 0 6px, rgba(var(--vault-accent), .025) 7px),
    linear-gradient(145deg, rgba(5, 28, 43, .98), rgba(0, 8, 18, .96));
}

.game-modal-card.is-victory {
  border-color: rgba(158, 245, 255, .62);
  box-shadow:
    0 0 42px rgba(var(--vault-accent), .18),
    inset 0 0 30px rgba(var(--vault-accent), .08);
}

@keyframes v88-vault-orbit {
  to { transform: translateX(-50%) rotate(360deg); }
}

@keyframes v88-vault-scan {
  0%, 100% { opacity: .12; transform: translateY(0); }
  45% { opacity: .78; transform: translateY(calc(100dvh - 70px)); }
  46% { opacity: 0; }
}

@keyframes v88-status-pulse {
  50% { opacity: .25; transform: scale(.7); }
}

@keyframes v88-card-orbit {
  to { transform: rotate(360deg); }
}

@keyframes v88-redacted-glitch {
  0%, 100% { transform: translate(0); filter: grayscale(1) brightness(.58); }
  35% { transform: translate(-3px, 1px); filter: grayscale(.4) hue-rotate(40deg); }
  70% { transform: translate(3px, -1px); }
}

@keyframes v88-access-denied {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); border-color: rgba(205, 244, 255, .68); }
  50% { transform: translateX(4px); filter: brightness(1.35); }
  75% { transform: translateX(-2px); }
}

@keyframes v88-cell-decode {
  from { transform: scale(.72) rotate(-6deg); filter: brightness(2); }
  to { transform: scale(1) rotate(0); filter: brightness(1); }
}

@keyframes v88-memory-lock {
  45% { transform: rotateY(180deg) scale(1.13); filter: brightness(1.6); }
}

@keyframes v88-memory-corrupt {
  30% { transform: translateX(-5px); filter: hue-rotate(50deg); }
  60% { transform: translateX(4px); filter: contrast(1.5); }
}

@keyframes v88-signal-field {
  to { transform: rotate(360deg); }
}

@keyframes v88-command-ready {
  50% { filter: brightness(1.5); transform: translateY(-2px); }
}

@keyframes v88-countdown {
  from { opacity: 0; transform: scale(1.8); filter: blur(8px); }
  to { opacity: 1; transform: scale(1); filter: blur(0); }
}

@media (max-width: 980px) {
  .game-hub {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .game-card {
    min-height: 210px;
  }

  .protocol-vault-status {
    grid-template-columns: 1fr max-content;
  }

  .protocol-vault-status em {
    display: none;
  }
}

@media (max-width: 720px) {
  .giglio-game {
    padding: 0;
  }

  .game-shell {
    min-height: 100dvh;
    padding: 16px 12px 24px;
    border-inline: 0;
    border-radius: 0;
    clip-path: none;
  }

  .game-header {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .return-site {
    width: 100%;
  }

  .game-hub {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }

  .game-card {
    min-height: 190px;
    padding: 15px;
  }

  .game-card-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 13px;
  }

  .game-card-code {
    margin-bottom: 14px;
  }

  .game-card small {
    font-size: 8px;
  }

  .game-toolbar {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .game-stat {
    min-width: 0;
  }

  .protocol-hud {
    --hud-columns: 2;
  }

  .alt-game-area {
    min-height: 500px;
    padding: 12px;
  }

  .memory-v88-grid {
    gap: 6px;
  }

  .memory-v88-card {
    min-height: 62px;
  }

  .signal-v88-field {
    gap: 8px;
    padding: 8px;
  }

  .signal-v88-pad {
    min-height: 72px;
  }

  .canvas-protocol-stage,
  .canvas-protocol-stage canvas {
    min-height: 360px;
    height: min(58vh, 460px);
  }
}

@media (max-width: 430px) {
  .game-hub {
    grid-template-columns: 1fr;
  }

  .game-card {
    min-height: 165px;
  }

  .game-card-icon {
    position: absolute;
    top: 44px;
    right: 18px;
  }

  .game-card strong,
  .game-card small,
  .game-card-state {
    max-width: calc(100% - 72px);
  }

  .protocol-vault-status {
    grid-template-columns: 1fr;
    line-height: 1.5;
  }

  .memory-v88-grid {
    grid-template-columns: repeat(var(--memory-mobile-cols, 4), minmax(42px, 1fr));
  }

  .memory-v88-card {
    min-height: 54px;
  }

  .signal-v88-pad {
    min-height: 64px;
  }

  .canvas-protocol-stage,
  .canvas-protocol-stage canvas {
    min-height: 340px;
    height: min(54vh, 400px);
  }

  .runner-controls {
    right: 8px;
    bottom: 8px;
  }

  .runner-controls .game-btn {
    min-width: 62px;
    padding-inline: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .giglio-game::after,
  .game-shell::after,
  .protocol-vault-status i,
  .game-card-icon i,
  .signal-v88-field::before,
  .canvas-command.is-ready {
    animation: none !important;
  }
}

html.visual-soft .giglio-game::before,
html.visual-soft .game-shell::after,
html.visual-soft .signal-v88-field::before {
  display: none;
}

html.visual-soft .game-card-icon i {
  animation-duration: 18s;
}

/* v89 — the vault is a closed reality: page collectibles never enter it. */
body.game-portal-open .page-butterfly-v64-layer,
body.game-portal-open #memory-butterfly-hud,
body.game-portal-open #memory-butterfly-toast,
body.game-portal-open .memory-butterfly-toast {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body.game-portal-open #site-navbar,
body.game-portal-open .cursor-shell {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body.game-portal-open {
  cursor: auto !important;
}

.memory-v88-card[data-symbol="FEATHER"].is-open::before,
.memory-v88-card[data-symbol="FEATHER"].is-matched::before {
  color: rgba(160, 232, 255, .98);
  font-size: clamp(9px, 1.25vw, 15px);
  letter-spacing: .06em;
}

/* Protocol 03 — Starfall 4072 */
.starfall-intro-v89 {
  position: relative;
  width: min(1020px, 100%);
  min-height: 520px;
  height: min(67vh, 670px);
  margin: auto;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(91, 215, 255, .32);
  border-radius: 3px 34px 3px 34px;
  background: #01050c;
  box-shadow:
    0 0 0 1px rgba(111, 106, 255, .08),
    0 34px 90px rgba(0, 0, 0, .5),
    inset 0 0 70px rgba(18, 113, 184, .08);
}

.starfall-intro-v89::before,
.starfall-intro-v89::after {
  content: "";
  position: absolute;
  z-index: 2;
  pointer-events: none;
}

.starfall-intro-v89::before {
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0 48%, rgba(0, 7, 16, .2) 64%, rgba(0, 7, 16, .74) 100%),
    linear-gradient(0deg, rgba(0, 7, 16, .62), transparent 48%);
}

.starfall-intro-v89::after {
  inset: 17px;
  border: 1px solid rgba(119, 225, 255, .14);
  border-radius: 2px 25px 2px 25px;
  background:
    linear-gradient(90deg, rgba(103, 224, 255, .7), transparent) left top / 92px 1px no-repeat,
    linear-gradient(rgba(103, 224, 255, .7), transparent) left top / 1px 92px no-repeat,
    linear-gradient(270deg, rgba(103, 224, 255, .44), transparent) right bottom / 92px 1px no-repeat,
    linear-gradient(0deg, rgba(103, 224, 255, .44), transparent) right bottom / 1px 92px no-repeat;
}

.starfall-portrait-v89 {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(.92) contrast(1.05);
  animation: v89-starfall-breathe 12s ease-in-out infinite alternate;
}

.starfall-scanlines-v89 {
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
  opacity: .18;
  background: repeating-linear-gradient(0deg, transparent 0 4px, rgba(104, 221, 255, .12) 5px);
  mix-blend-mode: screen;
}

.starfall-dialogue-v89 {
  position: absolute;
  z-index: 5;
  right: clamp(22px, 4vw, 58px);
  bottom: clamp(24px, 5vh, 58px);
  width: min(47%, 480px);
  padding: clamp(20px, 3vw, 34px);
  border: 1px solid rgba(114, 224, 255, .34);
  border-radius: 2px 24px 2px 24px;
  color: rgba(230, 250, 255, .94);
  background:
    linear-gradient(135deg, rgba(9, 37, 69, .9), rgba(0, 7, 17, .92) 74%),
    rgba(0, 8, 18, .9);
  backdrop-filter: blur(14px);
  box-shadow: 0 0 46px rgba(34, 148, 255, .18), inset 0 0 30px rgba(70, 206, 255, .05);
}

.starfall-dialogue-v89::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 24px;
  width: 34%;
  height: 2px;
  background: linear-gradient(90deg, rgb(136, 235, 255), transparent);
  box-shadow: 0 0 15px rgba(93, 220, 255, .75);
}

.starfall-speaker-v89,
.starfall-link-v89 {
  display: block;
  color: rgba(142, 229, 255, .78);
  font: 700 9px/1.2 "Courier New", Consolas, monospace;
  letter-spacing: .16em;
}

.starfall-link-v89 {
  position: absolute;
  top: 21px;
  right: 23px;
  color: rgba(126, 155, 255, .62);
  font-size: 7px;
}

.starfall-dialogue-v89 p {
  min-height: 6.2em;
  margin: 24px 0;
  color: rgba(231, 250, 255, .94);
  font: 400 clamp(16px, 1.55vw, 23px)/1.55 "Arial Narrow", "Segoe UI", sans-serif;
  text-wrap: balance;
  text-shadow: 0 0 22px rgba(78, 204, 255, .18);
}

.starfall-dialogue-v89 p.is-speaking {
  animation: v89-dialogue-arrive .48s cubic-bezier(.16, 1, .3, 1);
}

.starfall-advance-v89 {
  width: 100%;
  justify-content: center;
}

.starfall-v89 {
  width: min(1020px, 100%);
}

.starfall-stage-v89 {
  width: min(940px, 100%);
}

.starfall-stage-v89 canvas {
  cursor: crosshair;
  touch-action: none;
}

@keyframes v89-starfall-breathe {
  from { transform: scale(1.015) translate3d(0, 0, 0); }
  to { transform: scale(1.055) translate3d(-.7%, -.3%, 0); }
}

@keyframes v89-dialogue-arrive {
  from { opacity: .15; transform: translateY(10px); filter: blur(5px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@media (max-width: 760px) {
  .starfall-intro-v89 {
    min-height: 570px;
    height: min(72vh, 660px);
  }

  .starfall-portrait-v89 {
    object-position: 34% center;
  }

  .starfall-intro-v89::before {
    background: linear-gradient(0deg, rgba(0, 7, 16, .96) 0 32%, rgba(0, 7, 16, .2) 67%, transparent 100%);
  }

  .starfall-dialogue-v89 {
    right: 14px;
    bottom: 14px;
    left: 14px;
    width: auto;
    padding: 19px;
  }

  .starfall-dialogue-v89 p {
    min-height: 4.8em;
    margin: 18px 0;
    font-size: clamp(14px, 4vw, 18px);
  }

  .starfall-link-v89 {
    position: static;
    margin-top: 7px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .starfall-portrait-v89,
  .starfall-dialogue-v89 p.is-speaking {
    animation: none !important;
  }
}

html.visual-soft .starfall-scanlines-v89 {
  display: none;
}

/* ===========================================================
   PRIMARY GAME SIGNAL // PROTOCOL 03

   Starfall gets scale and context, the other protocols keep their
   card exactly as it was. This block adds a variant of .game-card
   and one divider; it changes no existing rule.

   The acquisition runs when the hub opens. game_v88.js toggles
   hub.style.display between "none" and "grid", and returning from
   display:none restarts CSS animations from scratch, so the event
   replays on every reopening with no JS involved.

   Hover is overlay only. After what a `width: auto` in a hover
   state did to the Community portrait, nothing here writes a
   layout property: no width, height, margin, padding, inset or
   grid-template, on any state.
   =========================================================== */
.game-card--featured {
  grid-column: 1 / -1;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
  align-items: center;
  gap: clamp(1rem, 3vw, 2.2rem);
  padding: clamp(1.1rem, 3vw, 1.9rem);
  text-align: left;
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 130% at 8% 50%, rgba(0, 190, 255, .13), transparent 60%),
    linear-gradient(120deg, rgba(6, 20, 34, .92), rgba(3, 9, 18, .96));
  border-color: rgba(0, 220, 255, .45);
}

/* --- the traced frame ------------------------------------- */
.gf-frame {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.gf-trace {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.gf-trace-line {
  fill: none;
  stroke: #7ff0ff;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  filter: drop-shadow(0 0 6px rgba(0, 220, 255, .75));
}

/* one sweep down the card as the frame is acquired */
.gf-scan {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(0, 225, 255, .85) 25%, #ffffff 50%, rgba(0, 225, 255, .85) 75%, transparent);
  box-shadow: 0 0 16px 3px rgba(0, 220, 255, .5);
  opacity: 0;
}

/* the signal lock: a ring that closes once on the glyph */
.gf-lock {
  position: absolute;
  left: clamp(1.1rem, 3vw, 1.9rem);
  top: 50%;
  width: 64px;
  height: 64px;
  margin: -32px 0 0;
  border-radius: 50%;
  border: 1px solid rgba(0, 225, 255, .9);
  opacity: 0;
}

/* --- identity --------------------------------------------- */
.gf-lead {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: clamp(.9rem, 2.4vw, 1.5rem);
  min-width: 0;
}

.gf-glyph {
  flex: 0 0 auto;
  transform: scale(1.25);
}

.gf-id {
  display: grid;
  gap: .34rem;
  min-width: 0;
}

.game-card--featured .gf-kicker {
  color: #7ff0ff;
  letter-spacing: .18em;
  overflow-wrap: anywhere;
}

.game-card--featured .gf-title {
  color: #eaffff;
  font: 800 clamp(1.5rem, 4.4vw, 2.5rem)/1.05 "Courier New", Consolas, monospace;
  letter-spacing: .04em;
  text-shadow: 0 0 26px rgba(0, 220, 255, .4);
  overflow-wrap: normal;
  word-break: normal;
}

.game-card--featured .gf-desc {
  color: rgba(214, 240, 252, .8);
  max-width: 46ch;
}

/* --- panel ------------------------------------------------- */
.gf-panel {
  position: relative;
  z-index: 1;
  display: grid;
  gap: .6rem;
  justify-items: start;
  min-width: 0;
}

.game-card--featured .gf-badge {
  display: inline-block;
  padding: .3rem .7rem;
  border-radius: 999px;
  border: 1px solid rgba(0, 225, 255, .7);
  background: rgba(0, 40, 60, .6);
  color: #b9f7ff;
  font: 800 .62rem/1 "Courier New", Consolas, monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(-6px);
}

.gf-hud {
  display: grid;
  gap: .25rem;
  width: 100%;
}

.game-card--featured .gf-hud-row {
  display: flex;
  align-items: center;
  gap: .45rem;
  color: rgba(158, 244, 255, .82);
  font: 400 .58rem/1.4 "Courier New", Consolas, monospace;
  letter-spacing: .12em;
  overflow-wrap: anywhere;
}

.gf-hud-row i {
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #7ff0ff;
  box-shadow: 0 0 7px rgba(0, 220, 255, .8);
}

.game-card--featured .gf-state { width: 100%; }

/* --- call to action ---------------------------------------- */
.gf-cta {
  position: relative;
  display: grid;
  gap: .2rem;
  width: 100%;
  margin-top: .25rem;
  padding: .68rem .9rem;
  border-radius: 8px;
  border: 1px solid rgba(0, 225, 255, .75);
  background: linear-gradient(180deg, rgba(0, 60, 88, .7), rgba(0, 26, 42, .82));
  text-align: center;
  transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}

.game-card--featured .gf-cta b {
  color: #eaffff;
  font: 800 .78rem/1.2 "Courier New", Consolas, monospace;
  letter-spacing: .1em;
  overflow-wrap: anywhere;
}

/* the hover sequence lives here and only shows on hover */
.game-card--featured .gf-seq {
  display: grid;
  height: .82rem;
  overflow: hidden;
  color: rgba(158, 244, 255, .85);
  font: 400 .52rem/.82rem "Courier New", Consolas, monospace;
  letter-spacing: .2em;
}

.gf-seq em {
  grid-area: 1 / 1;
  font-style: normal;
  opacity: 0;
}

/* --- the acquisition, on every hub opening ----------------- */
.game-hub .game-card--featured .gf-trace-line {
  animation: gf-trace 1100ms cubic-bezier(.4, 0, .2, 1) 160ms 1 both;
}

@keyframes gf-trace {
  from { stroke-dashoffset: 1; }
  to   { stroke-dashoffset: 0; }
}

.game-hub .game-card--featured .gf-scan {
  animation: gf-scan 1000ms ease 220ms 1 both;
}

@keyframes gf-scan {
  0%   { opacity: 0; transform: translateY(0); }
  12%  { opacity: 1; }
  88%  { opacity: .9; }
  100% { opacity: 0; transform: translateY(var(--gf-h, 220px)); }
}

.game-hub .game-card--featured .gf-lock {
  animation: gf-lock 760ms cubic-bezier(.2, 1, .3, 1) 900ms 1 both;
}

@keyframes gf-lock {
  0%   { opacity: 0; transform: scale(1.9) rotate(-25deg); }
  45%  { opacity: .9; }
  100% { opacity: 0; transform: scale(.72) rotate(0deg); }
}

.game-hub .game-card--featured .gf-badge {
  animation: gf-badge 620ms cubic-bezier(.2, 1, .3, 1) 1180ms 1 both;
}

@keyframes gf-badge {
  0%   { opacity: 0; transform: translateY(-6px); }
  60%  { opacity: 1; transform: translateY(1px); }
  100% { opacity: 1; transform: translateY(0); }
}

.game-hub .game-card--featured .gf-title {
  animation: gf-title 520ms steps(4, end) 700ms 1 both;
}

@keyframes gf-title {
  0%   { opacity: .35; letter-spacing: .3em; }
  40%  { opacity: 1;   letter-spacing: .02em; }
  70%  { opacity: .7; }
  100% { opacity: 1;   letter-spacing: .04em; }
}

/* --- hover and focus: overlay only ------------------------- */
.game-card--featured.is-playable:hover,
.game-card--featured.is-playable:focus-visible {
  border-color: rgba(120, 235, 255, .95);
  box-shadow: 0 0 44px rgba(0, 220, 255, .3), inset 0 0 60px rgba(0, 180, 255, .08);
}

.game-card--featured .gf-glyph { transition: transform .35s cubic-bezier(.2, 1, .3, 1); }
.game-card--featured.is-playable:hover .gf-glyph { transform: scale(1.34); }

.game-card--featured.is-playable:hover .gf-cta,
.game-card--featured.is-playable:focus-visible .gf-cta {
  border-color: #b9f7ff;
  background: linear-gradient(180deg, rgba(0, 84, 120, .8), rgba(0, 34, 56, .9));
  box-shadow: 0 0 26px rgba(0, 220, 255, .35);
}

/* SCANNING → TARGET LOCK → STARFALL 4072, one pass per hover */
.game-card--featured.is-playable:hover .gf-seq em:nth-child(1),
.game-card--featured.is-playable:focus-visible .gf-seq em:nth-child(1) { animation: gf-seq 1500ms steps(1,end) 0ms 1 both; }
.game-card--featured.is-playable:hover .gf-seq em:nth-child(2),
.game-card--featured.is-playable:focus-visible .gf-seq em:nth-child(2) { animation: gf-seq 1500ms steps(1,end) 500ms 1 both; }
.game-card--featured.is-playable:hover .gf-seq em:nth-child(3),
.game-card--featured.is-playable:focus-visible .gf-seq em:nth-child(3) { animation: gf-seq-last 1500ms steps(1,end) 1000ms 1 both; }

@keyframes gf-seq {
  0%, 33%  { opacity: 1; }
  34%, 100%{ opacity: 0; }
}

@keyframes gf-seq-last {
  0%   { opacity: 0; }
  1%   { opacity: 1; }
  100% { opacity: 1; }
}

/* --- cleared state, reusing the existing vault behaviour --- */
.game-card--featured.is-cleared .gf-badge {
  border-color: rgba(120, 255, 190, .7);
  color: #b9ffdd;
}

/* --- the divider above the remaining protocols ------------- */
.gf-divider {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: .9rem;
  margin: .5rem 0 -.1rem;
  padding: 0;
}

.gf-divider span {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 220, 255, .26), transparent);
}

.gf-divider b {
  flex: 0 0 auto;
  color: rgba(158, 244, 255, .55);
  font: 400 .56rem/1 "Courier New", Consolas, monospace;
  letter-spacing: .2em;
  white-space: nowrap;
}

/* ===========================================================
   Narrow: the featured card stacks, everything stays legible
   =========================================================== */
@media (max-width: 900px) {
  .game-card--featured {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }

  .gf-panel { justify-items: stretch; }
  .gf-badge { justify-self: start; }
  .game-card--featured .gf-desc { max-width: none; }
}

@media (max-width: 620px) {
  .game-card--featured { padding: 1rem; }

  .gf-lead {
    align-items: flex-start;
    gap: .8rem;
  }

  .gf-glyph { transform: scale(1.05); }
  .game-card--featured.is-playable:hover .gf-glyph { transform: scale(1.12); }

  .game-card--featured .gf-title { font-size: clamp(1.4rem, 8.4vw, 2rem); }
  .game-card--featured .gf-kicker { font-size: .5rem; letter-spacing: .12em; }
  .game-card--featured .gf-hud-row { font-size: .54rem; letter-spacing: .08em; }

  .gf-cta { padding: .8rem .7rem; }
  .game-card--featured .gf-cta b { font-size: .72rem; }

  .gf-divider b { font-size: .5rem; letter-spacing: .14em; white-space: normal; text-align: center; }
}

/* At the narrowest widths the lock ring would sit outside the
   stacked glyph, so it steps out rather than floating. */
@media (max-width: 480px) {
  .gf-lock { display: none; }
  .gf-seq { letter-spacing: .12em; }
}

@media (prefers-reduced-motion: reduce) {
  .game-hub .game-card--featured .gf-trace-line { animation: none !important; stroke-dashoffset: 0; }
  .game-hub .game-card--featured .gf-scan,
  .game-hub .game-card--featured .gf-lock { animation: none !important; opacity: 0; }
  .game-hub .game-card--featured .gf-badge { animation: none !important; opacity: 1; transform: none; }
  .game-hub .game-card--featured .gf-title { animation: none !important; }
  .game-card--featured .gf-glyph,
  .game-card--featured .gf-cta { transition: none !important; }
  .game-card--featured.is-playable:hover .gf-glyph { transform: scale(1.25); }
  .game-card--featured.is-playable:hover .gf-seq em,
  .game-card--featured.is-playable:focus-visible .gf-seq em { animation: none !important; }
  .game-card--featured .gf-seq em:nth-child(3) { opacity: 1; }
}

/* ===========================================================
   FEATURED · CONTAINMENT  (mobile hotfix, 18 Aug 2026)

   Real-device report: on iPhone the right edge of the featured
   Starfall card ran past the viewport.

   Cause, measured at 375px. `.gf-cta` is a <span> carrying
   `width: 100%` together with `padding: .68rem .9rem` and a 1px
   border. A <button> inherits `box-sizing: border-box` from the
   UA stylesheet — which is why the card itself measured
   correctly — but its <span> children do not, and this sheet
   declares no reset of its own. The CTA therefore resolved to
   100% + 2x padding + 2x border and reached 370.4px against a
   content box ending at 347: 23.4px of overflow, growing as a
   share of the viewport the narrower the screen gets.

   `overflow: hidden` on `.game-card` kept that out of the
   document scrollWidth, which is exactly why the automated pass
   read clean while the real device did not. Measuring the
   document was the wrong probe; the card had to be measured
   from the inside.

   The sum is removed at its root rather than patched per
   breakpoint, so `width: 100%` means 100% everywhere in this
   composition. No type is scaled down and no element is
   dropped: the card simply occupies the width it is given.
   =========================================================== */
.game-card--featured,
.game-card--featured *,
.game-card--featured *::before,
.game-card--featured *::after {
  box-sizing: border-box;
}

.game-card--featured {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin-inline: auto;
}

/* Every box in the composition may shrink below its own
   min-content, so a long token wraps instead of widening the
   grid that contains it. */
.game-card--featured .gf-lead,
.game-card--featured .gf-id,
.game-card--featured .gf-panel,
.game-card--featured .gf-hud,
.game-card--featured .gf-hud-row,
.game-card--featured .gf-state,
.game-card--featured .gf-cta,
.game-card--featured .gf-cta b,
.game-card--featured .gf-seq,
.game-card--featured .gf-seq em,
.game-card--featured .gf-badge,
.game-card--featured .gf-divider {
  min-width: 0;
  max-width: 100%;
}

/* SYNCHRONIZE & LAUNCH is the longest string in the card. It is
   allowed to break rather than to push, and the sequence readout
   under it keeps its fixed height whether the label takes one
   line or two. */
.game-card--featured .gf-cta b {
  overflow-wrap: anywhere;
  word-break: normal;
}

/* The badge was the one remaining nowrap in the composition. At
   320 it is permitted to wrap on its own pill. */
@media (max-width: 380px) {
  .game-card--featured .gf-badge { white-space: normal; }
}

/* Decoration draws inside the border box and never measures. */
.game-card--featured .gf-frame,
.game-card--featured .gf-trace,
.game-card--featured .gf-scan,
.game-card--featured .gf-lock {
  max-width: 100%;
  pointer-events: none;
}