/* Orbit Royale's in-game UI layer: the prototype's 1672×941 stage drawn over
   the game canvas. Loaded after the prototype stylesheets; only layout of the
   layer itself and game-specific additions live here. */
html, body { height: 100%; overflow: hidden; }
body { background: #0b101b; touch-action: none; }
#canvas { display: block; position: fixed; inset: 0; outline: none; }

#orbit-ui { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
#orbit-ui .stage-viewport { position: absolute; inset: 0; overflow: hidden; }
#orbit-ui .stage { position: absolute; left: 50%; top: 50%; width: 1672px; height: 941px; transform: translate(-50%, -50%) scale(var(--stage-scale, 1)); transform-origin: center center; overflow: hidden; }
/* Menus: a navy page (letterboxed in navy too) that takes the mouse. */
#orbit-ui.menu-open #stage-viewport { background: #0b101b; pointer-events: auto; }
#orbit-ui.menu-open #stage-viewport.see-through { background: transparent; }
#orbit-ui:not(.menu-open) #stage-viewport { display: none; }
#app { background: #0b101b; }
#app.see-through { background: transparent; }
#app.see-through > .mr-screen, #app.see-through > section { background: transparent; }
/* The HUD: transparent, never takes the mouse. */
#hud-stage { background: transparent; pointer-events: none; }
#orbit-ui:not(.hud-on) #hud-viewport { display: none; }

/* Real game imagery behind a screen: full-bleed, under a navy fade so the
   prototype's layout reads exactly as designed on the left. */
#ui-backdrop { position: absolute; inset: 0; background: #0b101b center / cover no-repeat; opacity: 0; transition: opacity .5s ease; pointer-events: none; }
#ui-backdrop.on { opacity: 1; }
#ui-backdrop::after { content: ""; position: absolute; inset: 0; background: var(--backdrop-shade, linear-gradient(90deg, #0b101b 0%, #0b101b 46%, rgba(11,16,27,.72) 62%, rgba(11,16,27,.35) 82%, rgba(11,16,27,.55) 100%)); }
#orbit-ui.menu-open.has-backdrop #stage-viewport { background: transparent; }

/* Dialogs and dropdowns take the mouse while open. */
#orbit-ui dialog, #orbit-ui .dropdown, #orbit-ui #toast { pointer-events: auto; }
#orbit-ui #toast { pointer-events: none; }

/* No text selection or drag ghosts in the game's interface. */
#orbit-ui { user-select: none; -webkit-user-select: none; }
#orbit-ui textarea, #orbit-ui input { user-select: text; -webkit-user-select: text; }
#orbit-ui img { -webkit-user-drag: none; }

#ui-backdrop.live { background: transparent; }

/* Real game imagery in the prototype's art slots. */
.mr-photo img { display: block; }
.mr-loading .mr-ship-real { position: absolute; left: 742px; top: 221px; width: 875px; height: 550px; clip-path: polygon(14px 0, 861px 0, 875px 14px, 875px 536px, 861px 550px, 14px 550px, 0 536px, 0 14px); }
.mr-ship-real img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mr-victory .mr-victory-art { width: 682px; height: 761px; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%); }
.mr-victory-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 80%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 80%, transparent 100%); }
.mr-eliminated .mr-elim-map { width: 739px; height: 603px; }
.mr-elim-map .map-art { width: 100%; height: 100%; display: block; }
.mr-guide .mr-guide-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11,16,27,.92) 0%, rgba(11,16,27,.75) 30%, rgba(11,16,27,.15) 60%, rgba(11,16,27,0) 100%); }
.mr-attachment .mr-photo, .mr-attachment .mr-shot { width: 100%; height: 100%; object-fit: cover; }
.mr-lobby-map .mr-photo { flex: none; }
.map-poi { font: 700 13px Oxanium, sans-serif; fill: #f3f5fa; paint-order: stroke; stroke: #0b101b; stroke-width: 3px; letter-spacing: .06em; }
.mr-load-error { position: absolute; left: 64px; top: 760px; color: #ff8d7f; font: 16px Plex; max-width: 900px; }

.mr-lobby-photo img { filter: saturate(.75) brightness(.92); }

/* Rules over real art: no navy box behind the "//" (a gap in the line
   instead) and a touch more contrast. */
#orbit-ui.has-backdrop .mr-top-rule, #orbit-ui.has-backdrop .mr-bottom-rule { border-top: 0; height: 1px; background: linear-gradient(90deg, #7a8aa3 0, #7a8aa3 186px, transparent 186px, transparent 228px, #7a8aa3 228px); filter: drop-shadow(0 1px 0 rgba(0,0,0,.55)); }
#orbit-ui.has-backdrop .mr-top-rule::before, #orbit-ui.has-backdrop .mr-bottom-rule::before { background: transparent; }
/* The lobby's map: a cool holo-map grade, a fine grid and corner marks. */
.mr-holo { position: relative; }
.mr-holo img { filter: grayscale(.82) brightness(.78) contrast(1.15) sepia(.25) hue-rotate(178deg) saturate(1.6); }
.mr-holo::before { content: ""; position: absolute; inset: 0; z-index: 1; background-image: linear-gradient(rgba(143,163,192,.10) 1px, transparent 1px), linear-gradient(90deg, rgba(143,163,192,.10) 1px, transparent 1px); background-size: 24px 24px; }
.mr-holo::after { content: ""; position: absolute; inset: 0; z-index: 2; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 407 197'%3E%3Cpath d='M5 15V5H15' fill='none' stroke='%23b4bfd0' stroke-width='1.5'/%3E%3Cpath d='M372 192l10-10M384 192l10-10' stroke='%23b4bfd0' stroke-width='1.5'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
/* Match loading: a navy plate behind the frame, the screenshot graded toward
   the blueprint look, and the frame's inner line drawn over it. */
.mr-loading .mr-ship-plate { position: absolute; left: 727px; top: 206px; width: 905px; height: 580px; background: #0e1724; clip-path: polygon(26px 0, 879px 0, 905px 26px, 905px 554px, 879px 580px, 26px 580px, 0 554px, 0 26px); }
.mr-ship-real img { filter: brightness(.82) saturate(.62) contrast(1.08); }
.mr-loading .mr-ship-real::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 90px 30px rgba(11,16,27,.85); pointer-events: none; }

/* The leave confirmation sits over the game and HUD, not the menu. */
#orbit-ui.dialog-over-game #stage-viewport, #orbit-ui.dialog-over-game #app { background: transparent; }
#orbit-ui.dialog-over-game #app > * { visibility: hidden; }
#orbit-ui.dialog-over-game #ui-backdrop { opacity: 0; }
.mr-guide .mr-guide-photo ~ .mr-guide-copy { background: transparent; }
.mr-guide-copy h1, .mr-guide-copy p { text-shadow: 0 2px 8px rgba(0,0,0,.6); }
.orbit-inventory .re-item-copy strong { white-space: nowrap; }

/* ---------------------------------------------------------------- art QA 2 */
/* Rule ends over real art. */
#orbit-ui.has-backdrop .mr-top-rule::after, #orbit-ui.has-backdrop .mr-bottom-rule::after { color: #a9b6cc; text-shadow: 0 1px 2px #000; }
/* A navy grade for real imagery in the prototype's art slots. */
.mr-holo img { filter: grayscale(1) sepia(.5) hue-rotate(172deg) saturate(1.8) brightness(.62) contrast(1.2); object-fit: contain !important; background: #0b1626; }
.mr-holo::after { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 407 197'%3E%3Cpath d='M4 13V1H16' fill='none' stroke='%23b4bfd0' stroke-width='1.5'/%3E%3Cpath d='M378 194H404V168' fill='none' stroke='%23b4bfd0' stroke-width='1.5'/%3E%3Cpath d='M366 194l9-9' stroke='%23b4bfd0' stroke-width='1.5'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
.mr-marked { position: relative; }
.mr-marked::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 479 233' preserveAspectRatio='none'%3E%3Cpath d='M3 15V3H15M464 3H476V15M476 218V230H464M15 230H3V218' fill='none' stroke='%23b4bfd0' stroke-width='1.5'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
.mr-attachment .mr-photo img, .mr-attachment .mr-shot { filter: grayscale(1) sepia(.5) hue-rotate(172deg) saturate(1.6) brightness(.66) contrast(1.15); object-fit: contain !important; background: #0b1626; }
/* The lesson photo: dimmed toward navy under a scrim, the text on the left. */
.mr-guide .mr-guide-photo img { filter: saturate(.6) brightness(.5) contrast(1.1); }
.mr-guide .mr-guide-photo::after { background: linear-gradient(90deg, rgba(11,16,27,.96) 0%, rgba(11,16,27,.86) 34%, rgba(11,16,27,.35) 62%, rgba(11,16,27,.15) 100%), linear-gradient(180deg, rgba(11,16,27,.35), rgba(11,16,27,0) 30%, rgba(11,16,27,0) 75%, rgba(11,16,27,.5)); }
/* Map board: clipped, the photo graded. */
.map-art { overflow: hidden; }
.map-poi { font: 700 13px Oxanium, sans-serif; fill: #f3f5fa; stroke: none; letter-spacing: .06em; }
/* Match loading: the whole ship inset in the frame with a feathered edge. */
.mr-loading .mr-ship-real { left: 754px; top: 233px; width: 851px; height: 526px; clip-path: none; -webkit-mask-image: radial-gradient(ellipse 72% 70% at 50% 50%, #000 62%, transparent 100%); mask-image: radial-gradient(ellipse 72% 70% at 50% 50%, #000 62%, transparent 100%); }
.mr-loading .mr-ship-real::after { display: none; }
.mr-ship-real img { filter: saturate(.55) brightness(.72) contrast(1.1) sepia(.2) hue-rotate(180deg); }
/* Asset loading: the panels stay opaque over the art. */
.mr-assets .mr-load-status, .mr-assets .mr-download-rows > .mr-panel, .mr-assets .mr-tip { background: rgba(11, 16, 27, .94); }
/* Victory: no navy patch over the figure; the figure graded; the marks. */
.mr-victory .mr-result-art:after { display: none; }
.mr-victory-art img { filter: saturate(.55) brightness(.78) contrast(1.08); }
.mr-victory-deco { position: absolute; inset: 0; width: 1672px; height: 941px; pointer-events: none; z-index: 1; }
/* Elimination map: graded navy, with the prototype frame's cut corner and ticks. */
.mr-eliminated .mr-elim-map { clip-path: polygon(16px 0, 100% 0, 100% 100%, 26px 100%, 0 calc(100% - 26px), 0 16px); }
.mr-eliminated .mr-elim-map::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 739 603' preserveAspectRatio='none'%3E%3Cpath d='M16 1H738V602H26L1 577V16Z' fill='none' stroke='%237889a1' stroke-width='1.4'/%3E%3Cpath d='M1 22L16 1M7 40V150M4 60h4m-4 10h4m-4 10h4m-4 10h4M736 300v40' fill='none' stroke='%23b4bfd0' stroke-width='1.4'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
#orbit-ui.dialog-over-game #modal::backdrop { background: rgba(5, 8, 14, .82); }
.mr-guide .mr-guide-photo img { filter: saturate(.7) brightness(.64) contrast(1.08); }
.mr-guide .mr-guide-photo::after { background: linear-gradient(90deg, rgba(11,16,27,.95) 0%, rgba(11,16,27,.82) 33%, rgba(11,16,27,.18) 60%, rgba(11,16,27,.05) 100%), linear-gradient(180deg, rgba(11,16,27,.3), rgba(11,16,27,0) 28%, rgba(11,16,27,0) 78%, rgba(11,16,27,.45)); }
.mr-ship-real img { filter: saturate(.5) brightness(.78) contrast(1.08); }

/* QA round 3 (menus). */
/* Lobby and report: the blueprint island on navy with the grid. */
.mr-holo img { filter: none; object-fit: contain !important; background: #101e32; transform: scale(1.18); }
.mr-holo { background: #101e32; overflow: hidden; }
.mr-attachment .mr-photo { position: relative; background: #101e32; overflow: hidden; }
.mr-attachment .mr-photo img { filter: none; object-fit: contain !important; background: transparent; transform: scale(1.12); }
.mr-attachment .mr-photo::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background-image: linear-gradient(rgba(143,163,192,.10) 1px, transparent 1px), linear-gradient(90deg, rgba(143,163,192,.10) 1px, transparent 1px); background-size: 24px 24px; }
.mr-marked::after { z-index: 2; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 479 233' preserveAspectRatio='none'%3E%3Cpath d='M3 19V3H19M460 3H476V19M476 214V230H460M19 230H3V214' fill='none' stroke='%23b4bfd0' stroke-width='2.4'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
/* Learn: the right half of the lesson photo under a deeper scrim. */
.mr-guide .mr-guide-photo img { filter: saturate(.6) brightness(.56) contrast(1.08); }
.mr-guide .mr-guide-photo::after { background: linear-gradient(90deg, rgba(11,16,27,.95) 0%, rgba(11,16,27,.84) 33%, rgba(11,16,27,.5) 58%, rgba(11,16,27,.58) 100%), linear-gradient(180deg, rgba(11,16,27,.3), rgba(11,16,27,0) 28%, rgba(11,16,27,0) 78%, rgba(11,16,27,.45)); }
/* Map: the new photo is graded already; smaller location names. */
.map-art .map-photo { filter: none; }
.map-poi { font-size: 11.5px; }
/* Match loading: the traced dropship in the prototype's art slot. */
.mr-loading .mr-ship-real { left: 768px; top: 289px; width: 837px; height: 427px; -webkit-mask-image: none; mask-image: none; }
.mr-ship-real img { filter: none; object-fit: contain; }
/* Victory: the traced soldier, no box, no second bottom rule. */
.mr-victory .mr-victory-art { -webkit-mask-image: none; mask-image: none; }
.mr-victory-art img { filter: none; object-fit: contain; -webkit-mask-image: linear-gradient(180deg, #000 0, #000 88%, transparent 100%); mask-image: linear-gradient(180deg, #000 0, #000 88%, transparent 100%); }
.mr-victory .mr-bottom-rule { display: none; }
/* Elimination: the blueprint map fills its panel; the prototype's edge marks. */
.mr-eliminated .mr-elim-map .map-photo { filter: none; }
.mr-eliminated .mr-elim-map { clip-path: polygon(14px 0, 100% 0, 100% 100%, 0 100%, 0 14px); background: #101e32; }
.mr-eliminated .mr-elim-map::after { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 739 603'%3E%3Cpath d='M2 22L20 3H34' fill='none' stroke='%23c3cddc' stroke-width='3.2'/%3E%3Cpath d='M3 30V150' stroke='%23748399' stroke-width='1.2'/%3E%3Cpath d='M10 16V64' stroke='%23b4bfd0' stroke-width='3'/%3E%3Cpath d='M2 124l8-7M2 132l8-7M2 140l8-7M2 148l8-7' stroke='%23b4bfd0' stroke-width='1.6'/%3E%3Cpath d='M736 486v7M736 497v7M736 508v7' stroke='%23b4bfd0' stroke-width='1.6'/%3E%3Cpath d='M739 589V603H725Z' fill='%23b4bfd0'/%3E%3Cpath d='M2 592V601H11' fill='none' stroke='%23748399' stroke-width='1.4'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }

/* QA round 4 (menus). */
/* Learn: a crisper photo; the text side dark, the bright wall on the right toned down. */
.mr-guide .mr-guide-photo img { filter: saturate(.75) brightness(.72) contrast(1.2); }
.mr-guide .mr-guide-photo::after { background: linear-gradient(90deg, rgba(11,16,27,.96) 0%, rgba(11,16,27,.88) 30%, rgba(11,16,27,.7) 44%, rgba(11,16,27,.2) 62%, rgba(11,16,27,.15) 80%, rgba(11,16,27,.55) 100%), linear-gradient(180deg, rgba(11,16,27,.3), rgba(11,16,27,0) 28%, rgba(11,16,27,0) 78%, rgba(11,16,27,.45)); }
.mr-guide-cable { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
/* Victory: the figure fades in from the left edge of its box. */
.mr-victory .mr-victory-art { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%); mask-image: linear-gradient(90deg, transparent 0, #000 9%); }

/* QA round 5 (menus). */
/* Rule ornaments over art: the prototype's colour and baseline. */
#orbit-ui.has-backdrop .mr-top-rule::after, #orbit-ui.has-backdrop .mr-bottom-rule::after { color: #718096; text-shadow: none; transform: translateY(1px); }
/* Leave dialog: the HUD stays readable under the dim. */
#orbit-ui.dialog-over-game #modal::backdrop { background: rgba(5, 8, 14, .7); }
/* Lobby: the island fills the thumbnail on the prototype's slate. */
.mr-holo, .mr-holo img { background: #1d2738 !important; }
.mr-holo img { transform: scale(1.6); }
/* Report: the map reference. */
.mr-attachment { position: relative; overflow: hidden; background: #101927; }
.mr-att-map { position: absolute; inset: 0; background-image: linear-gradient(rgba(51,60,75,.75) 1px, transparent 1px), linear-gradient(90deg, rgba(51,60,75,.75) 1px, transparent 1px); background-size: 46px 46px; background-position: 17px 8px; }
.mr-att-map img { position: absolute; left: 50%; top: 50%; width: 240px; height: 240px; transform: translate(-50%, -50%); opacity: .45; }
.mr-att-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Learn: the photo clipped to the frame's chamfers; the right edge darker. */
.mr-guide .mr-guide-photo { clip-path: polygon(0 0, calc(100% - 31px) 0, 100% 31px, 100% 100%, 0 100%); }
.mr-guide .mr-guide-photo::after { background: linear-gradient(90deg, rgba(11,16,27,.96) 0%, rgba(11,16,27,.88) 30%, rgba(11,16,27,.6) 42%, rgba(11,16,27,.12) 58%, rgba(11,16,27,.18) 76%, rgba(11,16,27,.7) 100%), linear-gradient(180deg, rgba(11,16,27,.3), rgba(11,16,27,0) 28%, rgba(11,16,27,0) 78%, rgba(11,16,27,.45)); }
/* Victory: a wider art box (from x 904) so the whole figure fits; no side fade. */
.mr-victory .mr-victory-art { width: 732px; -webkit-mask-image: none; mask-image: none; }
/* Elimination: the prototype's frame ornaments. */
.mr-eliminated .mr-elim-map { background: #0b1422; }
.mr-eliminated .mr-elim-map::after { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 739 603'%3E%3Cpath d='M0 18L18 0H27L8 19V80H0Z' fill='%23c3cddc'/%3E%3Cpath d='M15 26V62' stroke='%238a97ab' stroke-width='1.2'/%3E%3Cpath d='M2 124l8-7M2 132l8-7M2 140l8-7M2 148l8-7' stroke='%23b4bfd0' stroke-width='1.6'/%3E%3Cpath d='M735 487v6M735 497v6M735 507v6' stroke='%23748399' stroke-width='1.2'/%3E%3Cpath d='M739 583V603H719Z' fill='%23b4bfd0'/%3E%3Cpath d='M0 574L29 603M0 588L15 603' stroke='%238a97ab' stroke-width='1.4'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }

/* QA round 6 (menus). */
/* Learn: the photo graded down toward navy, its own inset rule, a dark top edge. */
.mr-guide .mr-guide-photo img { filter: saturate(.6) brightness(.52) contrast(1.15); }
.mr-guide .mr-guide-photo::before { content: ""; position: absolute; inset: 13px; border: 1px solid rgba(150, 170, 200, .55); z-index: 2; pointer-events: none; clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%); }
.mr-guide .mr-guide-photo::after { background: linear-gradient(180deg, rgba(11,16,27,.85) 0, rgba(11,16,27,0) 22px), linear-gradient(90deg, rgba(11,16,27,.96) 0%, rgba(11,16,27,.88) 30%, rgba(11,16,27,.6) 42%, rgba(11,16,27,.15) 58%, rgba(11,16,27,.3) 76%, rgba(11,16,27,.72) 100%), linear-gradient(180deg, rgba(11,16,27,.3), rgba(11,16,27,0) 28%, rgba(11,16,27,0) 78%, rgba(11,16,27,.45)); }
/* Elimination: lighter frame marks as in the prototype; faint range rings fill the board. */
.mr-eliminated .mr-elim-map::after { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 739 603'%3E%3Cpath d='M1 7V79' stroke='%235E6B81' stroke-width='3'/%3E%3Cpath d='M1.5 7L8 0.5H20' fill='none' stroke='%235E6B81' stroke-width='2'/%3E%3Cpath d='M9 20V64' stroke='%23344051' stroke-width='2'/%3E%3Cpath d='M2 124l8-7M2 132l8-7M2 140l8-7M2 148l8-7' stroke='%23b4bfd0' stroke-width='1.6'/%3E%3Cpath d='M735 487v6M735 497v6M735 507v6' stroke='%23748399' stroke-width='1.2'/%3E%3Cpath d='M739 597V603H733Z' fill='%235E6B81'/%3E%3Cpath d='M1 560V592L11 602H21' fill='none' stroke='%238a97ab' stroke-width='1.4'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
.mr-eliminated .mr-elim-map { background: radial-gradient(circle at 50% 50%, transparent 0 118px, rgba(96,113,138,.16) 119px 120px, transparent 121px 198px, rgba(96,113,138,.12) 199px 200px, transparent 201px 278px, rgba(96,113,138,.09) 279px 280px, transparent 281px), #0b1422; }
.mr-eliminated .mr-elim-map .map-art > rect:first-of-type { fill: transparent; }

/* Learn, grapple: a line drawing of a staged real scene, so no photo grade;
   only the text side darkened. */
.mr-guide .mr-guide-lineart img { filter: none; }
.mr-guide .mr-guide-lineart::after { background: linear-gradient(90deg, rgba(11,16,27,.75) 0%, rgba(11,16,27,.45) 30%, rgba(11,16,27,0) 48%); }

/* QA round 7 (menus). */
/* Victory: the legs fade out above the rule. */
.mr-victory-art img { -webkit-mask-image: linear-gradient(180deg, #000 0, #000 680px, transparent 722px); mask-image: linear-gradient(180deg, #000 0, #000 680px, transparent 722px); }
/* Elimination: the prototype's top-left and bottom-left corner marks. */
.mr-eliminated .mr-elim-map::after { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 739 603'%3E%3Cpath d='M1.5 79V14L14 1.5H16' fill='none' stroke='%235E6B81' stroke-width='3'/%3E%3Cpath d='M9 64V21L19 11' fill='none' stroke='%23344051' stroke-width='2'/%3E%3Cpath d='M2 124l8-7M2 132l8-7M2 140l8-7M2 148l8-7' stroke='%23b4bfd0' stroke-width='1.6'/%3E%3Cpath d='M735 487v6M735 497v6M735 507v6' stroke='%23748399' stroke-width='1.2'/%3E%3Cpath d='M739 597V603H733Z' fill='%235E6B81'/%3E%3Cpath d='M1.5 572V585L18 602H35M9 574V582L22 595' fill='none' stroke='%238a97ab' stroke-width='1.4'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
/* Lobby: the island with a margin, a little darker; the prototype's corner diagonals. */
.mr-holo img { transform: scale(1.36); filter: brightness(.8); }
.mr-holo::after { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 407 197'%3E%3Cpath d='M4 13V1H16' fill='none' stroke='%23b4bfd0' stroke-width='1.5'/%3E%3Cpath d='M370 196L402 166M383 196L404 176' stroke='%23b4bfd0' stroke-width='1.5'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
/* Match loading: the frame on page navy; the art area a touch lighter. */
.mr-loading .mr-ship-plate { background: #0b101b !important; }
.mr-loading .mr-ship-real { background: rgb(11, 20, 33); }
/* Map: the prototype's grid "+" marks. */
.mr-map-plus { position: absolute; inset: 0; width: 1672px; height: 941px; pointer-events: none; z-index: 2; stroke: #8a97ab; stroke-width: 1.2; }
/* Report: a quieter grid in the attachment. */
.mr-att-map { background-image: linear-gradient(rgba(51,60,75,.4) 1px, transparent 1px), linear-gradient(90deg, rgba(51,60,75,.4) 1px, transparent 1px); }
/* Learn: the inner hairline where the prototype has it (top, right, bottom; chamfered). */
.mr-guide .mr-guide-photo::before { inset: 15px 25px 7px 13px; border-left: 0; clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%); }

/* QA round 8 (menus). */
.mr-att-map img { width: 220px; height: 220px; opacity: .5; }
.mr-eliminated .mr-elim-map::after { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 739 603'%3E%3Cpath d='M1.5 79V14L14 1.5H16' fill='none' stroke='%235E6B81' stroke-width='3'/%3E%3Cpath d='M9 64V21L19 11' fill='none' stroke='%23344051' stroke-width='2'/%3E%3Cpath d='M2 116l8-7M2 125l8-7M2 134l8-7M2 143l8-7M2 152l8-7' stroke='%23b4bfd0' stroke-width='1.6'/%3E%3Cpath d='M735 487v6M735 497v6M735 507v6' stroke='%23748399' stroke-width='1.2'/%3E%3Cpath d='M739 597V603H733Z' fill='%235E6B81'/%3E%3Cpath d='M-1.5 567V580L15 597H32' fill='none' stroke='%238a97ab' stroke-width='1.4'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
.mr-holo img { transform: scale(1.85); }
.mr-holo::after { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 407 197'%3E%3Cpath d='M2 11V-1H14' fill='none' stroke='%236f7d92' stroke-width='1.5'/%3E%3Cpath d='M370 196L402 166M383 196L404 176' stroke='%236f7d92' stroke-width='1.5'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }

/* QA round 9 (menus). */
.mr-victory-art img { -webkit-mask-image: linear-gradient(180deg, #000 0, #000 746px, transparent 761px); mask-image: linear-gradient(180deg, #000 0, #000 746px, transparent 761px); }
.mr-eliminated .mr-elim-map::after { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 739 603'%3E%3Cpath d='M1.5 79V14L14 1.5H16' fill='none' stroke='%235E6B81' stroke-width='3'/%3E%3Cpath d='M9 64V21L19 11' fill='none' stroke='%23344051' stroke-width='2'/%3E%3Cpath d='M2 116l7-7M2 125l7-7M2 134l7-7M2 143l7-7M2 152l7-7' stroke='%23b4bfd0' stroke-opacity='.4' stroke-width='1.6'/%3E%3Cpath d='M735 487v6M735 497v6M735 507v6' stroke='%23748399' stroke-width='1.2'/%3E%3Cpath d='M739 597V603H733Z' fill='%235E6B81'/%3E%3Cpath d='M-1.5 567V580L15 597H32' fill='none' stroke='%238a97ab' stroke-width='1.4'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
.mr-att-map img { -webkit-mask-image: radial-gradient(ellipse 106px 72px at 50% 47%, #000 90%, transparent 100%); mask-image: radial-gradient(ellipse 106px 72px at 50% 47%, #000 90%, transparent 100%); }
.mr-holo img { transform: scale(1.1); filter: brightness(1.2); }
.mr-holo::after { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 407 197'%3E%3Cpath d='M3 17V3H15' fill='none' stroke='%236f7d92' stroke-width='1.5'/%3E%3Cpath d='M370 196L402 166M383 196L404 176' stroke='%236f7d92' stroke-width='1.5'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }

/* Learn, grapple: a clean navy zone behind the title and description. */
.mr-guide .mr-guide-lineart::after { background: linear-gradient(90deg, rgba(8,15,27,.94) 0, rgba(8,15,27,.94) 44%, rgba(8,15,27,0) 54%) 0 0 / 100% 40% no-repeat, linear-gradient(180deg, rgba(8,15,27,.94), rgba(8,15,27,0)) 0 40% / 50% 9% no-repeat; }

/* QA round 10 (menus). */
.mr-victory-art img { -webkit-mask-image: linear-gradient(180deg, #000 0, #000 700px, transparent 761px); mask-image: linear-gradient(180deg, #000 0, #000 700px, transparent 761px); }
.mr-eliminated .mr-elim-map { background: radial-gradient(circle at 50% 50%, transparent 0 118px, rgba(96,113,138,.16) 119px 120px, transparent 121px 198px, rgba(96,113,138,.12) 199px 200px, transparent 201px 278px, rgba(96,113,138,.09) 279px 280px, transparent 281px), #162132; }
.mr-eliminated .mr-elim-map .map-photo { filter: brightness(1.18); }

/* QA round 11 (menus). */
.mr-eliminated .mr-elim-map { background: #0b1422; }
.mr-eliminated .mr-elim-map .map-photo { filter: brightness(1.12); }
.mr-holo img { transform: scale(1.9); }
.mr-holo::before { background-image: radial-gradient(ellipse at 50% 50%, transparent 45%, rgba(16,25,37,.85) 100%), linear-gradient(rgba(143,163,192,.10) 1px, transparent 1px), linear-gradient(90deg, rgba(143,163,192,.10) 1px, transparent 1px); background-size: 100% 100%, 24px 24px, 24px 24px; }

/* QA round 12 (menus). */
.mr-eliminated .mr-elim-map .map-photo { filter: none; }
.mr-holo img { transform: scale(1.12); filter: brightness(.82); }

/* QA round 13 (menus). */
.mr-guide .mr-guide-lineart::before { display: none; }
.mr-guide .mr-guide-lineart::after { background: linear-gradient(90deg, rgba(8,15,27,.94) 0, rgba(8,15,27,.94) 40%, rgba(8,15,27,0) 56%) 0 0 / 100% 40% no-repeat, linear-gradient(180deg, rgba(8,15,27,.94), rgba(8,15,27,0)) 0 40% / 52% 12% no-repeat; }
.mr-holo img { filter: brightness(1.25); }
.mr-holo::before { background-image: radial-gradient(ellipse at 50% 50%, transparent 45%, rgba(16,25,37,.85) 100%), linear-gradient(rgba(143,163,192,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(143,163,192,.06) 1px, transparent 1px); }

/* QA round 14 (menus). */
.mr-holo, .mr-holo img { background: #111a27 !important; }
.mr-holo img { filter: brightness(1.45); }
.mr-map-board::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; box-shadow: inset 0 0 40px 18px rgba(10, 20, 34, .9); }
.mr-victory-art img { -webkit-mask-image: linear-gradient(180deg, #000 0, #000 744px, transparent 761px); mask-image: linear-gradient(180deg, #000 0, #000 744px, transparent 761px); }

/* QA round 15 (menus): the map's clipped arcs fade at the board's top and
   bottom instead of a vignette over the panel frame. */
.mr-map-board::before { display: none; }
.mr-map-board .map-art { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 34px, #000 calc(100% - 34px), transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 34px, #000 calc(100% - 34px), transparent 100%); }

/* QA round 17: a softer scrim edge behind the lesson text. */
.mr-guide .mr-guide-lineart::after { background: linear-gradient(90deg, rgba(8,15,27,.94) 0, rgba(8,15,27,.94) 36%, rgba(8,15,27,0) 58%) 0 0 / 100% 40% no-repeat, linear-gradient(180deg, rgba(8,15,27,.94), rgba(8,15,27,0)) 0 40% / 56% 16% no-repeat; }

/* QA round 19: map names a size smaller, as the prototype's. */
.map-poi { font-size: 10.5px; }

/* QA round 20: the soldier's legs run down to the rule. */
.mr-victory-art img { -webkit-mask-image: linear-gradient(180deg, #000 0, #000 754px, transparent 761px); mask-image: linear-gradient(180deg, #000 0, #000 754px, transparent 761px); }

/* QA round 20: the scrim sits only behind the lesson text. */
.mr-guide .mr-guide-lineart::after { background: linear-gradient(90deg, rgba(8,15,27,.94) 0, rgba(8,15,27,.94) 38%, rgba(8,15,27,0) 50%) 0 0 / 100% 33% no-repeat, linear-gradient(180deg, rgba(8,15,27,.94), rgba(8,15,27,0)) 0 33% / 46% 8% no-repeat; }

/* The map screen as the user approved it (round 8): no edge fade, the grid
   crosses from the map's own pattern, the larger location names. */
.mr-map-board .map-art { -webkit-mask-image: none; mask-image: none; }
.mr-map-plus { display: none; }
.map-poi { font-size: 11.5px; }

/* Dead Orbit on the play screen: the mode switch, its mission panel (the
   map photo in blood red) and its start button; and its results screen. */
.mr-mode .mr-modes { display: flex; gap: 10px; margin-top: 8px; }
.mr-mode .mr-modes button { flex: 1; height: 54px; border: 0; background: rgba(11, 16, 27, .55); color: #b4bfd0; font: 700 26px Oxanium, sans-serif; letter-spacing: .06em; clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px); box-shadow: inset 0 0 0 1px #60718a; cursor: pointer; }
.mr-mode .mr-modes button:hover { color: #f3f5fa; box-shadow: inset 0 0 0 1px #c5f277; }
.mr-mode .mr-modes button.on { color: #0b101b; background: #c5f277; box-shadow: none; }
.mr-mode .mr-modes button.on.dead { background: #c8191c; color: #f3f5fa; }
.mr-lobby-dead .mr-mode:before { background: #c8191c; }
.mr-dead .mr-kicker { color: #ff8d7f; }
.mr-dead-photo img { filter: hue-rotate(150deg) saturate(1.6) brightness(.75) contrast(1.15); }
.mr-dead-photo::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 55%, transparent 30%, rgba(60, 0, 0, .55) 100%); }
.mr-lobby .mr-start.mr-start-dead { grid-template-columns: 1fr; }
.mr-start-dead .mr-button { background: #c8191c !important; color: #f3f5fa !important; }
.mr-start-dead .mr-button:hover { background: #e0262a !important; }
.mr-start-dead .mr-arrow { background: #0b101b !important; color: #ff6b5e !important; }
.mr-zover { background: radial-gradient(ellipse at 74% 50%, #2a0708 0, #0b101b 62%); }
.mr-zover.won { background: radial-gradient(ellipse at 74% 50%, #182a10 0, #0b101b 62%); }
.mr-zover .mr-result-copy { left: 75px; top: 250px; width: 900px; }
.mr-zover .mr-result-copy h1 { font-size: 64px; text-transform: none; }
.mr-zover .mr-result-stats { width: 860px; height: 110px; padding: 16px 22px; margin-top: 22px; }
.mr-zover .mr-result-stats > div { width: 20%; }
.mr-zover .mr-result-stats strong { font-size: 42px; }
.mr-zover .mr-result-stats span { font-size: 16px; }
.mr-zbest { font: 18px Plex, monospace; letter-spacing: .18em; color: #b4bfd0; margin-top: 18px !important; }
.mr-zbest.new { color: #ffd166; }
.mr-zover .mr-result-actions { width: 760px; margin-top: 24px; }
.mr-zover .mr-result-actions .mr-button { height: 85px; }
.mr-zover .mr-result-actions .mr-label { font-size: 38px; }
.mr-zart { position: absolute; right: 90px; top: 260px; width: 560px; text-align: center; }
.mr-zart p { font: 20px Plex, monospace; letter-spacing: .3em; color: #d9b8b8; }
.mr-zround { height: 260px; display: flex; align-items: center; justify-content: center; }
.mr-ztally { height: 190px; max-width: 540px; overflow: visible; filter: drop-shadow(0 0 18px rgba(200, 20, 20, .6)); }
.mr-ztally path { fill: none; stroke: #c8191c; stroke-width: 8.5; stroke-linecap: round; }
.mr-znum { font: 800 230px Oxanium, sans-serif; color: #c8191c; line-height: 1; text-shadow: 0 0 40px rgba(200, 20, 20, .55); }
.mr-zsub { font: 700 34px Oxanium, sans-serif !important; letter-spacing: .2em !important; color: #f3f5fa !important; }
/* Red whichever way it ends (19 Oct: an exfil turned it green; Dead Orbit's
   colour is red, as on the lobby's Start button). */
.mr-zover.won { background: radial-gradient(ellipse at 74% 50%, #2a0708 0, #0b101b 62%); }
.mr-zover.won .mr-ztally path { stroke: #e0262a; }
.mr-zover.won .mr-znum { color: #e0262a; }
.mr-zover .mr-outcome.lime { color: #ff6b5e; }
.mr-zover .mr-button.is-selected { color: #ff6b5e; }
.mr-zover .is-selected > .mr-outline, .mr-zover .is-selected > .mr-outline .inner { stroke: #ff3b30; }
.mr-zover .mr-button.is-selected:after { background: #ff3b30; }
.mr-zover .is-selected .mr-label:after { border-bottom-color: #ff3b30; }
.mr-zover .is-selected .mr-arrow { background: #c8191c; border-color: #c8191c; color: #f3f5fa; }
.mr-zover .mr-button:hover { border-color: #ff3b30; }
.mr-start-dead .mr-outline { stroke: #ff6b5e !important; }
.mr-start-dead .mr-outline .inner { stroke: #0b101b !important; }
.mr-start-dead .mr-button:after { background: #ff6b5e !important; }