/* Shadow Moses: one pinned stage. The interface is Metal Gear Solid's own (LIFE, the Soliton radar,
   the weapon and item windows, the Codec), drawn with hairlines and set quietly in one family: tracked
   Geist caps for names, Geist Light set tight for the lines people actually said, Geist Mono for
   readouts, Mincho for the Japanese. Amber belongs to the projector, green to the Codec, red only to being seen. */
.mgs_wrap {
  --mgs-ink: #e9e3d8; --mgs-dim: rgba(233, 227, 216, .56); --mgs-faint: rgba(233, 227, 216, .16);
  --mgs-amber: #ff9a45; --mgs-green: #a6f3c9; --mgs-green-dim: rgba(166, 243, 201, .35); --mgs-alarm: #ff3b22; --mgs-void: #06080a;
  --mgs-sans: 'MGS Geist', 'Helvetica Neue', Arial, sans-serif; --mgs-mono: 'MGS Geist Mono', ui-monospace, monospace;
  --mgs-jp: 'MGS Mincho', 'Yu Mincho', 'Hiragino Mincho ProN', serif;
  --mgs-gutter: clamp(16px, 2.4vw, 36px); --mgs-heavy: cubic-bezier(.7, 0, .2, 1); --mgs-out: cubic-bezier(.16, 1, .3, 1);
  position: relative; height: 100svh; overflow: hidden; background: var(--mgs-void); color: var(--mgs-ink);
  font-family: var(--mgs-sans); font-weight: 300; font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased;
}
.mgs_wrap .mgs_contain { position: relative; width: 100%; height: 100%; overflow: hidden; }
/* the game's chrome lives in its own fixed layer on the page (moved there by mgs.js), so it stays
   on screen through the HIDEO channel and the finale, out of the pinned section's transform */
.mgs_wrap.is-chrome { position: fixed; inset: 0; z-index: 40; height: auto; background: none; pointer-events: none; overflow: visible; }
.mgs_wrap.is-chrome button, .mgs_wrap.is-chrome a { pointer-events: auto; }
.mgs_wrap.is-chrome.is-out:not(.is-battle) .mgs_cursor, .mgs_wrap.is-chrome.is-channel .mgs_cursor { opacity: 0; }
.mgs_wrap .mgs_mono { font-family: var(--mgs-mono); font-weight: 400; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; }
.mgs_wrap button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.mgs_wrap a { color: inherit; text-decoration: none; }

.mgs_wrap .mgs_world { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .9s var(--mgs-heavy); touch-action: pan-y; }
.mgs_wrap.is-in .mgs_world { opacity: 1; }
/* a fine CRT raster over everything the world draws */
.mgs_wrap .mgs_scan { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: .5; mix-blend-mode: multiply;
  background: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0) 0 2px, rgba(0, 0, 0, .22) 2px 3px); }

/* ---- the area's name ---- */
.mgs_wrap .mgs_areas { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.mgs_wrap .mgs_area { position: absolute; left: var(--mgs-gutter); top: calc(var(--mgs-gutter) + 92px); max-width: min(560px, 44vw); opacity: 0; visibility: hidden; }
.mgs_wrap .mgs_area > * { will-change: transform; }
.mgs_wrap .mgs_jp { margin: 0 0 14px; font-family: var(--mgs-jp); font-weight: 500; font-size: 13px; letter-spacing: .32em; color: var(--mgs-dim); }
.mgs_wrap .mgs_title { margin: 0; font-family: var(--mgs-sans); font-weight: 300; text-transform: uppercase; letter-spacing: .38em; line-height: 1.15;
  font-size: clamp(22px, 2.3vw, 38px); margin-right: -.38em; }
.mgs_wrap .mgs_where { margin: 16px 0 0; color: var(--mgs-dim); line-height: 1.8; }
/* a line someone said: Geist Light, set tight, its opening mark hung outside the measure */
.mgs_wrap .mgs_quote { position: relative; max-width: 7.4em; margin: 0; padding: 0; border: 0; font-family: var(--mgs-sans); font-weight: 300; font-size: clamp(34px, min(3.7vw, 7.4vh), 70px); line-height: 1.04; letter-spacing: -.045em; }
.mgs_wrap .mgs_quote::before { content: '“'; position: absolute; right: 100%; top: 0; }
.mgs_wrap .mgs_quote::after { content: '”'; }
.mgs_wrap .mgs_char { display: inline-block; }
.mgs_wrap .mgs_word { display: inline-block; white-space: nowrap; }

/* the island's sites, pinned to the hologram as Snake's route reaches them */
.mgs_wrap .mgs_pins { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.mgs_wrap .mgs_pins li { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 8px; font-size: 9px; color: var(--mgs-ink); white-space: nowrap; opacity: 0; transition: opacity .6s; }
.mgs_wrap .mgs_pins li::before { content: ''; width: 16px; height: 1px; background: var(--mgs-amber); }
.mgs_wrap .mgs_pins li.is-on { opacity: .85; }
.mgs_wrap .mgs_pins b { font-weight: 400; color: var(--mgs-amber); }

/* ---- the game's own chrome ---- */
.mgs_wrap .mgs_life, .mgs_wrap .mgs_radar, .mgs_wrap .mgs_equip, .mgs_wrap .mgs_gpu { position: fixed; z-index: 30; opacity: 0; transition: opacity 1.2s .6s var(--mgs-heavy); }
.mgs_wrap.is-in .mgs_life, .mgs_wrap.is-in .mgs_radar, .mgs_wrap.is-in .mgs_equip { opacity: 1; }
.mgs_wrap.is-channel .mgs_life, .mgs_wrap.is-channel .mgs_radar, .mgs_wrap.is-channel .mgs_equip, .mgs_wrap.is-channel .mgs_codec, .mgs_wrap.is-channel .mgs_hint, .mgs_wrap.is-channel .mgs_lock { opacity: 0 !important; pointer-events: none; transition-delay: 0s; transition-duration: .15s; }
.mgs_wrap .mgs_life { top: var(--mgs-gutter); left: var(--mgs-gutter); width: min(300px, 40vw); pointer-events: none; }
.mgs_wrap .mgs_life_label { margin: 0 0 6px; color: var(--mgs-dim); }
.mgs_wrap .mgs_life_bar { position: relative; height: 6px; border: 1px solid var(--mgs-faint); padding: 1px; }
.mgs_wrap .mgs_life_bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--mgs-green) 0 100%); transform-origin: left; transform: scaleX(var(--life, 1));
  background-image: repeating-linear-gradient(90deg, var(--mgs-green) 0 7px, transparent 7px 9px); transition: background-color .3s; }
.mgs_wrap .mgs_life.is-low .mgs_life_bar span { background-image: repeating-linear-gradient(90deg, var(--mgs-alarm) 0 7px, transparent 7px 9px); animation: mgs-blink .5s steps(2) infinite; }
.mgs_wrap .mgs_life_name { margin: 8px 0 0; letter-spacing: .3em; }
@keyframes mgs-blink { 50% { opacity: .35; } }

/* the Soliton radar: the page as a facility map, and your dot in it; it's also the chapter nav */
.mgs_wrap .mgs_radar { top: var(--mgs-gutter); right: var(--mgs-gutter); width: 148px; }
.mgs_wrap .mgs_radar_state { margin: 0 0 6px; text-align: right; color: var(--mgs-dim); }
.mgs_wrap .mgs_radar_map { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 26px; gap: 4px; margin: 0; padding: 6px; list-style: none;
  border: 1px solid var(--mgs-faint); background: radial-gradient(circle at 50% 50%, rgba(166, 243, 201, .06), transparent 70%),
    repeating-linear-gradient(0deg, rgba(166, 243, 201, .06) 0 1px, transparent 1px 10px), repeating-linear-gradient(90deg, rgba(166, 243, 201, .06) 0 1px, transparent 1px 10px); }
.mgs_wrap .mgs_radar_map li:nth-child(1) { grid-column: 1 / 3; } .mgs_wrap .mgs_radar_map li:nth-child(2) { grid-column: 3 / 5; }
.mgs_wrap .mgs_radar_map li:nth-child(3) { grid-column: 1 / 4; } .mgs_wrap .mgs_radar_map li:nth-child(4) { grid-column: 4 / 5; }
.mgs_wrap .mgs_radar_map li:nth-child(5) { grid-column: 1 / 2; } .mgs_wrap .mgs_radar_map li:nth-child(6) { grid-column: 2 / 4; } .mgs_wrap .mgs_radar_map li:nth-child(7) { grid-column: 4 / 5; }
.mgs_wrap .mgs_radar_map a { position: relative; display: flex; align-items: center; justify-content: center; height: 100%; border: 1px solid var(--mgs-green-dim); color: var(--mgs-green-dim); transition: background .3s, color .3s, border-color .3s; }
.mgs_wrap .mgs_radar_map a .mgs_mono { font-size: 8.5px; letter-spacing: .1em; }
.mgs_wrap .mgs_radar_map a:hover { color: var(--mgs-green); border-color: var(--mgs-green); }
.mgs_wrap .mgs_radar_map a.is-here { background: rgba(166, 243, 201, .12); color: var(--mgs-green); border-color: var(--mgs-green); }
.mgs_wrap .mgs_radar_map a.is-here::after { content: ''; position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px var(--mgs-green); }
.mgs_wrap .mgs_radar_map a.is-here .mgs_mono { opacity: 0; }
.mgs_wrap .mgs_radar_now { margin: 6px 0 0; text-align: right; color: var(--mgs-ink); white-space: nowrap; }
.mgs_wrap .mgs_radar.is-alert .mgs_radar_map { border-color: var(--mgs-alarm); background: rgba(255, 59, 34, .08); }
.mgs_wrap .mgs_radar.is-alert .mgs_radar_state { color: var(--mgs-alarm); }
.mgs_wrap .mgs_radar.is-jam .mgs_radar_map { background: repeating-linear-gradient(0deg, rgba(233, 227, 216, .1) 0 1px, transparent 1px 3px); animation: mgs-jam .12s steps(2) infinite; }
.mgs_wrap .mgs_radar.is-jam .mgs_radar_map a { opacity: .15; }
@keyframes mgs-jam { 50% { background-position: 0 2px; } }

/* the weapon and item windows: graphics and sound, equipped like gear */
.mgs_wrap .mgs_equip { bottom: var(--mgs-gutter); display: grid; grid-template-columns: auto; justify-items: start; gap: 2px; min-width: 132px; padding: 10px 14px 9px;
  border: 1px solid var(--mgs-faint); background: rgba(6, 8, 10, .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); text-align: left; transition: border-color .3s, opacity 1.2s .6s var(--mgs-heavy); }
.mgs_wrap .mgs_equip:hover { border-color: var(--mgs-dim); }
.mgs_wrap .mgs_equip.is-weapon { left: var(--mgs-gutter); }
.mgs_wrap .mgs_equip.is-item { right: var(--mgs-gutter); justify-items: end; text-align: right; }
.mgs_wrap .mgs_equip_kind { color: var(--mgs-dim); font-size: 9px; }
.mgs_wrap .mgs_equip_name { font-weight: 500; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }
.mgs_wrap .mgs_equip_val { color: var(--mgs-amber); }
.mgs_wrap .mgs_equip[aria-pressed="true"] .mgs_equip_val { color: var(--mgs-green); }
.mgs_wrap .mgs_gpu { left: var(--mgs-gutter); bottom: calc(var(--mgs-gutter) + 70px); width: min(300px, 70vw); margin: 0; font-size: 9.5px; line-height: 1.6; color: var(--mgs-dim); text-transform: none; letter-spacing: .04em;
  opacity: 0; transform: translateY(4px); transition: opacity .4s, transform .4s; pointer-events: none; }
.mgs_wrap .mgs_gpu.is-on { opacity: 1; transform: none; }

/* ---- the Codec ---- */
.mgs_wrap .mgs_codec { position: fixed; z-index: 28; left: 50%; bottom: var(--mgs-gutter); display: grid; grid-template-columns: 96px auto 96px; grid-template-rows: auto auto; column-gap: 22px; align-items: center;
  width: min(620px, calc(100vw - 2 * var(--mgs-gutter) - 2 * 148px)); opacity: 0; transform: translate(-50%, 10px); transition: opacity .5s var(--mgs-out), transform .5s var(--mgs-out); pointer-events: none; }
.mgs_wrap .mgs_codec.is-on { opacity: 1; transform: translate(-50%, 0); }
/* a soft dark field behind the call, so its line reads over whatever the table shows */
.mgs_wrap .mgs_codec::before { content: ''; position: absolute; inset: -60px -160px -40px; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 50% 60% at 50% 70%, rgba(6, 8, 10, .82), rgba(6, 8, 10, 0)); }
.mgs_wrap .mgs_codec_face { position: relative; margin: 0; width: 96px; height: 134px; border: 1px solid var(--mgs-green-dim); overflow: hidden; background: #07130d; opacity: .55; transition: opacity .3s; }
.mgs_wrap .mgs_codec_face.is-talking { opacity: 1; box-shadow: 0 0 18px rgba(166, 243, 201, .18); }
.mgs_wrap .mgs_codec_face img { display: block; width: 100%; height: 100%; object-fit: cover; filter: contrast(1.05); }
.mgs_wrap .mgs_codec_face::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(180deg, transparent 0 2px, rgba(0, 0, 0, .28) 2px 3px); }
.mgs_wrap .mgs_codec_face figcaption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 3px 4px; font-size: 8px; color: var(--mgs-green); background: rgba(7, 19, 13, .8); text-align: center; }
.mgs_wrap .mgs_codec_mid { display: grid; justify-items: center; gap: 4px; }
.mgs_wrap .mgs_codec_tab { padding: 2px 14px; border: 1px solid var(--mgs-green-dim); color: var(--mgs-green-dim); font-size: 8px; }
.mgs_wrap .mgs_codec_lcd { display: flex; align-items: end; gap: 6px; padding: 6px 10px; border: 1px solid var(--mgs-green-dim); background: rgba(7, 19, 13, .6); }
.mgs_wrap .mgs_codec_bars { display: block; width: 26px; height: 32px; background: repeating-linear-gradient(0deg, var(--mgs-green) 0 2px, transparent 2px 4px);
  clip-path: polygon(0 100%, 100% 100%, 100% calc(100% - var(--sig, 60%)), 0 calc(100% - var(--sig, 60%) * .3)); transition: clip-path .2s; }
.mgs_wrap .mgs_codec_freq, .mgs_wrap .mgs_boot_lcd svg { width: 132px; height: auto; }
.mgs_wrap .mgs_codec_freq path, .mgs_wrap .mgs_boot_lcd path, .mgs_wrap .mgs_codec_freq rect, .mgs_wrap .mgs_boot_lcd rect { fill: rgba(166, 243, 201, .08); }
.mgs_wrap .mgs_codec_freq .is-lit, .mgs_wrap .mgs_boot_lcd .is-lit { fill: var(--mgs-green); }
.mgs_wrap .mgs_codec_line { grid-column: 1 / -1; min-height: 3.1em; margin: 12px 0 0; text-align: center; font-family: var(--mgs-sans); font-weight: 500; font-size: 15.5px; line-height: 1.55; letter-spacing: .005em; color: var(--mgs-ink); text-wrap: balance; }
.mgs_wrap .mgs_codec_line b { font-weight: 500; color: var(--mgs-green); margin-right: .5em; letter-spacing: .14em; font-size: 10.5px; text-transform: uppercase; font-family: var(--mgs-mono); }

/* ---- Mantis reads the memory card ---- */
.mgs_wrap .mgs_card { position: absolute; z-index: 6; right: var(--mgs-gutter); top: calc(var(--mgs-gutter) + 196px); width: min(360px, 32vw); opacity: 0; visibility: hidden; transition: opacity .6s, visibility 0s .6s; }
.mgs_wrap .mgs_card.is-on { opacity: 1; visibility: visible; transition: opacity .6s; }
.mgs_wrap .mgs_card_head { display: flex; justify-content: space-between; margin: 0 0 10px; color: var(--mgs-dim); }
.mgs_wrap .mgs_card_blocks { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin: 0; padding: 0; list-style: none; }
.mgs_wrap .mgs_card_blocks li { position: relative; aspect-ratio: 1; display: grid; place-items: center; border: 1px solid var(--mgs-faint); color: var(--mgs-faint); font-family: var(--mgs-mono); font-size: 9px; letter-spacing: .08em; transition: border-color .3s, color .3s, background .3s; }
.mgs_wrap .mgs_card_blocks li.is-read { border-color: var(--mgs-amber); color: var(--mgs-amber); background: rgba(255, 154, 69, .07); }
.mgs_wrap .mgs_card_blocks li.is-now { background: var(--mgs-amber); color: var(--mgs-void); }
.mgs_wrap .mgs_card_read { min-height: 5.2em; margin: 16px 0 0; font-family: var(--mgs-sans); font-weight: 300; font-size: 21px; line-height: 1.22; letter-spacing: -.02em; }
.mgs_wrap .mgs_card_read small { display: block; margin-bottom: 6px; font-family: var(--mgs-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--mgs-amber); }

/* ---- the Stinger's lock on REX ---- */
.mgs_wrap .mgs_lock { position: absolute; z-index: 7; left: 0; top: 0; width: var(--lock-size, 140px); height: var(--lock-size, 140px); margin: calc(var(--lock-size, 140px) / -2) 0 0 calc(var(--lock-size, 140px) / -2);
  pointer-events: none; opacity: 0; transition: opacity .25s; --lock-c: var(--mgs-amber); }
.mgs_wrap .mgs_lock.is-on { opacity: 1; }
.mgs_wrap .mgs_lock.is-locked { --lock-c: var(--mgs-alarm); }
.mgs_wrap .mgs_lock i { position: absolute; width: 16px; height: 16px; border: 0 solid var(--lock-c); }
.mgs_wrap .mgs_lock i:nth-child(1) { left: 0; top: 0; border-width: 1px 0 0 1px; } .mgs_wrap .mgs_lock i:nth-child(2) { right: 0; top: 0; border-width: 1px 1px 0 0; }
.mgs_wrap .mgs_lock i:nth-child(3) { left: 0; bottom: 0; border-width: 0 0 1px 1px; } .mgs_wrap .mgs_lock i:nth-child(4) { right: 0; bottom: 0; border-width: 0 1px 1px 0; }
.mgs_wrap .mgs_lock.is-flip b { left: auto; right: calc(100% + 10px); }
.mgs_wrap .mgs_lock b { position: absolute; left: calc(100% + 10px); top: 0; white-space: nowrap; font-family: var(--mgs-mono); font-weight: 400; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--lock-c); }
.mgs_wrap .mgs_hint { position: absolute; z-index: 6; left: var(--mgs-gutter); bottom: calc(var(--mgs-gutter) + 86px); max-width: min(300px, calc(50vw - 340px)); margin: 0; color: var(--mgs-dim); opacity: 0; transition: opacity .5s; }
.mgs_wrap .mgs_hint.is-on { opacity: 1; }

/* ---- found ---- */
.mgs_wrap .mgs_alert { position: absolute; z-index: 20; left: 0; top: 0; font-family: var(--mgs-sans); font-weight: 500; font-size: 64px; line-height: 1; color: var(--mgs-alarm);
  pointer-events: none; opacity: 0; transform: translate(-50%, -120%) scale(.4); text-shadow: 0 0 18px rgba(255, 59, 34, .6); }
.mgs_wrap .mgs_alert.is-on { animation: mgs-alert 1.6s var(--mgs-heavy) both; }
@keyframes mgs-alert { 0% { opacity: 0; transform: translate(-50%, -80%) scale(.3); } 12% { opacity: 1; transform: translate(-50%, -130%) scale(1.15); } 22% { transform: translate(-50%, -120%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -120%) scale(1); } }

/* ---- boot: the Codec, full size, taking the first call ---- */
.mgs_wrap .mgs_boot { position: absolute; z-index: 50; inset: 0; display: grid; place-content: center; justify-items: center; background: #040506; }
.mgs_wrap .mgs_boot.is-gone { visibility: hidden; }
.mgs_wrap .mgs_boot.is-leaving * { transition: none !important; animation: none !important; }
.mgs_wrap .mgs_boot.is-leaving .mgs_boot_face.is-right img { opacity: 1; }
.mgs_wrap .mgs_boot.is-leaving .mgs_boot_face.is-right canvas { opacity: 0; }
.mgs_wrap .mgs_boot_noise { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .05; pointer-events: none; image-rendering: pixelated; }
.mgs_wrap .mgs_boot_codec { position: relative; display: grid; grid-template-columns: auto auto auto; align-items: center; column-gap: clamp(20px, 3.2vw, 48px); transform-origin: 50% 100%; }
.mgs_wrap .mgs_boot_face { position: relative; margin: 0; width: clamp(112px, 11vw, 168px); aspect-ratio: 96 / 134; border: 1px solid var(--mgs-green-dim); background: #07130d; overflow: hidden; }
.mgs_wrap .mgs_boot_face img, .mgs_wrap .mgs_boot_face canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.mgs_wrap .mgs_boot_face canvas { image-rendering: pixelated; opacity: .9; }
.mgs_wrap .mgs_boot_face.is-right img { opacity: 0; }
.mgs_wrap .mgs_boot.is-done .mgs_boot_face.is-right img { animation: mgs-tune .55s steps(6) both; }
.mgs_wrap .mgs_boot.is-done .mgs_boot_face.is-right canvas { animation: mgs-tune-out .55s steps(6) both; }
@keyframes mgs-tune { 0% { opacity: 0; } 30% { opacity: .9; } 45% { opacity: .2; } 70% { opacity: 1; } 80% { opacity: .5; } 100% { opacity: 1; } }
@keyframes mgs-tune-out { 0% { opacity: .9; } 100% { opacity: 0; } }
.mgs_wrap .mgs_boot_face::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(180deg, transparent 0 2px, rgba(0, 0, 0, .3) 2px 3px); pointer-events: none; }
.mgs_wrap .mgs_boot_face figcaption { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; padding: 4px; text-align: center; font-size: 9px; color: var(--mgs-green); background: rgba(7, 19, 13, .82); }
.mgs_wrap .mgs_boot_mid { display: grid; justify-items: center; gap: 8px; }
.mgs_wrap .mgs_boot_tab { padding: 3px 18px; border: 1px solid var(--mgs-green-dim); color: var(--mgs-green-dim); font-size: 9px; }
.mgs_wrap .mgs_boot_lcd { display: flex; align-items: end; gap: 10px; padding: 12px 16px; border: 1px solid var(--mgs-green-dim); background: rgba(7, 19, 13, .7); }
.mgs_wrap .mgs_boot_lcd svg { display: block; width: clamp(150px, 15vw, 230px); height: auto; }
.mgs_wrap .mgs_boot_bars { display: block; width: clamp(26px, 2.4vw, 38px); aspect-ratio: 26 / 32; background: repeating-linear-gradient(0deg, var(--mgs-green) 0 2px, transparent 2px 4px);
  clip-path: polygon(0 100%, 100% 100%, 100% calc(100% - var(--sig, 0%)), 0 calc(100% - var(--sig, 0%) * .3)); }
.mgs_wrap .mgs_boot_line { min-height: 3.2em; max-width: 34em; margin: 30px 0 0; padding: 0 var(--mgs-gutter); text-align: center; font-weight: 500; font-size: 16px; line-height: 1.55; text-wrap: balance; }
.mgs_wrap .mgs_boot_line b { margin-right: .6em; font-family: var(--mgs-mono); font-weight: 400; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--mgs-green); }
.mgs_wrap .mgs_boot_call { margin: 4px 0 0; color: var(--mgs-green); font-size: 11px; opacity: 0; }
.mgs_wrap .mgs_boot.is-done .mgs_boot_call { opacity: 1; animation: mgs-blink 1s steps(2) infinite; }
.mgs_wrap .mgs_boot_enter { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 22px; margin-top: 22px; opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity .6s .5s, transform .9s .5s var(--mgs-out); }
.mgs_wrap .mgs_boot.is-done .mgs_boot_enter { opacity: 1; pointer-events: auto; transform: none; }
.mgs_wrap .mgs_boot_btn { padding: 13px 34px; border: 1px solid var(--mgs-green); color: var(--mgs-green); font-weight: 500; font-size: 14px; letter-spacing: .04em; transition: background .3s, color .3s; }
.mgs_wrap .mgs_boot_btn:hover, .mgs_wrap .mgs_boot_btn:focus-visible { background: var(--mgs-green); color: var(--mgs-void); }
.mgs_wrap .mgs_boot_btn.is-quiet { padding: 6px 2px; border-color: transparent; color: var(--mgs-dim); font-weight: 300; font-size: 13px; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--mgs-faint); }
.mgs_wrap .mgs_boot_btn.is-quiet:hover, .mgs_wrap .mgs_boot_btn.is-quiet:focus-visible { background: none; color: var(--mgs-ink); }
/* the PlayStation asks about the memory card */
.mgs_wrap .mgs_boot_card { display: grid; grid-template-columns: auto auto; align-items: center; gap: 4px 28px; margin: 34px 0 0; padding: 14px 18px; max-width: min(560px, calc(100vw - 2 * var(--mgs-gutter)));
  border: 1px solid var(--mgs-faint); opacity: 0; transition: opacity .6s .8s; }
.mgs_wrap .mgs_boot.is-done .mgs_boot_card { opacity: 1; }
.mgs_wrap .mgs_boot_card legend { padding: 0 8px; margin-left: -8px; font-family: var(--mgs-mono); font-size: 10px; letter-spacing: .1em; color: var(--mgs-amber); }
.mgs_wrap .mgs_boot_card p { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--mgs-dim); }
.mgs_wrap .mgs_boot_card_opts { display: flex; gap: 6px; }
.mgs_wrap .mgs_boot_card label { position: relative; cursor: pointer; }
.mgs_wrap .mgs_boot_card input { position: absolute; opacity: 0; pointer-events: none; }
.mgs_wrap .mgs_boot_card span { display: block; min-width: 54px; padding: 8px 12px; text-align: center; border: 1px solid var(--mgs-faint); font-weight: 500; font-size: 13px; color: var(--mgs-dim); transition: border-color .25s, color .25s, background .25s; }
.mgs_wrap .mgs_boot_card input:checked + span { border-color: var(--mgs-amber); color: var(--mgs-void); background: var(--mgs-amber); }
.mgs_wrap .mgs_boot_card input:focus-visible + span { outline: 1px solid var(--mgs-ink); outline-offset: 3px; }
.mgs_wrap .mgs_boot_credit { position: absolute; left: 0; right: 0; bottom: calc(var(--mgs-gutter) + 6px); margin: 0; padding: 0 var(--mgs-gutter); text-align: center; color: var(--mgs-dim); font-size: 12.5px; }
.mgs_wrap .mgs_boot_credit em { font-style: normal; color: var(--mgs-ink); }

/* ---- the area intel: an MGS dossier on one site of the island ---- */
.mgs_wrap .mgs_pins li { pointer-events: none; }
.mgs_wrap .mgs_pins li.is-on { pointer-events: auto; }
.mgs_wrap .mgs_pins button { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 0; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; }
.mgs_wrap .mgs_pins button:hover, .mgs_wrap .mgs_pins button:focus-visible, .mgs_wrap .mgs_pins li.is-open button { color: var(--mgs-amber); }
.mgs_wrap .mgs_pins button::after { content: 'Intel'; padding: 2px 6px; border: 1px solid currentColor; font-size: 8px; opacity: 0; transform: translateX(-4px); transition: opacity .25s, transform .35s var(--mgs-out); }
.mgs_wrap .mgs_pins button:hover::after, .mgs_wrap .mgs_pins button:focus-visible::after { opacity: 1; transform: none; }
.mgs_wrap .mgs_intel { position: absolute; z-index: 9; right: var(--mgs-gutter); top: calc(var(--mgs-gutter) + 200px); width: min(460px, 36vw); max-height: calc(100% - var(--mgs-gutter) * 2 - 300px); display: grid; gap: 14px;
  padding: 16px; border: 1px solid var(--mgs-green-dim); background: rgba(5, 9, 8, .9); backdrop-filter: blur(6px); overflow: auto; scrollbar-width: none;
  opacity: 0; visibility: hidden; clip-path: inset(0 0 100% 0); transition: clip-path .6s var(--mgs-heavy), opacity .3s, visibility 0s .6s; }
.mgs_wrap .mgs_intel.is-on { opacity: 1; visibility: visible; clip-path: inset(0 0 0 0); transition: clip-path .7s var(--mgs-heavy), opacity .2s; }
.mgs_wrap .mgs_intel_head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; }
.mgs_wrap .mgs_intel_code { width: 52px; height: auto; padding: 5px 7px; border: 1px solid var(--mgs-green-dim); background: rgba(7, 19, 13, .7); }
.mgs_wrap .mgs_intel_code path, .mgs_wrap .mgs_intel_code rect { fill: rgba(166, 243, 201, .08); }
.mgs_wrap .mgs_intel_code .is-lit { fill: var(--mgs-green); }
.mgs_wrap .mgs_intel_name { margin: 0; font-weight: 300; font-size: 26px; line-height: 1.05; letter-spacing: -.03em; }
.mgs_wrap .mgs_intel_close { position: relative; width: 34px; height: 34px; border: 1px solid var(--mgs-faint); transition: border-color .25s; }
.mgs_wrap .mgs_intel_close:hover, .mgs_wrap .mgs_intel_close:focus-visible { border-color: var(--mgs-ink); }
.mgs_wrap .mgs_intel_close i { position: absolute; left: 9px; right: 9px; top: 50%; height: 1px; background: var(--mgs-ink); transform: rotate(45deg); }
.mgs_wrap .mgs_intel_close i + i { transform: rotate(-45deg); }
.mgs_wrap .mgs_intel_shot { position: relative; margin: 0; aspect-ratio: 16 / 10; overflow: hidden; background: #000; }
.mgs_wrap .mgs_intel_shot img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.03); transition: transform 1.6s var(--mgs-out); }
.mgs_wrap .mgs_intel_shot.is-paper { background: #e8e3d8; }
.mgs_wrap .mgs_intel_shot.is-paper img { object-fit: contain; mix-blend-mode: multiply; transform: none; }
.mgs_wrap .mgs_intel.is-on .mgs_intel_shot img { transform: none; }
.mgs_wrap .mgs_intel_shot::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(180deg, transparent 0 2px, rgba(0, 0, 0, .16) 2px 3px); }
.mgs_wrap .mgs_intel_shot figcaption { position: absolute; z-index: 1; left: 0; bottom: 0; padding: 5px 8px; font-size: 8.5px; letter-spacing: .06em; text-transform: none; color: rgba(233, 227, 216, .82); background: rgba(0, 0, 0, .55); }
.mgs_wrap .mgs_intel_body { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: start; }
.mgs_wrap .mgs_intel_fact { margin: 0; font-size: 15px; line-height: 1.5; color: var(--mgs-ink); }
.mgs_wrap .mgs_intel_who { position: relative; margin: 0; width: 76px; aspect-ratio: 496 / 720; background: #e8e3d8; overflow: hidden; }
.mgs_wrap .mgs_intel_who[hidden] { display: none; }
.mgs_wrap .mgs_intel_who img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.mgs_wrap .mgs_intel_who figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 3px; font-size: 7.5px; text-align: center; color: #e8e3d8; background: rgba(5, 9, 8, .85); }
.mgs_wrap .mgs_intel_call { display: grid; gap: 6px; padding-top: 12px; border-top: 1px solid var(--mgs-faint); }
.mgs_wrap .mgs_intel_call p { margin: 0; font-weight: 500; font-size: 14px; line-height: 1.5; }
.mgs_wrap .mgs_intel_call b { margin-right: .6em; font-family: var(--mgs-mono); font-weight: 400; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--mgs-green); }
.mgs_wrap .mgs_intel_nav { display: flex; justify-content: space-between; align-items: center; color: var(--mgs-dim); }
.mgs_wrap .mgs_intel_nav button { padding: 6px 0; color: var(--mgs-dim); transition: color .25s; }
.mgs_wrap .mgs_intel_nav button:hover, .mgs_wrap .mgs_intel_nav button:focus-visible { color: var(--mgs-ink); }

.mgs_wrap .mgs_cursor { position: absolute; z-index: 60; left: 0; top: 0; width: 22px; height: 22px; margin: -11px 0 0 -11px; pointer-events: none; opacity: 0; transition: opacity .4s, width .3s, height .3s, margin .3s, border-color .3s;
  border-radius: 50%; border: 1px solid transparent;
  background: linear-gradient(var(--mgs-ink), var(--mgs-ink)) 50% 0 / 1px 6px no-repeat, linear-gradient(var(--mgs-ink), var(--mgs-ink)) 50% 100% / 1px 6px no-repeat,
    linear-gradient(var(--mgs-ink), var(--mgs-ink)) 0 50% / 6px 1px no-repeat, linear-gradient(var(--mgs-ink), var(--mgs-ink)) 100% 50% / 6px 1px no-repeat; }
.mgs_wrap.is-in .mgs_cursor { opacity: .85; }
.mgs_wrap[data-beat="rex"] .mgs_cursor { width: 44px; height: 44px; margin: -22px 0 0 -22px; border-color: var(--mgs-amber); }
@media (hover: none) { .mgs_wrap .mgs_cursor { display: none; } }
@media (hover: hover) { .mgs_wrap.is-in, .mgs_wrap.is-in button, .mgs_wrap.is-in a { cursor: none; } }

/* tablet */
@media (max-width: 1100px) {
  .mgs_wrap .mgs_card { width: min(320px, 40vw); }
  .mgs_wrap .mgs_area { max-width: 58vw; }
}
/* phone: designed for itself; the chrome tightens, the Codec takes the bottom, the model the middle */
@media (max-width: 767px) {
  .mgs_wrap .mgs_life { width: 46vw; }
  .mgs_wrap .mgs_radar { width: 112px; }
  .mgs_wrap .mgs_radar_map { grid-auto-rows: 18px; gap: 3px; padding: 4px; }
  .mgs_wrap .mgs_radar_map a .mgs_mono { display: none; }
  .mgs_wrap .mgs_radar_now { font-size: 9px; }
  .mgs_wrap .mgs_area { top: calc(var(--mgs-gutter) + 74px); max-width: calc(100vw - 2 * var(--mgs-gutter) - 120px); }
  .mgs_wrap .mgs_title { font-size: 19px; letter-spacing: .3em; }
  .mgs_wrap .mgs_where { font-size: 9.5px; margin-top: 10px; }
  .mgs_wrap .mgs_quote { font-size: min(10vw, 6vh); }
  .mgs_wrap .mgs_equip { bottom: calc(var(--mgs-gutter) - 4px); min-width: 0; padding: 7px 10px; }
  .mgs_wrap .mgs_equip_name { font-size: 11px; }
  .mgs_wrap .mgs_codec { width: calc(100vw - 2 * var(--mgs-gutter)); bottom: calc(var(--mgs-gutter) + 64px); grid-template-columns: 56px auto 56px; column-gap: 10px; }
  .mgs_wrap .mgs_codec_face { width: 56px; height: 78px; }
  .mgs_wrap .mgs_codec_freq { width: 92px; }
  .mgs_wrap .mgs_codec_line { font-size: 13px; min-height: 4.6em; }
  .mgs_wrap .mgs_card { left: var(--mgs-gutter); right: var(--mgs-gutter); top: auto; bottom: calc(var(--mgs-gutter) + 74px); width: auto; }
  .mgs_wrap .mgs_card_read { font-size: 18px; min-height: 4.6em; }
  /* the sites sit too close for names on a phone: each is its number, a box big enough for a thumb */
  .mgs_wrap .mgs_pins li::before { width: 8px; }
  .mgs_wrap .mgs_pins button { gap: 0; padding: 0; }
  .mgs_wrap .mgs_pins button span, .mgs_wrap .mgs_pins button::after { display: none; }
  .mgs_wrap .mgs_pins b { display: grid; place-items: center; min-width: 28px; height: 28px; border: 1px solid rgba(255, 154, 69, .45); background: rgba(4, 5, 6, .35); }
  /* the card's blocks as one strip, so Mantis keeps the middle of the screen */
  .mgs_wrap .mgs_card_blocks { grid-template-columns: repeat(auto-fit, minmax(17px, 1fr)); gap: 2px; }
  .mgs_wrap .mgs_card_blocks li { font-size: 7.5px; letter-spacing: 0; }
  .mgs_wrap .mgs_hint { left: 50%; bottom: calc(var(--mgs-gutter) + 236px); max-width: calc(100vw - 2 * var(--mgs-gutter)); transform: translateX(-50%); width: max-content; padding: 6px 10px; text-align: center; color: var(--mgs-ink); background: rgba(6, 8, 10, .78); border: 1px solid rgba(234, 223, 207, .14); }
  .mgs_wrap .mgs_lock b { display: none; }
  .mgs_wrap[data-beat="mantis"] .mgs_hint { display: none; }
  /* in the fight the goals list carries the instruction on a phone; the hint would sit on REX */
  .mgs_wrap[data-beat="battle"] .mgs_hint { display: none; }
  .mgs_wrap .mgs_gpu { bottom: calc(var(--mgs-gutter) + 54px); }
  .mgs_wrap .mgs_intel { left: var(--mgs-gutter); right: var(--mgs-gutter); top: auto; bottom: calc(var(--mgs-gutter) + 64px); width: auto; max-height: 64vh; padding: 12px; gap: 10px; }
  .mgs_wrap .mgs_intel_name { font-size: 21px; }
  .mgs_wrap .mgs_intel_fact { font-size: 13.5px; }
  .mgs_wrap .mgs_intel_who { width: 58px; }
  .mgs_wrap .mgs_boot_codec { column-gap: 14px; }
  .mgs_wrap .mgs_boot_face { width: 84px; }
  .mgs_wrap .mgs_boot_lcd { padding: 8px 10px; gap: 6px; }
  .mgs_wrap .mgs_boot_lcd svg { width: 104px; }
  .mgs_wrap .mgs_boot_line { font-size: 14px; margin-top: 22px; }
  .mgs_wrap .mgs_boot_card { grid-template-columns: 1fr; justify-items: start; margin-top: 26px; }
  .mgs_wrap .mgs_boot_credit { font-size: 11.5px; }
  .mgs_wrap .mgs_alert { font-size: 52px; }
}

/* keyboard: a visible focus on every control */
.mgs_wrap button:focus-visible, .mgs_wrap a:focus-visible, .mgs_wrap input:focus-visible { outline: 1px solid var(--mgs-amber); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .mgs_wrap .mgs_boot.is-done .mgs_boot_call { animation: none; opacity: 1; }
  .mgs_wrap .mgs_intel, .mgs_wrap .mgs_intel.is-on { transition: opacity .2s, visibility 0s; clip-path: none; }
}

/* the editor's canvas (stage.js canvasPosters): each chapter as a still of the live page, in px; the stills of the
   block are one strip (desktop 16:10, phone 390:844), each figure showing its own slice */
.mgs_wrap.is-canvas { height: auto; overflow: visible; background: #06080a; }
.mgs_wrap.is-canvas .mgs_contain { position: relative; top: auto; height: auto; overflow: visible; opacity: 1; transform: none; background: none; }
.mgs_wrap.is-canvas .mgs_contain > :not(.mgs_poster) { display: none !important; }
.mgs_wrap .mgs_poster { position: relative; margin: 0; aspect-ratio: 16 / 10; background: var(--still) 0 var(--at) / 100% auto no-repeat; border-bottom: 1px solid rgba(233, 227, 216, .14); }
.mgs_wrap .mgs_poster figcaption { position: absolute; left: 12px; top: 12px; padding: 5px 9px; font: 500 11px/1.3 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .06em; text-transform: uppercase; color: #e9e3d8; background: rgba(6, 8, 10, .72); }
@media (max-width: 767px) { .mgs_wrap .mgs_poster { aspect-ratio: 390 / 844; background-image: var(--still-phone); } }