/* MGS1 Codec: full-stage phosphor screen drawn on canvas; DOM only for buttons + screen reader text */
#stage:has(.screen.on.codec) #hud { visibility: hidden; }
#stage:has(.screen.on.codec) #banner { visibility: hidden; }

.screen.on.codec {
  --c-hi: #8dff5a; --c-mid: #46b82c; --c-dim: #2e6b1a; --c-bg: #010602; --c-glow: rgba(110, 255, 60, .55);
  padding: 0; gap: 0; background: var(--c-bg); cursor: pointer;
  animation: codecIn .12s steps(2) both;
}
.screen.on.codec.mantis { --c-hi: #ff5a46; --c-mid: #c0281e; --c-dim: #6b1a14; --c-bg: #060101; --c-glow: rgba(255, 60, 40, .55); }
@keyframes codecIn { from { opacity: 0; } }

.codec-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.codec-live {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.screen.codec button {
  position: relative; z-index: 1; cursor: pointer;
  font-family: var(--f-retro); color: var(--c-hi); background: rgba(0, 0, 0, .55);
  border: .25cqh solid var(--c-mid); border-radius: 0; text-shadow: 0 0 .8cqh var(--c-glow);
  -webkit-tap-highlight-color: transparent;
}
.screen.codec button:hover, .screen.codec button:focus-visible {
  outline: none; color: var(--c-bg); background: var(--c-hi); text-shadow: none; border-color: var(--c-hi);
}

.codec-skip {
  position: absolute !important; right: 3.4cqw; top: 85cqh;
  font-size: 3.4cqh; line-height: 1; padding: .7cqh 2.4cqw .5cqh; letter-spacing: .1em;
}
.codec-skip:focus { outline: none; color: var(--c-bg); background: var(--c-hi); text-shadow: none; animation: codecBlink 1s steps(2) infinite; }
@keyframes codecBlink { 50% { background: var(--c-mid); border-color: var(--c-mid); } }

.codec-choices {
  position: absolute; left: 3.4cqw; right: 3.4cqw; top: 84.5cqh;
  display: flex; gap: 3cqw; justify-content: center;
  opacity: 0; pointer-events: none; transform: translateY(1cqh); transition: opacity .25s, transform .25s;
}
.codec-choices.on { opacity: 1; pointer-events: auto; transform: none; }
.codec-btn {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 9.4cqh; font-size: 4.2cqh; line-height: .9; letter-spacing: .06em; padding: .8cqh 2cqw;
}
.codec-btn small { font-size: 2.6cqh; letter-spacing: .04em; opacity: .85; }
.codec-btn.primary { border-width: .4cqh; box-shadow: 0 0 1.4cqh var(--c-glow), inset 0 0 1.2cqh rgba(110, 255, 60, .18); }